Contents tagged “image”

There are 62 contents with this tag:

  1. screenshot of Alt vs Figcaption

    Elaina Natario

    Alt vs Figcaption

    While both the alt attribute and the figcaption element provide a way to describe images, the way we write for them is different. alt descriptions should be functional; figcaption descriptions should be editorial or illustrative.

  2. screenshot of The Case for JPEG XL

    Jon Sneyers avatar Jon Sneyers

    The Case for JPEG XL

    Jon gives a good overview of everything JPEG XL improves over other image formats. This article can be seen by some as biaised, as Jon is part of the team that created the format, but I really think it honestly shows clear advantages, and I hope it will help people understand JPEG XL support in browsers would be great.

  3. When an <img loading="lazy"> is hidden (in a menu for example) but above the fold, when exactly is it downloaded? 🤔

    In all browsers?

    Is JS-based lazy loading after the load event better for above the fold CSS/JS optimization?

  4. How do you deal with images that need to have a fluid width but fixed height?

    I tend to start from the lowest width/height ratio and increase, knowing larger images will have hidden parts above and below… 😔

    Anything better?

  5. 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/

    True!

    But most images are currently not or badly optimized. 😔

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

  6. When you start using an image CDN on a site with oversized JPEGs, without any change to the HTML:

    SpeedCurve test showing a 20 seconds gain in Largest Contentful Paint

    Imagine when there will be accurate srcset/sizes attributes, better formats, etc. 🤯

  7. 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… 🎉

  8. I bet I can find 10 different ways people handle responsive images in Markdown, for example in #Eleventy projects… I'm part of the problem. 😅

    Shouldn't we try to first list requirements, and then maybe find a single solution for everyone, if possible?

  9. screenshot of Legacy and Transition: Creating a New Universal Image Codec

    Jon Sneyers avatar Jon Sneyers

    Legacy and Transition: Creating a New Universal Image Codec

    JPEG XL’s legacy-friendly feature is a game-changer for the transition problems described above. Besides saving both storage and bandwidth from the outset, you can also losslessly preserve legacy images while reaping more compression. In other words, JPEG XL offers only benefits from the start, whereas other approaches require sacrifices in storage to reduce bandwidth.

  10. screenshot of Text descriptions and emotion rich images

    Léonie Watson avatar Léonie Watson

    Text descriptions and emotion rich images

    A good alt text can conjure up wonderfully stimulating mental images. A friendly smile is the same in print, photo or wax crayon. Whether you listen to an image or see it, the emotional response is the key factor, so why should we recommend that these emotion rich images should be given a null alt text and hidden from screen reader users?

  11. 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.

  12. Mettez à jour votre Picturefill !

    Si vous êtes un peu à jour dans vos développements responsives, vous avez adopté le dernier standard pour les images —srcset, sizes et éventuellement picture— et bien entendu l'excellent polyfill Picturefill qui apporte cette révolution à tous les navigateurs qui n'en disposent pas encore nativement. Si vous n'utilisez pas encore la version 2.3.1, la dernière stable à cet instant, dépêchez-vous de faire la mise à jour !

  13. TinEye, un système bluffant de reconnaissance d'images sur Internet

    Idée Inc. vient de lancer TinEye, un nouveau service en ligne de recherche d'images sur Internet, et là où les moteurs de recherche d'images traditionnels se basaient sur le nom du fichier ou le contenu des pages intégrant les images, c'est une vraie recherche par le contenu de l'image qui est proposée. j'étais légèrement dubitatif lorsque j'en ai entendu parlé pour la première fois, mais j'ai eu accès à la beta privée, et c'est réellement bluffant !

See all tags.