Rek Bell

⬟

The use of images increases the size of a web page which considerably lowers the load speed of the page. To improve the speed of your website it is important to consider compressing or resizing images.

See this video I did on image optimization, which covers most of the below techniques (with a focus on JPEG images).

Mass image resize

Using ImageMagick to resize images in a folder. Specify output size. A warning, this command will overwrite existing files:

To resize to a specific size (using example size):

mogrify -resize 1200x679 *.jpg

Specifying just an image height or width, will preserve the aspect ratio of the images:

mogrify -geometry x679 *.jpg

Compression parameters

Convert arguments/parameters to balance quality with file size using ImageMagick:

convert image.input.jpg \
-sampling-factor 4:2:0 \
-strip \
-quality 85 \
-interlace line \
-colorspace RGB \
image.output.jpg

To process multiple files, use mogrify. This overwrites all existing files with a jpg extension:

mogrify -format jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace line -colorspace RGB *.jpg

Try JpegOptim as an alternative to ImageMagick (although apparently it doesn't optimize as well as IM) and OptiPNG for PNGs.

Lazy loading

Lazy Loading is a set of techniques in web and application development that defers the loading of resources on a page to a later point in time—when those resources are actually needed instead of loading them up front. These techniques help in improving performance, better utilization of the device’s resources and reducing associated costs.

Lazy loading images in an image tag. You can use the loading attribute to completely defer the loading of offscreen images that can be reached by scrolling:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

While the browser loads an image, it does not immediately know the image's dimensions, unless these are explicitly specified. To enable the browser to reserve sufficient space on a page for images, it is recommended that all <img> tags include both width and height attributes.

Without dimensions specified, layout shifts can occur, which are more noticeable on pages that take some time to load. Specifying dimensions decreases the chance of layout shift. [source]

Dithering

Dithering is a useful technique for reducing images with high color counts to lower color counts, reducing file size (and bandwidth) without harming quality. Dithered images are roughly ten times less resource-intensive.

Gain better control. On a modern LCD or LED screen, a full-color image can be displayed without any problems. But consider an older PC, one that only supports a limited palette. The image will be restricted to a websafe palette, and will likely destroy your image. Problems arise any time an image is displayed on a device that supports less colors than the image contains. Subtle gradients in the original image may be replaced with blobs of uniform color, and depending on the restrictions of the device, the original image may become unrecognizable.

Dithering is an attempt to solve this problem. Dithering works by approximating unavailable colors with available colors, by mixing and matching available colors in a way that mimicks unavailable ones. Dithering is an extremely powerful technique, and it can be used in ANY situation where data has to be represented at a lower resolution than it was originally created for. [source]

Dithering algorithms include Sierra, Two Sierra, Floyd Steinberg, Atkinson, Jarvis/Judice&Ninke, Stucki and Burkes, all produce slightly difference results.

To learn the effects of each algorithm on images, test them with Dither-it, an online tool.

Metadata

Most cameras embed hidden information (called metadata) into every image or photograph. There are different formats which can be used to store metadata in JPEG images. The most common ones include: EXIF, XMP, 8BIM, IPTC and ICC [source]. On average, image metadata makes up 16% of a typical JPEG file on the web.

It's possible to remove this extra information by using GIMP, or using ExifTool or Imagemagick.

GIMP

Open image with GIMP, go to File > Export As, click on Export and in the export options, expand the Advanced Options panel and uncheck Save EXIF data and/or Save XMP data.

ExifTool

Install ExifTool if you don't have it.

$ sudo apt-get install libimage-exiftool-perl

Remove all metadata from an image or photo:

$ exiftool -all= image.jpeg

To remove all metadata from multiple images or photos, go into the directory with the images. Execute the following command to remove all metadata from all images in the current directory:

$ exiftool -all= *

ImageMagick

To process a single image:

convert -strip "[path to image]"

To process a directory of jpegs, navigate to directly and enter:

mogrify -strip *.jpg

CSS sprites

Another way to optimize images is to use CSS sprites. This refers to combining several images into a single image and then applying CSS to display an individual image as required. This saves bandwidth because fewer requests are sent for the images.

Instead of using say, three separate images, it's possible to use one image, and with CSS, we can show just the part of the image we need. View a tutorial.