Full Human
Published in

Full Human

Optimizing images on the web

Source set, WebP, lazy-loading

Optimizing images is a crucial step toward high-quality websites. But it is often a process that is not taking into account by many software developers. Let’s review the common ways we can use to optimize images easily at this point in time.

Use a source set

Building a responsive website means you will have to consider more than one resolution. One device can have a small resolution on a smartphone and the other a high resolution on a 4k monitor. The <img> element has a src attribute that lets you specify the source of the image. But this image will be applied to every device, regardless of their resolution.

To fix this problem, we have another attribute called srcset. With srcset, we can provide additional source images and let the browser appropriate image to load. The source set is a list of URL and sizes separated by ,.

Use WebP

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster. WebP lossless images are 26% smaller in size compared to PNGs.

WebP was first released in 2010, and it is soon going to be available in all major browsers. It took some time, I know. At the time of this writing, only Safari doesn’t support WebP. You can check the support on caniuse.

If WebP is not yet available on every browser, how can we still use it? We can use a <picture> element. The picture element works similarly as video and audio and takes <source> elements as children. Each source can have a source set, which lets you define a source set in type image/webp and type image/jpeg.

The browser will consider each child <source> element and choose the best match among them. If no matches are found—or the browser doesn't support the <picture> element—the URL of the <img> element's src attribute is selected.

Lazy Loading

Images are a resource that can be heavy on a webpage. You don’t always look at a page in its entirety. Why would you load images at the bottom of the website if most of your users will not scroll that far? That is the reason why you would want to lazy load your images. You can lazy load your images with javascript and intersection observer API, or you can now do it in HTML directly.

A new attribute of the <img> element is called loading. And one of the available value is lazy. It provides a native way for browsers to know which images should be loaded lazily and makes it simple for developers to use this technique.

About the author
I’m Floriel, a software engineer at Full Human. I grew up reading stories about heroes. Those fictional characters have been my role models. I aspire to work hard to reach their level and become a better human being every day. You can follow me on GitHub and Twitter.

--

--

--

Learn about web development, Full Human software engineering, product developments and more.

Recommended from Medium

Organizing Styles in React Native

Building a Channel API in Loopback 4 : Part I

Advanced TypeScript With Code Challenges: Infer Keyword

Large elephant with Typescript logo and small elephant with JavaScript logo

How to solve the “Process out of memory” error in Node.js

Why I choose React?

How to Solve Maven Plugin Errors in IntelliJ?

Developer experience working with full-stack Typescript/Javascript/Node.js

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Floriel

Floriel

Software Engineer and author of PurgeCSS — Writing articles about web development regularly

More from Medium

Using Mustache To Preprocess HTML Templates

Svelte Slicer

JavaScript Coding Tutorial — Part 6

By changing just two functions we can get some pretty nice paint brush effects already.

Enhancing our simple responsive image gallery