5.06 - Images

1 - Findings & Impacts

Compression of images allows a gain in performance. By choosing a suitable format for your images and compressing them, you can free up many bytes of data.

There are two fundamentally different ways to create and store images—and this affects how you deploy images responsively.

Raster images — such as photographs and other images, are represented as a grid of individual dots of color. Raster images might come from a camera or scanner, or be created with the HTML canvas element. Formats like PNG, JPEG, and WebP are used to store raster images.

Vector images such as logos and line art are defined as a set of curves, lines, shapes, fill colors and gradients. Vector images can be created with programs like Adobe Illustrator or Inkscape, or handwritten in code using a vector format such as SVG.

A lot of your images are resized in HTML or CSS. Serving scaled images could save 390.6KiB (87% reduction) - see below. Source: GT metrics

2 - Recommendations

Use WebP if possible
Use SVG for vector art and solid color graphics such as logos and line art. If vector art is unavailable, try WebP or PNG.

WEBP: The new Google's format that is supposed to be 30% smaller in size and is now supported on almost 75% of modern browsers. It has huge performance benefits but it might still not be supported by some browsers.

How to serve WebP images?

All info HERE

It's important to remember, though, that WebP is not a replacement for JPEG and PNG images. It's a format you can serve to browsers that can use it, but you should keep older image formats on hand for other browsers. This is the nature of developing for the web: Have your Plan A ready for browsers that can handle it, and have your Plan B (and maybe Plan C) ready for those browsers that are less capable.

To convert and serve WEBP format, check this documentation HERE

Avoid resizing your images in HTML

Downloading an image to finally display it with small dimensions has zero benefit: you download more information while requesting the browser to do the resizing itself. This is not the browser's role and it involves additional time. It is best to resize the image upfront and then place it on the server

Compress all of your images

It is possible to compress your images via modules dedicated to your CMS or online tools like JPEGMINI (http://www.jpegmini.com/) or Compresspng (http://compresspng.com/fr/) or https://www.imagerecycle.com/?atid=5

Another simple way to accomplish format and quality optimization is to use ImageKit to deliver your images

LINK TO DAREBOOST REPORT

PLEASE HAVE A LOOK AT THE REPORT TO IMPROVE LOADING TIMES

Report abuse