There are 62 contents with this tag:
Ok, so Mozilla won't help JPEG XL…
Overall, we don't see JPEG-XL performing enough better than its closest competitors (like AVIF) to justify addition on that basis alone. — https://github.com/mozilla/standards-positions/issues/522#issuecomment-1409539985
😭
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:
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.
⚠️ Be carefull if you use SVGO or SVGOMG to optimize #SVG images using <symbol>s.
There's a bug that might remove them when it shouldn't:
https://github.com/svg/svgo/issues/1726
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.
Responsive images on Shopify with Liquid
We launched the image_tag and image_url filters to help with generating responsive images. Before we dive in, what do these filters do? What are the differences between them?
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.
There is not enough interest from the entire ecosystem to continue experimenting with JPEG XL — https://bugs.chromium.org/p/chromium/issues/detail?id=1178058#c84
I can't believe this, #Chrome is really removing the support for JPEG XL we've been waiting for years! 😡
This is what happens when you preload the heavy high definition pristine image instead of the responsive version… 😅
Thanks #SpeedCurve for noticing it! 🙏
we hope that our observations and support will help bring JPEG XL support to the web for all chrome users
— @colinbendell from Shopify
https://bugs.chromium.org/p/chromium/issues/detail?id=1178058#c79
YES, please! 🙏
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?
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?
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.
Media chapter of the 2022 Web Almanac by HTTP Archive
I had the honor to review the Media chapter of the 2022 edition of The Web Almanac by HTTP Archive, "a comprehensive report on the state of the web, backed by real data and trusted web experts".
Avoiding <img> layout shifts: aspect-ratio vs width & height attributes
Layout shifts are a real annoyance on most sites, so please, read this new gem from Jake, about preventing images layouut shifts the right way… or the right ways actually.
Be careful if you use Chrome's device emulation to test responsive images, there's a bug on DPR emulation!
Star the issue!
I don't understand why some images refuse to load on my photography site, but only in Safari on macOS… 😔
16.9 % of the requests made for images on my web sites are served as AVIF by #Cloudinary:
But it only represents 9.8 % of the bandwidth! 😍
Still looking forward to seeing JPEG XL there… 😁
When you start using an image CDN on a site with oversized JPEGs, without any change to the HTML:
Imagine when there will be accurate srcset/sizes attributes, better formats, etc. 🤯
Bon sang, Karl ne voit pas mes images ! 😱
Would you like to be able to set different values for the importance priority hint depending on Media Queries, for example when images are above or below the fold depending on viewport width?
It looks like when I preload an image on #Cloudinary, the automatic best format selection (f_auto) doesn't work! 😱
These two requests have the exact same URL:
Support for JPEG XL in Firefox just got a much better priority!
P5 → P3 🤩
https://bugzilla.mozilla.org/show_bug.cgi?id=1539075#a88948208_505306
Year 2022: the year of Container Queries
Also 2022: most people still don't understand srcset-w/sizes
How will they mix? They currently can't, as @SaraSoueidan explained: https://www.sarasoueidan.com/blog/component-level-art-direction-with-container-queries-and-picture/
Any other resource on the topic?
The #Mapbox sprite on my photo site weights 222 kB:
https://nicolas-hoizey.photo/ui/thumbnails/[email protected]
I would like to serve it with #Cloudinary to enhance performance, as this PNG sprite will fast get heavier with new photos.
If you agree, please vote! https://github.com/mapbox/mapbox-gl-js/issues/11379
Let's hope #Firefox will get JPEG XL support, if at least Facebook, Adobe and now #Flickr ask for it!
https://bugzilla.mozilla.org/show_bug.cgi?id=1539075#c23
Thank you for weighing in @DonMacAskill! 🤩
Looks like @archdigestindia could improve #WebPerf for their readers and reduce bandwidth invoices…
Jon Sneyers
HTTP Archive
Jake Archibald
564.5px widesizes says the image is full width414 % bigger
Two weeks ago, I used Google BigQuery with HTTP Archive data to find the heaviest images in French government home pages.
Today, I received a bill I didn't anticipate… 😅
I'm happy to announce that @mavaddat will now help maintain and improve jekyll-cloudinary, my plugin to use #Cloudinary for responsive images in sites built with #Jekyll: https://nhoizey.github.io/jekyll-cloudinary/
Without any visual change, a simple config change in my #Eleventy plugin images-responsiver improved srcset and sizes attributes of images on my photography site and have reduced the homepage weight by half! 🏎
JPEG XL competes with AVIF which has similar compression quality but fewer features overall
This is on #CanIUse page for JPEG-XL: https://caniuse.com/jpegxl
I'm not sure @jonsneyers would approve… 😅
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… 🎉
To make a fair comparison you really have to pay meticulous attention to encoder settings, normalizing quality, and ensuring that compared images are in fact comparable.
eleventy-plugin-images-responsiver, my #Eleventy plugin for responsive images, is now available in a much faster v1.9.0! 🏎
My own site build is for example 30 % faster. 😍
This migration from basicHTML to LinkeDOM in images-responsiver looks good! 😍
I have yet to find if this behavior with HTML entities is an issue.
Add punctuation to your alt text
To add a description to an image, author a string inside of an alt attribute declared on an img element. Assistive technology will recognize the presence of the alt attribute and read the string as it moves through the page or view.
79.4 % of the requests made for images on my web sites are served as WebP by #Cloudinary:
But it only represents 56.8 % of the bandwidth!
Looking forward to seeing AVIF and JPEG XL in there… 😁
Someone asked on @StackOverflow how to show an image gallery in @github
I tried something:
https://stackoverflow.com/q/66989447/717195
Any better way to do it?
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?
Rebuilding my site - Part 1: Eleventy
Carol shares the process to build her new site with Eleventy, with a section about image optimisation, a topic I'm very interested in, as you should already know. 😅
Eleventy: Building an Image Gallery with CSS Grid and PhotoSwipe
Mark is using my Images Responsiver plugin for Eleventy with Netlify Large Media and PhotoSwipe to build an image gallery, and it's really great!
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.
Now waiting for #Cloudinary to automagically enhance my sites with AVIF for all supported browsers… 😍
Oh wow. @firefox joins Chromium and adds AVIF support. That's going fast. 🐎
🔗 caniusecaniuse.com/?search=avifAZ
🔗 avif explainejakearchibald.com/2020/avif-has-landed/OGjw
I mixed this awesome #Netlify proxy for #Cloudinary trick from @philhawksworth and @tkadlec with #Eleventy and my responsive images plugin, and the result is great! 😍
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?
Each step of eleventy-plugin-images-responsiver tutorial is both a README and a small Eleventy site with the plugin and progressively improving configuration and usage… 😎
I'm quite happy with this nice and simple collection of complementary tools that help me maintain my pet projects on #GitHub:
https://nhoizey.github.io/images-responsiver/#tools-and-automations
Should I use a monorepo for images-responsiver and eleventy-plugin-images-responsiver, the #Eleventy plugin? 🤔
Might be better to manage dependencies and sync releases, and easier for users to find/add issues.
Wondering why my #Workbox based Service Workers breaks images on https://nicolas-hoizey-com.netlify.app/notes/ but not https://nicolas-hoizey.com/notes/
It's exactly the same code. 🤷♂️
How JPEG XL Compares to Other Image Codecs
With many competing image formats available, it's not always easy to know which one(s) we have to use to provide both the best performance and visual quality to Web users.
images-responsiveris 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.
great news: there are two on-the-horizion web platform features that are trying to make no-jank, fixed-aspect-ratio, fluid-width images a natural part of the web platform.
Optimiser la performance des images responsives
J'ai eu l'honneur de présenter une petite conférence lors du meetup WebPerf de mars 2018, sur un sujet qui me passionne, puisqu'il combine deux de mes marottes en Web front : la WebPerf et les images en Responsive Web Design. Je vous invite à découvrir mes slides et la vidéo.
Cloudinary fait la promotion de mon plugin Jekyll
Je vous en avais parlé lors de ma migration vers Jekyll 3, je me suis lancé dans le développement d'un plugin Jekyll pour utiliser le service Cloudinary pour mes images responsives.
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 !
Textorizer met les mots en images et inversement
Je vous avais parlé il y a quelque temps de Wordle qui permet de faire de jolis nuages de tags, et voilà qu'aujourd'hui je découvre Textorizer, qui permet lui aussi de mettre en forme des mots, mais de façon plus belle encore, puisqu'en représentant une image.
Vous vous souvenez peut-être que je vous ai parlé de TinEye, un système bluffant de reconnaissance d’images sur Internet, il y a quelque temps. Et bien le service a largement complété sa base d'images indexée, annonçant 701 millions d'images contre 487 millions il y a deux mois. La preuve en images.
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 !
3G m'a tuer, ou comment j'en suis venu à accuser Safari par erreur
Utilisateur habituellement de Mozilla Firefox, j'ai lancé Safari pour tester GreaseKit[1], et en allant sur Gastero Prod, j'ai découvert avec horreur que le fond dégradé est complètement dénaturé, avec un rendu beaucoup moins fin que sur Firefox.
See all tags.
Kornel
Eric Bailey
Carolina Gilabert
Mark Llobrera
Léonie Watson
Eric Portis
![https://nicolas-hoizey.photo/ui/thumbnails/[email protected]](https://nicolas-hoizey.photo/ui/thumbnails/sprite@2x.png){kind=link}