In this post, we'll go through 7 quick and simple ways you can optimize images on your website.

Lets get straight into it.

1. Use WebP image format instead of JPEG and PNG images

WebP is an image format originally developed by Google as a lossy compression format for images. But overtime it has evolved into a more versatile format that supports lossless compression, transparency(PNGs) and even animation(GIFs).

Typically, a WebP image will weigh less than the corresponding JPEG counterpart while still maintaining similar visual image quality. This makes it highly suitable for use in web and mobile applications.

Do browsers support webp images?

All major browsers(desktop and mobile) support WebP images: https://caniuse.com/webp

How can I create and use webp images in my web application?

Google offers a command-line utility called cwebp for converting images to the .webp format.

Here is an example of how to use the cwebp command to convert a .png image to a .webp image with the quality setting set to 80.

Copycopy code to clipboard
cwebp -q 80 image.png -o image.webp

You can also make use of plugins to create webp images. For example, NodeJS application developers can use the Sharp NPM package to convert images to WebP. If you are developing in a different programming language, chances are that there are similar plugins, extensions or add-ons that will do this for you.

There are also services like TinyJPG that allow you to invoke their API to convert images into WebP.

AVIF is another fairly new format which offers equal if not better compression than WebP but it is still not supported by all browsers. As of the time of writing this article, it is supported by Chrome, Firefox and Safari but not by Edge.

2. Compress JPG and PNG images

If for some reason, you cannot use WebP, the next best option is to compress your JPG and PNG images.

There are several ways you can compress images.

For example, if you are using NodeJS and want to compress user uploads programmatically, then you can make use of the Imagemin class of NPM packages. There are several plugins available here based on whether you want to make use of lossy or lossless compression and which image format you are targetting. There is also a CLI flavor if you are interested in that. You can tune the compression settings as per your requirements but typically, the default lossy compression settings should work fine for most scenarios.

You can manually compress images using online services like TinyJPG or Squoosh.app. TinyJPG also provides an API so that you can programmatically compress your images and automate your compression workflow.

3. Serve responsive images with relevant dimensions and resolution

Another great strategy for image optimization is to serve images based on the device or viewport width, device resolution and the size of the image.

HTML provides the srcset and sizes attributes on the <img> tag that use media queries to conditionally load images of different sizes and resolutions. It also provides the <picture> and <source> tags which you can use to serve images that are cropped for better viewing experience on a mobile device.

Here is a detailed blog post on how to serve responsive images using the attributes and tags mentioned above.

4. Use SVGs for icons instead of JPG or PNG images

Using vector formats like SVG instead of raster formats like JPG or PNG images is another great way to save on some precious bandwidth.

Vector formats can scale flawlessly on higher resolution devices making them a great choice for icons.

Most popular icon libraries like Font Awesome and Google Font Icons provide options to download and use icons as SVGs.

You can go a step further and minify your SVG files to save even more space and bandwidth.

5. Implement Browser-level lazy loading

HTML provides the loading attribute on <img> tags which when set to the value "lazy" tells the browser to defer the loading of this image until it appears within the viewport.

Copycopy code to clipboard
<img src="image.jpg" loading="lazy" alt="..." />

The alternative value for the loading attribute is "eager" which basically tells the browser to download this image immediately. This is also the default loading behaviour of the browser which applies when you do not specify this attribute.

In order to optimize our web pages, we can add loading="lazy" to all images that are likely to appear below the fold. When the page loads, the browser will defer downloading these offscreen images and will only load the images that fall within the viewport. When the user scrolls down, as soon as a certain part of these images starts appearing within the viewport, the browser will download them. Hence the name "lazy-loading" images.

Please take care to never use the loading attribute on images that have a high probability of appearing within the viewport which will negatively impact both performance and user experience.

Here is a wonderful video illustration of the lazy loading behavior in action.

6. Use Image CDNs

Image CDNs provide features for quick delivery of images that are processed and optimized on-the-fly as needed.

You can upload an image to these CDNs and then request the same image with varying widths, heights, resolution and even format.

For example, a CDN will typically allow you to specify options for manipulating images like resizing, cropping, converting, etc. via query-string parameters in the URL or something similar like this:

Copycopy code to clipboard
https://image-cdn.com/image.jpg?format=webp&width=800

This URL will instruct the the CDN that you want to download a 800px wide version of image.jpg in the WebP format.

The CDN will first check whether it has an image that matches this criteria in a cache. If it does then it will send the image from the cache otherwise it will generate one on the fly.

You can opt for self-managed CDNs, for example: Thumbor.

Or you can also opt for paid third-party cloud-based Image CDN services like Imagekit.io, Cloudinary and Sirv.

7. Use CSS and Web Fonts for stylish effects and typography

Sometimes web designers tend to lean towards using images for depicting gradients, shadows, and fancy typography. Wherever possible, try to replace such images using CSS and Web Fonts which will not only be a relatively lightweight solution but will also enable selecting and searching for text which will not be possible if this text is within an image.

Hope this helps!🙏