Andrea Verlicchi's Blog

Hello! I'm Andrea and I wrote...

Slides of my talk about responsive images at CSS Day 2017

e On March 17th 2017 I spoke about responsive images, an HTML 5.1 standard at the CSS Day 2017 Conference in Faenza, Italy. The speech was on web performance, since using responsive images is a way to serve lighter images to smaller screens (and viceversa) and images optimization. I also took a sneak peek on how to generate the right size for your images in the cloud using a software as a service.

Responsive images? You don't need the picture tag

Say you have a responsive website layout where images are sized at 100% of the container, but the container is not always as wide as the viewport. Do we need to use the picture tag, or the img tag is enough? The img tag can do it, using its sizes and srcset attributes. Here’s how.

Lazy load of responsive images with srcset and LazyLoad

It’s now possible (yes, today!) to have lazy loading on responsive images to make our images to adapt to users screens and keep our website fast. YAY! \o/ In this article, we’ll see what markup we need to write and which Javascript libraries we’re gonna need to do that.

Advanced sprite generation using Compass (SASS)

Spriting is a way to improve performance in your website by putting many images (or icons) in a single larger image, in order to make a single HTTP request instead of many. Here’s how you can do sprites using Compass.

A new LazyLoad to improve your website performance

In the latest days I’ve been working on websites performance optimization and I realized that there is no way to take advantage of the progressive JPEG image format on websites if you’re using jQuery_lazyload. So after sending a pull request to its author, I decided to write my own lazy load, which turned out to be better, because:


Page 1 of 3 No newer posts Older posts →