Image Optimization for Web

In the last decade, average web page weight has grown a whopping ~360 percent, from an average of about 484 kilobytes to 2,205 kilobytes. That increase are often explained as a function of supply and demand.

People do notice how long a page takes to load. In fact, per data from Pingdom, 24% of users will abandon a site that takes four seconds to load,

The smaller the file size of a page, the faster it will load for anyone who requests it. According to HTTP Archive, a typical mobile web page weighs over 2.2 MB, and more than two thirds of page weight is images. That’s a great opportunity for optimization!(even for SEO).

There are various ways, we can do image Optimization.

1. Use Progressive JPEG and Next-Gen File Formats: Using progressive JPEG in your website or app can greatly improve the user experience for users with slow Internet connections. Another option for improving load times is next-generation image formats like WebP and JPEG-XR. These image formats can create large savings in file size with advanced compression, without hurting image quality.
2. Caching: Caching is a technique used for the purpose of serving content quickly, by storing the image files in a proxy server or a browser cache.
3. Optimize Image Delivery: an alternative choice is to use a Content Delivery Network (CDN). A CDN can deliver your images to users from close proximity to their physical location. The closer the server is, the less the latency.
4. Serve Images of Correct Dimension: This is perhaps the most crucial aspect of the whole “image optimization” problem. As we know, there are tens of different screen sizes out there, and we somehow must make sure that our images are going to look great on all of them. The easy solution!! Serve a big image … it can always be scaled down, correct? Well, technically, that is correct, but in real, this will waste a lot of network bandwidth and we will lose reasonable users because of page load time.

Today we will focus on the last option which is to serve relevant images to device.

Save multiple sizes for each image and use the [srcset](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-srcset) attribute to enable the browser to choose the smallest. The w value tells the browser the width of each version:

<img src="small.jpg"
     srcset="small.jpg 480w,
             medium.jpg 1200w,
             large.jpg 1920"
     alt="…">

Save images with the appropriate size

You can make your application much faster and less data intensive just by using images with size that match the display size. In simple words, give images the right width and height when you save them.

Take a look at the below image.

1280x860 resolution, size 433kb

640x430 resolution, size 131kb

They appear nearly same, but the file size of one is more than 4 times than the other one.

The first image is double in file size because it’s saved with dimensions much larger than the display size. Both images are displayed with a fixed width of 700 pixels, so it makes sense to use an image saved at the same size.

The first thought that comes to our mind is, it be great if you could make each image available at different sizes, then let the browser choose the best size for the device and display size? Unfortunately there’s a catch-22 when it comes to working out which image is best. The browser should use the smallest possible image, but it can’t know the width of an image without downloading it to check.

This is where srcset comes in handy. You save images at different sizes, then tell the browser the width of each version.

<img src="small.jpg"
     srcset="small.jpg 480w,
             medium.jpg 1200w,
             large.jpg 1920"
     alt="…">

The w values show the width of image in pixels. For example, large.jpg 1920w tells the browser that large.jpg is 1920 pixels wide. This enables the browser to choose the smallest possible image, depending on the screen type and the viewport size—without having to download images to check their size.

Next up, the sizes attribute. The sizes attribute tells the browser how many pixels it needs by describing the final rendered width of our image. Think of sizes as a way to give the browser a bit of information about the page’s layout a little ahead of time, so that it can pick a source before it has parsed or rendered any of the page’s CSS.

<img srcset="large.jpg  1024w,
      medium.jpg 640w,
      small.jpg  320w"
   sizes="(min-width: 36em) 33.3vw,
      100vw"
   src="small.jpg"
   alt="A rad wolf" />

Sample Layout:

sizes="[media query] [length],
   [media query] [length],
   etc…
   [default length]"

Our layout has a breakpoint at 36 ems. When the viewport is narrower than 36 ems, the layout changes. Below that breakpoint, the image will fill 100% of the viewport’s width.

One more aspect, We want to touch is High Definition Screens, if we supply the same kind of image to HD Devices with high device-pixel-ratio(say 2). User will see blurred copy of image as the browser will try to fill the same size of area that we are trying to fill with but with image of less pixels, so the images will look blurred, heavily!

<img srcset="small.jpg 1x, large.jpg 2x"
   src="small.jpg"
   alt="A red wolf" />

The srcset attribute takes a comma-separated list of image URLs, each with an x descriptor stating the device-pixel-ratio that that file is intended for.

Additionally, I would like to share one more way to address this issue by adapting which assets you’re serving to users based on the quality of their connection. This is now possible with the Network Information API which enables web applications to access information about the user’s network.

Network info can be helpful in many ways.

Many applications are already doing something similar. For example, YouTube, Netflix and most other video (or video calling) services automatically adjust the resolution during streaming.