Contents tagged “image”

There are 85 contents with this tag:

  4. Note from 4 April 2024

    Most mentions of the magical CSS object-fit: cover; in development tutorials should be accompanied by a warning: in most situations, it means the browser will download an image that is larger than required (at least in one direction), and optimization on the server side could be a better option.

  10. Note from 3 November 2023

    Let's say a SPA first load has been optimized with SSR and the LCP image is loaded pretty fast because it's in the HTML.

    But the JavaScript then builds a carousel in the DOM, which initially shows the very same image.

    I guess there's a second render of the image. How can I check this easily?

    Would it make sense that the LCP takes the late second render of the image, instead of the fast first one?

  16. Note from 24 May 2023

    Do you know good tutorials and/or examples about dealing with responsive images that are fluid horizontaly, but with a fixed height?

    Using object-fit: cover; in the CSS is easy, but how can we prevent loading many pixels that will be hidden, without using too many <source> in a <picture>?

  25. Note from 23 January 2023

    Large photos in photo pages of my photography site are now progressive JPEGs so that you can see them earlier, even if they weight more than with AVIF or WebP:

    Screenshot of a page with a photo partially loaded

    Thanks to Cloudinary and my responsive images plugin for Eleventy, it took me 10 seconds! 😍

    I wish Google didn't kill JPEG XL… 😭

    I also wish Largest Contenful Paint didn't wait for the full progressive image to be downloaded and rendered.

  35. Note from 29 September 2022

    Avatar for csswizardry
    Harry Roberts @csswizardry

    I accidentally moved my hero image onto Cloudinary (who I also adore!). But, a less-optimised image served from the same origin is always faster than a more-optimised image from a third party. Self-host your static assets! csswizardry.com/2019/05/self-host-your-static-assets/

    55 06:06 PM · Sep 29, 2022

    True!

    But most images are currently not or badly optimized. 😔

    They would benefit a lot from an image CDN: resize, compression, modern formats, etc.

  54. Note from 8 October 2021

    Once your image CDN is (correctly) set up, support for any new lighter/faster image format is like infinite ROI: "much lighter images" divided by "zero additional cost". 🥰

    It could even cost you less, if you pay based on bandwidth… 🎉

  73. Note from 27 March 2020

    images-responsiver is a simple solution for most responsive images needs

    Is it catchy enough? 😁

    Here's my latest pet project, trying to help people struggling with responsive images: https://nhoizey.github.io/images-responsiver/

    If you use #Eleventy, there's also a plugin: https://github.com/nhoizey/eleventy-plugin-images-responsiver

    Documentation is still a little rough around the edges, but should be enough at least for people already knowing npm and JS.

See all tags.