nucliweb · @nucliweb
135 followers · 327 posts · Server webperf.socialHow to Optimize & Dynamically Resize Images in Astro with @cloudinary
https://spacejelly.dev/posts/how-to-optimize-dynamically-resize-images-in-astro-with-cloudinary/ by @colbyfayock
#Image #ImagePerf #astro #Performance
nucliweb · @nucliweb
135 followers · 324 posts · Server webperf.social
I've said it before... do you know ImageOptim?
An app, available for Mac that allows us to squeeze images in a not-very-fast* but very effective way
* The algorithm uses several codecs to get the best optimization & max quality (Best tool column)
#ImagePerf #Image #wpo #Performance
Joan Leon · @nucliweb
136 followers · 314 posts · Server webperf.socialRunning JPEG-XL tools on shared Dreamhost
https://www.phpied.com/running-jpeg-xl-tools-on-shared-dreamhost/ by @stoyan
#webperf #ImagePerf #jpegxl #jxl
Joan Leon · @nucliweb
123 followers · 260 posts · Server webperf.socialDeploying AVIF for more responsive websites
#Image #ImagePerf #avif #webperf #Performance
Joan Leon · @nucliweb
116 followers · 245 posts · Server webperf.socialWhat does the image decoding attribute actually do?
https://www.tunetheweb.com/blog/what-does-the-image-decoding-attribute-actually-do/ by @tunetheweb
#webperf #productperf #ImagePerf
Joan Leon · @nucliweb
116 followers · 243 posts · Server webperf.social
New Recommendations for Ecommerce Images
https://cloudfour.com/thinks/new-recommendations-for-ecommerce-images/
#webperf #Performance #ImagePerf #Image
Joan Leon · @nucliweb
112 followers · 233 posts · Server webperf.social
Check the image format supported by your browser
https://lab.nucliweb.net/image-format-test/
Images
🏞️ JPEG = 61 kB
🌁 WebP = 53 kB
🌄 AVIF = 51 kB
🌃 JPEG-XL = 49 kB
Browsers
🏞️ Chrome v114 = AVIF
🌁 Firefox v114 = AVIF
🌄 Safari v16.5 = AVIF
🌃 Thorium v106 = JPEG-XL
Joan Leon · @nucliweb
112 followers · 232 posts · Server webperf.social
Waiting for Safari 17 to test the PostCSS plugin to use JXL in the CSS background
#jpegxl #jxl #postcss #css #ImagePerf #productperf #webperf
Joan Leon · @nucliweb
108 followers · 205 posts · Server webperf.social
The modern way of serving images
https://kurtextrem.de/posts/modern-way-of-img by @kurtextrem
Joan Leon · @nucliweb
103 followers · 176 posts · Server webperf.social
Joan Leon · @nucliweb
103 followers · 163 posts · Server webperf.social
Use media to define a media query to load a responsive image
The browser loads the `image.jpg` in the mobiles version, the `image-wide.jpg` in tablets resolutions or bigger, and the `image-ultrawide.jpg` will be loaded in screen resolutions bigger than 1200px
Joan Leon · @nucliweb
100 followers · 139 posts · Server webperf.socialWhat's the carbon footprint of the images on your website?
Joan Leon · @nucliweb
98 followers · 118 posts · Server webperf.social
I'm excited to announce that I'm officially a Cloudinary ambassador 😊
#cloudinaryambassadors #Image #ImagePerf #MDE #webperf
Joan Leon · @nucliweb
94 followers · 114 posts · Server webperf.social
🤩 type("image/avif") with Chrome 113
I can’t wait to test it and write a post to share it ☺️
#css #webperf #Image #ImagePerf
Joan Leon · @nucliweb
92 followers · 95 posts · Server webperf.social
I have a superpower... finding sites with huge images 🙈
❌ Almost 80 MB in images
❌ An image larger than 19 MB
❌ With a Cache-Control=0
#webperf #Performance #ImagePerf #images
Joan Leon · @nucliweb
80 followers · 69 posts · Server webperf.social
This is the repo that I used in the Image Optimization Workshop at T3chFest Conference today
#WebPerf #ImagePerf #Image #Performance #T3chfest #T3chfest2023
#webperf #ImagePerf #Image #Performance #t3chfest #t3chfest2023
Joan Leon · @nucliweb
76 followers · 65 posts · Server webperf.social
I'm working on the content for an Image Optimization Workshop to improve the UX... I can't wait to share the feedback to improve this site 🙈
1️⃣ 0 images in the viewport
2️⃣ 88 images loaded
3️⃣ All images in PNG format
4️⃣ 29.6 MB
#webperf #Performance #ImagePerf #Image
Joan Leon · @nucliweb
74 followers · 62 posts · Server webperf.social
Web Performance Tip: add the attribute loading="lazy" to all images below the fold to delegate the lazy load function to the browser.
In this case, I added it to all images for mobile devices to avoid download more than 15MB 🙈
Joan Leon · @nucliweb
74 followers · 62 posts · Server webperf.socialWeb Performance Tip: add the attribute loading="lazy" to all images below the fold to delegate the lazy load function to the browser.
In this case, I added it to all images for mobile devices to avoid download more than 15MB 🙈
Joan Leon · @nucliweb
65 followers · 58 posts · Server webperf.socialFirefox joins Chrome and drops support for the new JPEG-XL image format
https://github.com/mozilla/standards-positions/issues/522#issuecomment-1409539985
#jxl #jpegxl #ImagePerf #Image