13 ms·

Even lower hanging fruit than optimising compression, is actually choosing the right image format in the first place. Put simply (very simply I may add), if it’

Even lower hanging fruit than optimising compression, is actually choosing the right image format in the first place. Put simply (very simply I may add), if it’s an illustration, use PNG, if it’s a photo, use JPEG. Once we’re over that hurdle, we can go onto managing compression techniques and attempting advanced formats such as SVG and WEBP. All too often I’ve seen people encoding 8MP photos as PNGs and wondering why they’re all 50MB in size. Next on the hit list is outputting images at the right size. If the image is never going to be shown greater than 500px wide, save a copy that’s 500px wide. WordPress has this feature built in- learn to use it if that’s your flavour of CMS. Your bounce rate will go down, I guarantee it.

eps 8y ago
> All too often I’ve seen people encoding 8MP photos as PNGs I’ve literally never seen anyone do that, leave alone this being done “often”.
- weavie 8y ago
  Don't know about 8MP.. but I have certainly been guilty of sticking photos up as PNG before, so it is good to be aware of the difference.
- iamphilrae 8y ago
  So your experience invalidates mine? I have endlessly seen website media folders throughout my 14 year career filled with PNG photographs uploaded by unknowing content editors through a CMS. This isn’t their fault, they’re writers and know no better. CMS tools should be set up by the developers to automatically convert to the right format. Cases on the flipside includes developers using JPEG for everything. 100KB highly artifacted illustrations used throughout web layouts, which would be infinitely better as clear 10KB PNGs.
  - myfonj 8y ago
    And are you sure they were all real PNGs? You know, displayed suffix means nearly nothing nowadays, you can serve JPEG image as ".png" file with "image/png" mime header and browser would not even raise its eyebrow and process the JPEG properly. I occasionally archive some imagery from web and while viewing them in Irfan I am frequently confronted with "This image is JPG with .png extension, would you like to rename it?" prompt, without what I'd probably had no idea how frequently this discrepancy occurs.
  - eps 8y ago
    You said > All too often I’ve seen people encoding 8MP photos as PNGs... And now apparently it's some CMS that was doing that... which doesn't make much sense either. Either way this is just such a patently and obviously dumb thing to do that it makes me doubt your experience is anywhere close to being statistically significant.
    - Cenk 8y ago
      No, they said people were uploading PNGs to a CMS, not that the CMS was doing it.
  - Tomte 8y ago
    No, it doesn't invalidate yours, but I'm with him. I've never seen that, either, and I cannot imagine how that could happen "often" (without doubting your experience). Because cameras and phones give you JPEGs. The common user doesn't shoot RAW. I cannot see any not-highly-technical user convert JPEGs to anything else.
  - tecleandor 8y ago
    True, I've seen a lot on some clients CMSs. Classic case would be the ones uploading an screenshot of an image done on their Mac, which by default (as many OSes, anyway) outputs a PNG.
- markdog12 8y ago
  I’ve seen it plenty of times
- ZeroGravitas 8y ago
  When I see this it's usually someone getting an image from a stock image site. They provide PNG because they don't know how it's going to be used by the end user and the end user doesn't know enough to understand that's a problem so you get a 4MB background image as a PNG that could be 98% smaller without any great effort.
bscphil 8y ago
This is not as surprising as it sounds to a web developer. For high quality photography purposes jpeg is bordering on useless, even more so if one isn't using Mozjpeg or guetzli to get images with reduced artifacts. Even for the most basic uses like sharing a photo with friends and family this can be a problem. For example I sent out an album of travel photos and a family member bought me a poster size print of one of them for Christmas ... using the 3200x2400 jpeg photo I had posted to Google Photos. So while if you're a web designer using stuff like big hero or background images jpeg makes sense, there are a lot of ways in which it simply doesn't cut it for most of us. Fortunately, and _I can't emphasize this enough_, we're now in a situation where the major browsers support Webp or can have fast decoding support easily added. Webp is based on the I-frame encoder of VP8, and for lossy encoding represents a several-generations improvement over Jpeg. And it's here today. Sure, we'll all be using Avif in a HEIF container one of these days, but that isn't relevant to people building systems today. Use WebP! For everything! Check out some comparisons between WebP and MozJPEG here: https://xooyoozoo.github.io/yolo-octo-bugfixes/#buenos-aires&jpg=s&webp=s https://xooyoozoo.github.io/yolo-octo-bugfixes/#buenos-aires... I now upload WebP and HEIC images to Google Photos, where they are both supported.
- dageshi 8y ago
  I don't think Safari supports webp, on either desktop or iphone? Until it does people will probably still be shipping jpg/png as standard.
