Posts with tag images

The size of images in JPG varies a lot based on the compression level we choose when saving them. Often, we tweak this level by hand until we consider we don’t have too many artifacts and the resulting image is close enough to the original one.

The same compression level doesn’t generate the same amount of artifacts in two different images. We need to find an automated approach that measures how different (or similar) two images are, and loop through several compression levels to find the most suitable one.

tl;dr: Don’t load images that the user doesn’t see on screen. It is easier than you think.

Back in the days SVG was barely used and supported. Some time after we started using them as an alternative to classic bitmaps for some icons, and finally we discovered it was the holy grail for providing responsive graphics. The flat and clean design trends have also make SVG as a very useful image format.

But SVG allows for even cooler features, thanks to the ability of modifying it using CSS and JS. And with some clever techniques we can make fun things, like drawing the borders of an image.

Following with the image optimization topic, I am going to have a deeper look to Facebook’s technique to create preview photos, and will show how WebP can simplify their solution.

tl;dr WebP produces tiny files when compressing small images. This makes it ideal for implementing preview photos. Check the demo.

Recently, I was browsing a post on Medium and I spotted a nice image loading effect. First, load a small blurry image, and then transition to the large image. I found it pretty neat and wanted to dissect how it was done.

During last days I have come across interesting articles about images optimization. Images are currently the largest average payload in web sites, meaning a 62% of all the bytes. With the increasingly importance of responsive design, responsive images are becoming a challenge to face.

I have already talked about image optimization in my list of optimization techniques and my short post about using jpegoptim. But recently I have read about highly compressed JPG to target high-res screens and progressive JPG images, and I thought it would worth sharing.

Image optimization is a big topic these days. The main culprit in site traffic are images, and their transfer size is increasing over time.

You may have wondered how to optimize your images. First, check if there is room for improvement. For that I will be using Google Page Speed, which offers several tools for analyzing your site. One of them is a handy online analyzer. Type there the name of your site and click to analyze it.