Posts with tag images

JPG compression level, SSIM and

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.

Continue reading about JPG compression level, SSIM and

Drawing images using edge detection and SVG animation

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.

Continue reading about Drawing images using edge detection and SVG animation...

Using WebP to create tiny preview images

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.

WebP vs JPEG when encoding tiny images

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

Continue reading about Using WebP to create tiny preview images...

How Medium does progressive image loading

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.

A screenshot of a blurry placeholder while the image is loaded

Continue reading about How Medium does progressive image loading...

Image optimization: Lossy, lossless and other techniques

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.

Continue reading about Image optimization: Lossy, lossless and other techniques...

Optimizing images for web with Google Page Speed and jpegoptim

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.

Continue reading about Optimizing images for web with Google Page Speed and jpegoptim...