Malte Ubl’s list for:
…8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display.
Perhaps you know Unsplash? I’d wager it’s the most popular stock photography site out there for two big reasons:
In the video embedded below, Jen Simmons explains how to improve image loading by using width and height attributes. The issue is that there’s a lot of jank when an image is first loaded because an img will naturally have …
A little open-source utility from Tyler Sticka that returns a data URL of an SVG to use as an image placeholder as needed.
I like the idea of self-running utilities like that, rather than depending on some third-party service, like placekitten…
I don’t see image sprites used that much anymore, but it’s still a good technique for reducing downloaded decorative image assets when you have multiple on a page. The big idea is combining all the graphics into one and then …
Gatsby does a great job processing and handling images. For example, it helps you save time with image optimization because you don’t have to manually optimize each image on your own.
With plugins and some configuration, you can even setup …
…The Web is smothering in useless images. These clichéd, stock images communicate absolutely nothing of value, interest or use. They are one of the worst forms of digital pollution because they take up space on the page,
There are all these sites out there that want to help you with your images. They do things like optimize your images and help you serve them performantly.
That's a very good thing. By any metric, images are a major slice of the resources on websites, and we're notoriously bad at optimizing them and doing all the things we could to lower the performance hit from them. So you use some service to help you deliver images better. Smart. Many of them will make managing and optimizing images a lot easier. But I don't consider them a no-brainer. There is a lot to think about, like making choices that don't paint you into a corner.
I recently found a solution to dynamically update the color of any product image. So with just one <img /> of a product, we can colorize it in different ways to show different color options. We don’t even need any …
Let’s take a look at a super lightweight way to create a horizontal masonry effect for a set of arbitrarily-sized photos. Throw any set of photos at it, and they will line up edge-to-edge with no gaps anywhere.
The solution …
