Because , optimizing images is extremely important for running a performant site. Every byte you don’t have to transfer to serve your content means a leaner page and faster load times for your users. nearly 50% of a typical page’s weight is made up of images This tutorial covers the ins and outs of using the attribute, and how imgix makes the process easier. srcset Serving correctly-sized images is important because it can minimize bytes transferred and . The attribute is one of the best ways to do so today. CPU overhead srcset srcset & Display Densities provides a simple way to specify different images for different device resolutions. It allows sites to serve 2x, 3x, or higher versions of images to modern devices with high-resolution displays. Using it within an tag is easy: srcset img <img
  srcset="asset.png 1x, asset-2x.png 2x, asset-3x.png 3x"
  src="asset.png"
> While this delivers the best assets to users, it moves the burden to the service to generate and store each version of every asset. This can cause storage costs to balloon, and you may never serve every asset you generate. When dealing with a large library or with user-generated content, this is untenable. With imgix, your entire image library is -ready instantly. srcset Using srcset With imgix Using the imgix and URL parameters, we can simplify the amount of effort it takes to generate the attributes on our images. For this example, we will use the image located at: w dpr srcset https://assets.imgix.net/examples/bluehat.jpg We want to serve this image at 400 pixels wide: <img
  srcset="https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=1 1x,
          https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=2 2x,
          https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=3 3x"
  src="https://assets.imgix.net/examples/bluehat.jpg?w=400"
> https://codepen.io/imgix/pen/aOxmqg?embedable=true We get an image tag that serves out the best resolution for each device based on its device-pixel ratio (DPR). imgix will automatically serve more pixels when given the parameter. dpr Calculating Device-Pixel Ratio You can see that we’ve applied , , and to our 1x, 2x, and 3x assets, respectively. The parameter instructs imgix to treat the parameters as (also known as “CSS pixels”). dpr=1 dpr=2 dpr=3 dpr w device-independent pixels Thus, the 400×300 image at will actually be an 800×600 pixel image. The image will be 1200×900 pixels. dpr=2 dpr=3 This gives you the best of both worlds: full resolution for devices that support it, without delivering more data than necessary to devices that won’t use it. By using imgix, we only have to store the original asset, and then manipulate it on the fly, as we’ve seen above. This also removes the headache if and when a device comes out. imgix currently supports up to . 4x dpr=5 This practice works best with fixed image layouts. Using with is currently . srcset dpr widely supported Using and With Media Queries srcset sizes A different approach to handling responsive images for fluid layouts is to use size definitions with . This solution gives you the ability to target sizes based on media query definitions within a attribute. srcset sizes The browser will request the most appropriate image or—depending on the browser—will load the best image from the cache when available. The following example demonstrates sizing three images with imgix at 1024, 640, and 480 pixels wide. Using the attribute, we are targeting two queries for behavior for the images. sizes At a viewport of or above, the images will display at 1/3 the viewport width. 36em Below that size, the images will display at the full size of the viewport. At those sizes, the browser will determine which image to load when the page is rendering for the given target size. <img
  srcset="https://assets.imgix.net/unsplash/bridge.jpg?w=1024&h=1024&fit=crop 1024w,
          https://assets.imgix.net/unsplash/bridge.jpg?w=640&h=640&fit=crop 640w,
          https://assets.imgix.net/unsplash/bridge.jpg?w=480&h=480&fit=crop 480w"
  src="https://assets.imgix.net/unsplash/bridge.jpg?w=640&h=640&fit=crop"
  sizes="(min-width: 36em) 33.3vw, 100vw"
> See the Pen <a href="https://codepen.io/imgix/pen/VLNZaW/" target="_blank">VLNZaW</a> by imgix (<a href="https://codepen.io/imgix" target="_blank">@imgix</a>) on <a href="https://codepen.io" target="_blank">CodePen</a>. https://codepen.io/imgix/pen/VLNZaW?embedable=true Best Practices Using imgix There is more to think about when delivering the best images possible with and imgix. srcset imgix affords the ability to add additional operations to give you more control over your output images, and because they are defined in the URL, you can fine-tune your settings and make late-stage edits as decisions change. One of the challenges of using is that you want to generate enough sizes so that most of your users are downloading images that are close in size to what they see on the screen, but if you generate too many sizes you can end up impacting cache-ability, which could have a negative performance impact. srcset Luckily, many of the can automatically generate an optimal for you. imgix libraries srcset Use fit=max Using the parameter on an imgix URL will ensure that an image is never delivered larger than its original size. This way, when requesting a image, there won’t be any image extrapolation. Read more about in the documentation. fit=max dpr=3 fit Use auto=format The parameter will deliver lightweight WebP images for browsers that support it (Chrome, Firefox, etc.) and fall back to the original format for other instances. auto=format More modern formats like WebP can greatly cut down the amount of image data sent to the client; sometimes by as much as 35%. Read more about in the documentation. Automatic Content Negotiation Use Variable Quality When setting with imgix, you may want to consider adjusting the quality of your images. Setting the parameter to lower values for higher DPRs allows you to reduce the file size while maintaining a denser pixel set for your image. dpr q The image size is 21.3kB. . ?q=80 Try it and see the difference in Sandbox The image size is 34.7kB. ?dpr=2&q=40 Try it and see the difference in Sandbox. The image size is 42.1kB. ?dpr=3&q=20 Try it and see the difference in Sandbox. This common practice is made easier with the imgix URL API. Adjusting the quality works especially well with lossy formats such as WebP and JPEG. Putting It All Together Here is an implementation of these examples as applied to our DPR example: srcset <img
  srcset="https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=1 1x,
          https://assets.imgix.net/examples/bluehat.jpg?w=400&fit=max&q=40&dpr=2 2x,
          https://assets.imgix.net/examples/bluehat.jpg?w=400&fit=max&q=20&dpr=3 3x"
  src="https://assets.imgix.net/examples/bluehat.jpg?w=400"
> See the Pen <a href="https://codepen.io/imgix/pen/MwRjzZ/" target="_blank">MwRjzZ</a> by imgix (<a href="https://codepen.io/imgix" target="_blank">@imgix</a>) on <a href="https://codepen.io" target="_blank">CodePen</a>. Summary and Related Tutorials Responsive imagery is a rapidly-changing area of implementation, and different methods are applicable to different use cases. Here are our other tutorials that touch on aspects of responsive design. Designing for Retina, Deploying with imgix Next-Generation Responsive Images with Client Hints Using imgix with <picture>

Using the imgix API to Build a Responsive Image Gallery in React

Seamless Point-of-Interest Cropping: Automating Image Focus Extraction

Sign Up for Free

A Beginner's Guide: Responsive Images With srcset

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

3 Simple Ways to Optimize Your Images and Improve Core Web Vitals

3 Simple Ways to Optimize Your Images and Improve Core Web Vitals

5 Tips to Improve the Core Web Vitals of WordPress Websites

7 Ways to Achieve a Faster Core Web Vitals Score

8 Ways to Improve the CLS Score in Google’s Core Web Vitals

An Intro to Ecommerce Navigation SEO Best Practices

3 Simple Ways to Optimize Your Images and Improve Core Web Vitals

3 Simple Ways to Optimize Your Images and Improve Core Web Vitals

5 Tips to Improve the Core Web Vitals of WordPress Websites

7 Ways to Achieve a Faster Core Web Vitals Score

8 Ways to Improve the CLS Score in Google’s Core Web Vitals

An Intro to Ecommerce Navigation SEO Best Practices

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps