10 Web Performance Audit Tips for Your Next Billion Users in 2018: Resolution Switching

img {
  width: 100%;
  height: auto;
}

Celý článek

We need to learn that when it comes to responsive design, this doesn’t cut it for responsive images:

img {
  width: 100%;
  height: auto;
}

This is not a silver bullet and we need to stop relying on it in 2018. You SHOULD NOT be serving a 2MB image meant for large screens to a mobile phone just by resizing dimensions.

Resolution switching is a term used to remind us that when the dimension of a device changes, we should be serving an entirely different image of different dimensions. Here is an illustration:

The image that says “yes” should come in different dimensions for different device resolutions. Adjusting the on-disk dimension affects the file size of an image and you want that size to be small when rendering on mobile devices with less resources and more tendency of being on a slower network.

One way to do this is by using the srcset attribute on the img tag. Check out the syntax below:

<img src="small.jpg" srcset="medium.jpg 750w, big.jpg 1500w" alt="good">

Take a look at the code sample above, all we're doing is telling the browser about some images that we have available and what size they are. It is then the work of the browser to figure out which one of the images will be best fit to render depending on the screen width of the device.

Considerations

Responsive Image Breakpoints

Use responsive image breakpoints tools to generate different images for different resolutions for your website. The responsive image breakpoint is an app that lets you download the scaled-down version of an uploaded image. It shows you the optimal breakpoints for that particular image and then gives you a clear example with markup. Remember, if scaling down images by a certain level doesn’t significantly save enough bandwidth, you can always deliver bigger images to your users and let the browser handle resizing. On the other hand, if a small dimension reduction significantly reduces the file size of the image, you should definitely create a scaled down image version.

Automtic Breakpoints

Some services such as Blobstore which is rendered by Google App Engine and Cloudinary provide cloud storage that allows you to store a single large image and automatically transform the image on delivery. Blobstore allows applications to serve data objects limited only by the amount of data that can be uploaded or downloaded over a single HTTP connection. Applications can use the Blobstore to accept large files as uploads from users and to serve those files. Files are called blobs once they're uploaded. Applications don't access blobs directly. Instead, applications work with blobs through blob info entities (represented by the [BlobInfo](https://cloud.google.com/appengine/docs/standard/python/refdocs/google.appengine.ext.blobstore.blobstore#google.appengine.ext.blobstore.blobstore.BlobInfo) class) in the datastore. For further elaboration on how Blobstore is used, you can check out the Google Cloud Platform page here.

Tools and Resources

• MDN: Responsive images
• Responsive breakpoints
• Automatic breakpoints