Serve images with correct dimensions
This Glitch is small enough that its images could be inspected by hand. However for most websites, using a tool like Lighthouse to automate this is essential.
- To preview the site, press View App. Then press Fullscreen .
Command+Option+Jon Mac) to open DevTools.
- Click the Audits tab.
- Select the Performance checkbox.
- Click Run audits.
- Look for the results of the Properly Size Images audit.
The Lighthouse audit shows that both of this page's images need to be resized.
Start at the top of the page and fix the logo image.
flower_logo.pngin the DevTools Elements panel.
This is the CSS for
The CSS width of this image is 50 pixels, so
flower_logo.png should be resized
to match. You can use ImageMagick to resize the
image to fit. ImageMagick is a CLI tool for image editing that comes
pre-installed in the codelab environment.
- Click Remix to Edit to make the project editable.
- Click Tools.
- Click Logs.
- Click Console.
- In the console, type:
convert flower_logo.png -resize 50x50 flower_logo.png
Next, fix the photo of the purple flowers.
flower_photo.jpgin the DevTools elements panel.
This is the CSS for
margin: 30px auto;
border: 1px solid black;
50vw sets the CSS width of
flower_photo.jpg to "half the width of
(1vw is equal to 1% the width of the browser).
The ideal size for this image would depend on the device it is being viewed on, so you should resize it to a size that works well for most of your users. You can check your analytics data to learn which screen resolutions are common amongst your users:
This data indicates that 95%+ of the visitors to this site use screen resolutions 1920 pixels wide or less.
Using this information we can calculate how wide the image should be:
(1920 pixels wide) * (50% of browser width) = 960 pixels
On resolutions greater than 1920 pixels wide, the image will be stretched to cover the area. The resized image is still fairly large, so the effects of this should not be very noticeable.
- Use ImageMagick to resize the image to 960 pixels wide. In the terminal type:
convert flower_photo.jpg -resize 960x flower_photo.jpg
magick convert flower_photo.jpg -resize 960x flower_photo.jpg
960x is not a typo; it specifies a width, but not a height. The
image height will be scaled in proportion to the width. This is a handy trick
for when you only care about an image's dimensions in one direction.
- Re-run the Lighthouse Performance audit to verify that you have successfully re-sized the images.
… And it fails! Why is that?
Lighthouse runs its tests on a Nexus 5x. The Nexus 5x has a 1080 x 1920 screen.
For the Nexus 5x, the optimal size of
flower_photo.jpg would be 540 pixels
wide (1080 pixels * . 5). This is much smaller than our resized image.
Should you resize the image to be even smaller? Probably. However, the answer to this isn't always clear-cut.
The trade-off here is between image quality on high-resolution devices and performance. It's easy to overestimate how closely users will be inspecting images—so you should probably make them smaller—but there are certainly use cases where image quality is more important.
The good news is that you can bypass this tradeoff altogether by using responsive images to serve multiple images sizes. You can learn more about this in the Responsive Images guide.