This content originally appeared on web.dev and was authored by Sam Dutton
According to HTTP Archive, a typical mobile web page weighs over 2.6 MB, and more than two thirds of that weight is images. That's a great opportunity for optimization!
tl;dr
- Don't save images larger than their display size.
- Save multiple sizes for each image and use the
srcsetattribute to enable the browser to choose the smallest. Thewvalue tells the browser the width of each version:
<img src="small.jpg"
srcset="small.jpg 500w,
medium.jpg 1000w,
large.jpg 1500w"
alt="…">Save images with the right size
You can make your website faster and less data hungry by using images with dimensions that match the display size. In other words, give images the right width and height when you save them.
Take a look at the images below.
They appear nearly identical, but the file size of one is more than 10 times larger than the other.
The first image is much larger in file size because it's saved with dimensions much larger than the display size. Both images are displayed with a fixed width of 300 pixels, so it makes sense to use an image saved at the same size.
For fixed widths, use images saved with the same dimensions as the display size.
But… what if display size varies?
In a multi-device world, images aren't always displayed at a single fixed size.
Image elements might have a percentage width, or be part of responsive layouts where image display sizes change to fit the screen size.
…and what about pixel-hungry devices like Retina displays?
Help the browser choose the right image size
Wouldn't it be great if you could make each image available at different sizes, then let the browser choose the best size for the device and display size? Unfortunately there's a catch-22 when it comes to working out which image is best. The browser should use the smallest possible image, but it can't know the width of an image without downloading it to check.
This is where srcset comes in handy. You save images at different sizes, then
tell the browser the width of each version:
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
alt="…">The w values show the width of each image in pixels. For example,
small.jpg 500w tells the browser that small.jpg is 500
pixels wide. This enables the browser to choose the smallest possible image,
depending on the screen type and the viewport size—without having to
download images to check their size.
Caution:
srcset gives the browser information about the
saved width of each image file.
It does not specify the size to display the image—you still need CSS for that!
You can see srcset in action for the image below. If you're on a laptop or
desktop computer, change your browser window size and reopen this page.
Then use the Network panel of your browser tools to check which image was used.
(You'll need to do that in an Incognito or Private window, otherwise the
original image file will be cached.)
How can I create multiple image sizes?
You'll need to make multiple sizes available for every image you want to use
with srcset.
For one-off images such as hero images you can manually save different sizes. If you have lots of images, such as product photos, you'll need to automate. For that there are two approaches.
Incorporate image processing in your build process
As part of your build process, you can add steps to create different sized versions of your images. See "Use Imagemin to compress images" to learn more.
Use an image service
Image creation and delivery can be automated using a commercial service like Cloudinary, or an open source equivalent such as Thumbor that you install and run yourself.
You upload your high resolution images, and the image service automatically
creates and delivers different image formats and sizes depending on the URL
parameters. For an example, open this sample image on Cloudinary and try changing the w value or the file extension in the URL bar.
Image services also have more advanced features such as the ability to automate "smart cropping" for different image sizes and automatically deliver WebP images to browsers that support the format, instead of JPEGs—without changing the file extension.
You can check the format delivered using your browser tools.
For the image URL above, a WebP file is automatically
delivered to browsers that support WebP, without changing the .jpg file
extension.
What if the image doesn't look right at different sizes?
In that case, you'll need to use the <picture> element for "art direction":
providing a different image or image crop at different sizes. To learn more
take a look at the "Art direction" codelab.
What about pixel density?
High-end devices have smaller (more dense) physical pixels. For example, a high-end phone might have two or three times as many pixels in each row of pixels as a cheaper device.
That can affect the size you need to save your images. We won't go into the gory details here, but you can find out more from the "Use density descriptors" codelab.
What about the display size of the image?
You can use sizes to make srcset work even better.
Without it, the browser uses the full width of the viewport when choosing an
image from a srcset. The sizes attribute tells the browser the width that an
image element will be displayed, so the browser can choose the smallest possible
image file—before it makes any layout calculations.
In the example below, sizes="50vw" tells the browser that this image will be
displayed at 50% of the viewport width.
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
sizes="50vw"
alt="…">You can see this in action at simpl.info/sizes and the "Specifying multiple slot widths" codelab.
Caution:
sizes gives the browser information about the display width
of an image element.
As with srcset it does NOT specify the size to display the image—you need
CSS for that.
What about browser support?
srcset and sizes are supported by over 90% of
browsers globally.
If a browser does not support srcset or sizes it will fall back to just using the src attribute.
This makes srcset and sizes great progressive enhancements!
Learn more
Take a look at the "Optimize your images" section of web.dev for a deeper dive into image optimization. For a more guided experience, consider trying the free "Responsive Images" course offered by Udacity.
This post accompanies Top tips for web performance: a fortnightly video series showing simple techniques to improve site speed.
This content originally appeared on web.dev and was authored by Sam Dutton
Sam Dutton | Sciencx (2019-06-24T00:00:00+00:00) Top tips for web performance. Retrieved from https://www.scien.cx/2019/06/24/top-tips-for-web-performance/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.