There are 70 contents with this tag:
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>?
Limiting the image density on mobile devices drasticaly improves performance, with no visual loss, so we did it!
I still wish it was much easier than dealing with <picture> and x descriptors for fluid images… 😞
With a <img maxdensity="2.5" …> attribute for example!
If you agree, comment:
https://github.com/whatwg/html/issues/4421
Largest Contentul Paint change in Chrome 112 to ignore low-entropy images
This may result in LCP times increasing, if a low-content background was being painted very early, or if a low-content placeholder was being used…
On Container Queries, Responsive Images, and JPEG-XL
It is natural to think that the problem with images in container queries is a mere oversight. We used to only have media queries to design with. Now…
Seriously, do we need yet another version of Low Quality Image Placeholders?
Why do some people want to do additional work just to show useless colourful pixels to users, delaying the rendering of the actual image?
As a user, I hate LQIP. Single colour backgrounds are fine, though.
According to the results presented above, we can conclude that JXL is the superior format for both lossy and lossless operations. That is clear by…
Rob O'Leary
The next generation image format for the web is not JPEG XL?
Perhaps, the jig is not up for JPEG XL and HEIC. WebP was in Chrome for 5 years before the others decided to follow suit. The format war is a war…
TIL AVIF transformation is only available on #Cloudflare for images below 2 megapixels… 😭
https://community.cloudflare.com/t/avif-size-limit/273724/5
We need JPEG XL! 🙏
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…
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…
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…
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,…
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…
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 ! 😱 Après différents tests dans Chrome 99.0.4844.51 et Firefox 98.0, je constate que j'arrive à avoir le même…
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…
Jason Grigsby
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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, et en allant sur Gastero Prod, j'ai découvert avec horreur…
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}