150 Million

Last year, we decided to re-imagine imo, to simplify it and get at the heart of what we wanted to deliver to you. Some of these changes were difficult, and meant removing features that many people used - but our goal was to produce an experience that would resonate deeply. We focused on simplicity and a video chat experience that many grew to love. We are excited to share that over 150 million people have now signed up for imo, up from 5 million when we decided to embark on this path. We are proud that you have chosen imo to connect with your family and friends. At the same time, our work is not done and our product is not perfected. We will continue to improve it, so that you can have a better service. We’re looking for great people to join our team, people with a passion for connecting people across time and distance. If you’re interested in joining our team, talk to us - https://imo.im/careers

Responsive Images with srcset & imgix

Because more than 60% of a typical page’s weight is made up of images, 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 readers. Features have landed in some browsers to help make sure your site serves the best-sized images to each end-user. This blog post covers the ins and outs of using the srcset attribute, and also covers how this process is made easier with imgix.

Serving correctly-sized images is important because it can minimize bytes transferred and CPU overhead. The srcset attribute is one of the best ways to do so today. It isn’t the fullest-featured HTML5 attribute, but it does provide some quick wins and has a polyfill.

srcset & Display Densities

srcset provides a simple way to specify different images for different device resolutions. It allows sites to serve a 2x version to devices like the iPhone 6, Retina Macs, and the Samsung Galaxy S3. Some devices also go up to 3x DPR, including the iPhone 6 Plus and the Galaxy Note III. Using it within an img tag is easy:

<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 srcset-ready instantly.

Using srcset with imgix

Using the imgix w and dpr URL parameters, we can simplify the amount of effort it takes to generate the srcset attributes on our images. For this example, we will use the image located at:

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 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" />

See the Pen aOxmqg by imgix (@imgix) on CodePen.

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 dpr parameter.

Calculating Device-Pixel-Ratio

You can see that we’ve applied dpr=2 and dpr=3 to our 2x and 3x assets, respectively. The dpr parameter instructs imgix to treat the w parameters as Device independent pixels (also known as a “CSS pixels”). Thus, the 400×300 image at dpr=2 will actually be a 800×600 pixel image. The dpr=3 image will be 1200×900 pixels in dimension.

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 4x device comes out. imgix currently supports up to dpr=8.

This practice works best with fixed image layouts. Using srcset with dpr is currently widely supported.

srcset & sizes

A different approach to handling responsive images for fluid layouts is to use size definitions with srcset. This solution gives you the ability to target sizes based off of media query definitions within a sizes attribute. The browser will load the most appropriate image and—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 sizes attribute, we are targeting two queries for behavior for the images.

At a viewport of 36em or above, the images will display at 1⁄3 the viewport width. Below that size, the images will display the full size of the viewport. At those sizes, the browser will determine which image to load in 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 VLNZaW by imgix (@imgix) on CodePen.

Support for this implementation is not widely accepted but it is gaining traction. It does gracefully fall back to an image specified by src. The Guardian is one of imgix’s customers that is already using this approach.

Best Practices Using imgix

There is more to think about when delivering the best images possible with srcset and imgix. imgix affords the ability to add additional operations to give you more control on your output images. Because imgix operations are defined in the URL, you can fine tune your settings and make late-stage edits as decsisions change.

Use fit=max

Using the fit=max param on an imgix URL will ensure that an image is never delivered larger than its original size. This way when requesting a dpr=3 image, there won’t be any image extrapolation. Read more about imgix fit modes in our documentation.

Use auto=format

The auto=format parameter will deliver light-weight WebP images for Chrome browsers, JPEG XR for Internet Explorer, and finally fall back to the original format for other instances. These more modern formats can greatly cut down the amount of image data sent to the client, sometimes by as much as 35%. Read more about Automatic Content Negotiation in our documentation.

Use Variable Quality

When setting dpr with imgix, you may want to consider adjusting the quality of your images. Setting the q parameter to lower values for higher DPRs allows you to reduce the file size while maintaining a denser pixel set for your image.

?w=200 &q=90 15.9 kB

?w=200 &dpr=2 &q=40 18.53 kB

?w=200 &dpr=3 &q=20 19.37 kB

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 srcset DPR example:

<img srcset="https://assets.imgix.net/examples/bluehat.jpg?w=400 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 MwRjzZ by imgix (@imgix) on CodePen.

That’s it for this tutorial. If you have any questions, please don’t hesitate to get in touch with our friendly support team. Signing up for imgix is free, and can be done on our site. If you would like to play around with these parameters yourself, check out the imgix Sandbox.

What did we miss? How does your team deal with responsive images? Send us a note on Twitter to continue the discussion.