Posts with tag ux

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.