Skip to content

Optimizing Images

Image Resolution and Compression

Although internet speeds have greatly increased over the years, it is still important to reduce image file sizes using appropriate resolution and compression settings.

For resolution, consider how much of the browser window your images will cover (in pixels), then double that value when cropping or downloading image files (to accommodate HiDPI displays). Assuming a maximum layout width of 1100px:

  • An image spanning the entire body should have a width around 2200px.
  • An image spanning half the body (e.g., in a 2-column layout) should have a width around 1100px.
  • An image spanning one-third the body (e.g., in a 3-column layout) should have a width around 734px.
  • When using Lorem Picsum, specify the required resolution in the URL.
  • When downloading images from Unsplash, another stock photo site, or using your own images, resize them with Squoosh or your preferred photo editing tool before adding them to your project.

You are not expected to perfectly match every image to its layout proportions, but keep in mind that even a fullscreen image rarely needs to exceed the resolution of a 4K display. Our GitHub autograder will check that no image files are larger than 3840px in width, as anything larger is unnecessary.

There are several different types of image compression codecs suitable for web development. For simplicity, all images used in your projects should be in the WebP format.

  • When using Lorem Picsum, simply add .webp to the end of the URL.
  • For all other image sources, choose the WebP codec when compressing your files using Squoosh or another application.

Fluid Images

It is highly recommended to start sizing all <img> elements using only width: 100%. This ensures they responsively fill their closest parent container, regardless of the original resolution of the image file. It also allows responsive layout containers like Flexbox and Grid to manage image sizing effectively when multiple images appear in the same row.

If needed, wrap an <img> in a <figure> element with a <figcaption> to keep images and captions paired, even when the browser window resizes. Note that <figure> has a default margin, which you may want to adjust or remove for better spacing.

See the Pen Fluid Images (IMS322 Docs) by Eric Sheffield (@ersheff) on CodePen.