Putting images on websites is incredibly simple, yes? Actually, yes, it is. You use <img> and link it to a valid source in the src attribute and you’re done. Except that there are (counts fingers) 927 things you could (and some you really should) do that often go overlooked. Let’s see…

Combine picture, source, the media attribute and srcset to serve sharp images to 2x+ density screens.

• Imagine
• ImageOptim
• Sqoosh
• File Optimizer
• RIOT
• Compressor
• Image Resizer
• Pingo
• EzGif

We need an alternative to JPEG that a) is widely supported, b) has better compression efficiency and c) has a wider feature set. We believe AV1 Image File Format (AVIF) has the potential. Using the framework we have open sourced, AVIF compression efficiency can be seen at work and compared against a whole range of image codecs that came before it.

I was a initially sceptical of AVIF – I don't like the idea that the web has to pick up the scraps left by video formats. But wow, I'm seriously impressed with the results above.

We must start by trying to use the option that damages the environment least, and that is text. Don’t assume that images are automatically more powerful than text. Sometimes, text does the job better.

Automates ImageOptim, ImageAlpha, and JPEGmini for Mac to make batch optimisation of images part of your automated build process.

Lazy loading strategies for performance gains within React applications.

One of the advantages of this API is that you don't have to use a library for this kind of job anymore. The majority of browsers are providing a lot of support for some of the newest and awesome APIs, and this has been improving the experience for users in general, allowing developers to use some native browser APIs and reducing their final code bundle.

I love improvements that just work without any effort required of website owners. […] The less friction we can add to introduce these improvements, the more likely they will be adopted, and there’s no better friction than none at all! Fixing the impact of layout shifts on users for responsive images seems to be one such improvement and the web is all the better for it.

A lot of performance issues stem from them simply not being very noticeable to those of us doing the building. Changing that wherever we can is one of the best ways to make sure that all that low-hanging fruit doesn’t go overlooked.

If I would need to implement image lazy-loading on a high-traffic e-commerce site today, I’d very likely go for a JS-based solution. Partly because the native solution only works in Chrome, but also because Chrome’s implementation is too eager and therefore not so effective.

A comprehensive and documented article on images on the web, their use and optimization.

For 27 years, JPEG has been the workhorse image format. While universally adopted, it doesn’t address many modern use cases including high dynamic range (HDR), transparency, responsive web, lossless and others.

The Embedded Image Preview (EIP) technique introduced in this article allows us to load preview images during lazy loading using progressive JPEGs, Ajax and HTTP range requests without having to transfer additional data.

To summarise, using native lazy loading is one of the simplest ways of providing genuine progressive performance enhancements for your users. It’s not a perfect solution, but if you’re not already utilising lazy loading and have lots of images/iframes it’s definitely worth trying out — especially as it’s so easy to implement!

Remove Image Background FREE
100% automatically – in 5 seconds – without a single click