Tagged “images”

1. An elegant technique to lazyload images in Swiper, and lazily create Swiper instances

   Say you have multiple carousels in a page, each one containing multiple images, and you want to download only the images that are inside the visible portion of the page, and maybe save some CPU time by lazily create the carousel instances. I think I’ve found a valuable and elegant technique to do so.

   Read more →
2. A clever way to serve WebP images to modern browsers and JPG to IE

   Before the day Safari started to support WebP images, we were forced to use the picture tag to serve WebP images to browsers supporting it. Today all modern browsers support WebP, so there's probably a clever way to do that using a single tag, img.

   Read more →
3. How to cap image fidelity to 2x and save 45% image weight on high-end mobile phones

   With the rise of very high density “super retina” displays in the newest high-end devices, capping image fidelity to 2x leads to a big improvement in terms of rendering speed, and no perceivable quality loss for your users. Here’s a new best practice on how to do that.

   Read more →
4. Lazy load responsive images in 2020

   Do you want to boost performance on your website? You can do that by using **responsive images and lazy loading! In this article, you will find the HTML, JavaScript, and CSS code to lazy load responsive images, to make browsers use modern image formats like WebP and Jpeg2000, and to enable native lazy load where supported.

   Read more →
5. Native lazy loading and js-based fallback with vanilla-lazyload 12

   On April 6th 2019, Addy Osmany wrote about native image lazy-loading. Two days later Yvain, a front-end developer from Paris, asked me if my vanilla-lazyload could be a loading attribute polyfill, inspiring me to develop and release version 12 of my script, which features a new use_native option to enable native lazy-loading where supported. You can already use it today.

   Read more →

See all tags.