lightning-image
lightning-image
is a Lightning Web Component specially designed to easily
optimize image loading. It's optimized for fixed width/height images and images that stretch the full-width of a container.
Using Salesforce CRM Content thumbnail rendition servlet to optimize the thumbnail's size.
Table of Contents
Problem
Large, unoptimized images dramatically slow down your site.
But creating optimized images for websites has long been a thorny problem. Ideally you would:
- Resize large images to the size needed by your design
- Generate multiple smaller images so smartphones and tablets don't download desktop-sized images
- Efficiently lazy load images to speed initial page load and save bandwidth
- Hold the image position so your page doesn't jump while images load
Doing this consistently across a site feels like sisyphean labor. You manually optimize your images and then… several images are swapped in at the last minute or a design-tweak shaves 100px of width off your images.
This isn't ideal. Optimized images should be easy and the default.
Solution
lightning-image
works seamlessly with Salesforce CRM Content thumbnail rendition servlet. To produce perfect images,
you need only:
- Install
lightning-image
and use it in place of the built-inimg
- Write a controller to query the Content thumbnail
which specify the fields needed by
lightning-image
.
Install
There are two ways to install this component:
- Using a Scratch Org: This is the recommended installation option. Use this option if you are a developer who wants to experience the code.
- Using an Unmanaged Package: This option allows anybody to experience the sample app without installing a local development environment.
Installing to your Org
- Set up your environment. Follow the steps in the Quick Start: Lightning Web Components Trailhead project. The steps include:
- Install Salesforce CLI
- Install Visual Studio Code
- Install the Visual Studio Code Salesforce extensions, including the Lightning Web Components extension
- If you haven't already done so, authenticate with your org
sfdx force:auth:web:login
- Clone the repository:
git clone https://github.com/hanabiiii/lightning-image.git
cd lightning-image
- Deploy the component to your org:
sfdx force:source:deploy -m LightningComponentBundle:lightningImage -u [your-account]
Installing using an Unmanaged Package
Click this link to install the unmanaged package in your org.
How to use
Please check the example component: Case Attachments.
Resolution switching
lightning-image
supports showing different images at different breakpoints, which is known as Resolution switching: Different sizes.
lightning-image
props
Name | Type | Description |
---|---|---|
title |
string |
Passed to the img element. |
alt |
string |
Passed to the img element. Defaults to an empty string. alt="" |
loading |
string |
Set the browser's native lazy loading attribute. One of lazy or eager . Defaults to lazy . |
src |
string / array |
Set the image src. Array object to support resolution switching { source, sourceSize , conditionSize , conditionSetSize }. |
wrapperClass |
string |
Spread into the default class of the wrapper element. |
wrapperStyle |
string |
Spread into the default styles of the wrapper element. |
imageClass |
string |
Spread into the default class of the actual img element. |
imageStyle |
string |
Spread into the default styles of the actual img element. |
placeholderColor |
string |
Set a colored background placeholder. You can also pass in any valid color string. Defaults to lightgray . |
imagePlaceholder |
named slot |
Used to replace the default placeholder. |
durationFadeIn |
number |
Fading duration is set up to 500ms by default. |
onload |
event |
An event that is called when the full-size image has loaded. |
onstartload |
event |
An event that is called when the full-size image starts loading. |
onerror |
event |
An event that is called when the image fails to load. |