- extra88 8y ago
  IE and Safari do not support WebP, Edge didn't until Windows 10 1809 (November), Firefox didn't until 65 (January) and Firefox ESR and for Android still don't. https://caniuse.com/#feat=webp https://caniuse.com/#feat=webp
  - bscphil 8y ago
    Firefox for Android does, that's outdated (see the version number). There's a fast wasm version for Safari: https://github.com/webmproject/libwebp-demo/tree/gh-pages/webp_wasm https://github.com/webmproject/libwebp-demo/tree/gh-pages/we... In addition, all modern browsers support the <picture> element, which allows them to automatically download image the best meets their needs.

eps 8y ago

> All too often I’ve seen people encoding 8MP photos as PNGs I’ve literally never seen anyone do that, leave alone this being done “often”.

weavie 8y ago
Don't know about 8MP.. but I have certainly been guilty of sticking photos up as PNG before, so it is good to be aware of the difference.
iamphilrae 8y ago
So your experience invalidates mine? I have endlessly seen website media folders throughout my 14 year career filled with PNG photographs uploaded by unknowing content editors through a CMS. This isn’t their fault, they’re writers and know no better. CMS tools should be set up by the developers to automatically convert to the right format. Cases on the flipside includes developers using JPEG for everything. 100KB highly artifacted illustrations used throughout web layouts, which would be infinitely better as clear 10KB PNGs.
- myfonj 8y ago
  And are you sure they were all real PNGs? You know, displayed suffix means nearly nothing nowadays, you can serve JPEG image as ".png" file with "image/png" mime header and browser would not even raise its eyebrow and process the JPEG properly. I occasionally archive some imagery from web and while viewing them in Irfan I am frequently confronted with "This image is JPG with .png extension, would you like to rename it?" prompt, without what I'd probably had no idea how frequently this discrepancy occurs.
- eps 8y ago
  You said > All too often I’ve seen people encoding 8MP photos as PNGs... And now apparently it's some CMS that was doing that... which doesn't make much sense either. Either way this is just such a patently and obviously dumb thing to do that it makes me doubt your experience is anywhere close to being statistically significant.
  - Cenk 8y ago
    No, they said people were uploading PNGs to a CMS, not that the CMS was doing it.
- Tomte 8y ago
  No, it doesn't invalidate yours, but I'm with him. I've never seen that, either, and I cannot imagine how that could happen "often" (without doubting your experience). Because cameras and phones give you JPEGs. The common user doesn't shoot RAW. I cannot see any not-highly-technical user convert JPEGs to anything else.
- tecleandor 8y ago
  True, I've seen a lot on some clients CMSs. Classic case would be the ones uploading an screenshot of an image done on their Mac, which by default (as many OSes, anyway) outputs a PNG.
markdog12 8y ago
I’ve seen it plenty of times
ZeroGravitas 8y ago
When I see this it's usually someone getting an image from a stock image site. They provide PNG because they don't know how it's going to be used by the end user and the end user doesn't know enough to understand that's a problem so you get a 4MB background image as a PNG that could be 98% smaller without any great effort.

bscphil 8y ago

This is not as surprising as it sounds to a web developer. For high quality photography purposes jpeg is bordering on useless, even more so if one isn't using Mozjpeg or guetzli to get images with reduced artifacts. Even for the most basic uses like sharing a photo with friends and family this can be a problem. For example I sent out an album of travel photos and a family member bought me a poster size print of one of them for Christmas ... using the 3200x2400 jpeg photo I had posted to Google Photos. So while if you're a web designer using stuff like big hero or background images jpeg makes sense, there are a lot of ways in which it simply doesn't cut it for most of us. Fortunately, and _I can't emphasize this enough_, we're now in a situation where the major browsers support Webp or can have fast decoding support easily added. Webp is based on the I-frame encoder of VP8, and for lossy encoding represents a several-generations improvement over Jpeg. And it's here today. Sure, we'll all be using Avif in a HEIF container one of these days, but that isn't relevant to people building systems today. Use WebP! For everything! Check out some comparisons between WebP and MozJPEG here: https://xooyoozoo.github.io/yolo-octo-bugfixes/#buenos-aires&jpg=s&webp=s https://xooyoozoo.github.io/yolo-octo-bugfixes/#buenos-aires... I now upload WebP and HEIC images to Google Photos, where they are both supported.

dageshi 8y ago
I don't think Safari supports webp, on either desktop or iphone? Until it does people will probably still be shipping jpg/png as standard.
extra88 8y ago
IE and Safari do not support WebP, Edge didn't until Windows 10 1809 (November), Firefox didn't until 65 (January) and Firefox ESR and for Android still don't. https://caniuse.com/#feat=webp https://caniuse.com/#feat=webp
- bscphil 8y ago
  Firefox for Android does, that's outdated (see the version number). There's a fast wasm version for Safari: https://github.com/webmproject/libwebp-demo/tree/gh-pages/webp_wasm https://github.com/webmproject/libwebp-demo/tree/gh-pages/we... In addition, all modern browsers support the <picture> element, which allows them to automatically download image the best meets their needs.