Have you ever wondered why your website takes forever to load? It is probably because you are using too large images. The common image types are PN...
For further actions, you may consider blocking this person and/or reporting abuse
"However, as awesome as this is, webP is not supported on all browsers. Firefox for instance, is still working on adding it, but Chrome and Opera fully supports webP images." - Temitope Ayodele
I want to clarify that .webp is supported in firefox, as I am using it right now. And looking at caniuse.com/?search=webp you can see that it has support. Only Edge and some older Apple OS's haven got support.
Thanks for the addition. Older versions of Firefox browsers do not though.
Older versions of any browser don't support it, so...
Yh true, will edit. Thanks
Good practical advice - thanks :)
I found this report to be informative on current website stats (for those who aren't sure if image loading or javascript are the worst offenders!):
httparchive.org/reports/page-weight
This is absolutely good!!!
One small thing here is
For converting a few images it's okay for those who want to convert the entire repository images or some N no of images they can use this package.
npmjs.com/package/webp-bulk
Thanks
Nice input! Thanks
Thanks for the article. I might not immediately file JPG2000 or JPEG XR as modern formats - as the JPG2000 is just about 20yo, and it considered for replacement as we speak w/ HTJ2K or what is called High Throughput JPEG 2000. Not even sure what is happening w/ the XR. But the webp has finally achieved full support this year in 2020. If you do want to cover modern formats, I would certainly suggest looking into adding AVIF to your list. This is pretty much the buzz worthy format right now (caniuse.com/avif) and is supported by Chrome, Opera + behind a 🚩 in Firefox. There's a great tool I would also suggest playing with called Sqoosh! App (squoosh.app). Created by a team of Google engineers. Lastly, if much of this interests you, just released some videos specifically on this topic, you may enjoy. bit.ly/image_ready_videos
The component idea is a great one, and has a direct equivalent in ASPNET Core with tag helpers / Razor components. You could even combine it with the source set concept to deliver images at various sizes as well as formats, so browsers not WebP savvy still display the content. Thanks for sharing!
thank you for this article! i will include this in my future work 👍🏻
Quite thorough and practical. Cheers.
Nice. I especially love the idea of the component. Thanks for this! 👍
Extra care when using WebP on Apple devices. On a recent project, Safari on iOS didn't show WebP files, so we had to convert them into JPEG to be used on Safari on iOS.
webp was provided support in*Safari w/ Big Sur or iOS14. So, it would be wise to still use another fall back (which ever you need) for the next few.
Great article! Very practical and useful