Morning All,
I'm doing some testing on the load speed of my website, and my index page is very image heavy. It has been suggested I use next-gen image formats to speed up the loading. AVIF and WebP are the 2 that have been suggested, however I have never heard of them.
Has anyone here heard of them? Does anyone already use them? Do they make a big enough difference?
Next-gen image formats
-
14Steve14
- Senior Contributor
- Posts: 923
- Joined: Fri Oct 25, 2019 7:01 pm
- Phoenix Version: v1.0.9.1
- Has thanked: 17 times
- Been thanked: 103 times
Re: Next-gen image formats
webp images are widely used now. I think they are just a more compressed image format that makes the image file size smaller so they load faster without losing the quality
I have not tried using them and am not sure whether they can be used with Phoenix without the addition of a an add, if that is even available yet.
We thought about changing, but we have so many images to change that we left it for now and decided to look into this later when we next update the site to a newer code base like 1.9.
I have not tried using them and am not sure whether they can be used with Phoenix without the addition of a an add, if that is even available yet.
We thought about changing, but we have so many images to change that we left it for now and decided to look into this later when we next update the site to a newer code base like 1.9.
-
ecartz
- Core Team
- Posts: 3084
- Joined: Tue Nov 05, 2019 6:02 pm
- Phoenix Version:
- Has thanked: 4 times
- Been thanked: 208 times
Re: Next-gen image formats
WebP is Google's replacement for PNG. It comes in both lossy (like JPEG) and lossless (like GIF/PNG) formats. It is now supported by all major browsers, although Safari support is recent. Note that IE is no longer considered a major browser, although Edge is. Its lossy format is about 30% better than JPEG (for the same quality rating) and lossless is about 30% better than PNG (which is itself better than GIF).
AVIF is from the Alliance for Open Media (which includes Netflix, Amazon, and Google), also supporting lossy and lossless. It has lousy browser support, just Chrome and Firefox. Netflix claims that it produces superior images to JPEG at the same compression quality. While this may be correct, AVIF's lack of Safari, Edge, and mobile support make it not ready for most web applications. Maybe in five or ten years.
It may be reasonable to replace JPEGs and PNGs with WebP images. This will produce an incremental improvement. Note that for JPEGs, you have to go back to the original source image. If your camera produces JPEGs natively, you may not be able to achieve the full advantages of WebP. Because converting from JPEG to WebP will lose quality from the JPEG. That's the nature of lossy formats. They can't add quality. They only take it away.
For a certain kind of image (i.e. not a photo), an SVG can be even more efficient. But you can't really convert to SVG. You typically make them from scratch. Great for logos and things like that.
More generally, you might consider just using lower resolution images. Because images are often more detailed than they need to be for the application. WebP (and AVIF, when ready) attempt to produce smaller images with fewer compression artifacts. This makes them look better at smaller resolutions. A lossy format is often better at this than downsampling a lossless format. So if you are currently using a high resolution lossless image (e.g. PNG or GIF), you may find that a JPEG or lossy WebP version may still be more visually appealing at a smaller size.
Rainer's KISS IT produces thumbnail images that are the same resolution as the viewport. If you have large resolution images, these thumbnails will be considerably smaller regardless of format. If you choose lossy WebP as the thumbnail format (or even JPEG), this can produce a high quality but smaller image that will load quickly on the index page. Meanwhile, you still have the full resolution (possibly lossless) version for the image pop-up. I think that Preston has an add-on for zooming those.
As best I can tell Phoenix has always supported WebP for product images, because Phoenix does not limit product image format. Burt allowed it for store logos when he Bootstrapped that page. But I would recommend using Rainer's KISS IT rather than WebP alone. Because thumbnailing provides more of a benefit than converting to WebP. If using KISS IT, it makes sense to use WebP for thumbnails.
It's a bit misleading to talk about "more compressed". Lossless compression formats produce, on average, images that are as large or larger than the original. It's just that for most images that we actually want to display, they end up smaller. They aren't guaranteed to make things smaller (on average, they're guaranteed not). It's often better to think not about compression but about encoding. Lossless encodings can restore the original encoding. Lossy can not. For the images about which we care, either type of encoding can produce smaller but still understandable and attractive images. So we refer to them as compression encodings, even though what they really are is alternate encodings.
Additional reading (not Phoenix specific): https://wpmudev.com/blog/best-image-for ... -gif-webp/
AVIF is from the Alliance for Open Media (which includes Netflix, Amazon, and Google), also supporting lossy and lossless. It has lousy browser support, just Chrome and Firefox. Netflix claims that it produces superior images to JPEG at the same compression quality. While this may be correct, AVIF's lack of Safari, Edge, and mobile support make it not ready for most web applications. Maybe in five or ten years.
It may be reasonable to replace JPEGs and PNGs with WebP images. This will produce an incremental improvement. Note that for JPEGs, you have to go back to the original source image. If your camera produces JPEGs natively, you may not be able to achieve the full advantages of WebP. Because converting from JPEG to WebP will lose quality from the JPEG. That's the nature of lossy formats. They can't add quality. They only take it away.
For a certain kind of image (i.e. not a photo), an SVG can be even more efficient. But you can't really convert to SVG. You typically make them from scratch. Great for logos and things like that.
More generally, you might consider just using lower resolution images. Because images are often more detailed than they need to be for the application. WebP (and AVIF, when ready) attempt to produce smaller images with fewer compression artifacts. This makes them look better at smaller resolutions. A lossy format is often better at this than downsampling a lossless format. So if you are currently using a high resolution lossless image (e.g. PNG or GIF), you may find that a JPEG or lossy WebP version may still be more visually appealing at a smaller size.
Rainer's KISS IT produces thumbnail images that are the same resolution as the viewport. If you have large resolution images, these thumbnails will be considerably smaller regardless of format. If you choose lossy WebP as the thumbnail format (or even JPEG), this can produce a high quality but smaller image that will load quickly on the index page. Meanwhile, you still have the full resolution (possibly lossless) version for the image pop-up. I think that Preston has an add-on for zooming those.
As best I can tell Phoenix has always supported WebP for product images, because Phoenix does not limit product image format. Burt allowed it for store logos when he Bootstrapped that page. But I would recommend using Rainer's KISS IT rather than WebP alone. Because thumbnailing provides more of a benefit than converting to WebP. If using KISS IT, it makes sense to use WebP for thumbnails.
It's a bit misleading to talk about "more compressed". Lossless compression formats produce, on average, images that are as large or larger than the original. It's just that for most images that we actually want to display, they end up smaller. They aren't guaranteed to make things smaller (on average, they're guaranteed not). It's often better to think not about compression but about encoding. Lossless encodings can restore the original encoding. Lossy can not. For the images about which we care, either type of encoding can produce smaller but still understandable and attractive images. So we refer to them as compression encodings, even though what they really are is alternate encodings.
Additional reading (not Phoenix specific): https://wpmudev.com/blog/best-image-for ... -gif-webp/
-
raiwa
- Certified Developer
- Posts: 1640
- Joined: Sat Dec 21, 2019 8:08 am
- Phoenix Version: 1.1.0.6
- : Buy Me A Beverage
- Has thanked: 70 times
- Been thanked: 152 times
Re: Next-gen image formats
KissIt Image free version supports original images in WepP format and converts them to WepP thumbnails,
KissIt Image Pro allows to convert original images from all other usual Image formats (png, gif, jpeg) on the fly to WebP thumbnails.
KissIt Image Pro allows to convert original images from all other usual Image formats (png, gif, jpeg) on the fly to WebP thumbnails.
Public Phoenix Change Log Cheat Set on Google Sheets
https://docs.google.com/spreadsheets/d/ ... sp=sharing
Need Help?viewtopic.php?f=10&t=27
https://docs.google.com/spreadsheets/d/ ... sp=sharing
Need Help?viewtopic.php?f=10&t=27
-
LeeFoster
- Contributor
- Posts: 263
- Joined: Sun Feb 28, 2021 9:41 pm
- Phoenix Version: v1.0.8.20
- Has thanked: 1 time
- Been thanked: 5 times
-
ecartz
- Core Team
- Posts: 3084
- Joined: Tue Nov 05, 2019 6:02 pm
- Phoenix Version:
- Has thanked: 4 times
- Been thanked: 208 times
Re: Next-gen image formats
I think it thumbnails every image that is displayed in a viewport with a different size than the image. So if you have a 2000x2000 image showing in a 150x200 space, it makes a thumbnail. I think.
I know that it's important to KISS IT that the size be specified for images that it is expected to thumbnail.