Great post... something I was concidering myself. One additional thought, not to overcomplicate things is image format type.. most modern browsers finally support the webp image format.(apple finally catching up with the latest safari) I've switched most of my png files over to webp, but have fallback logic to use png if the browser doesn't support it. Real world I've seen about a 1/4 size difference between png and webp. Then there is svg which can be even smaller and render fantastic at any size, but it comes at a cost of render processing as it's nothing more then a math formula. Then there is always the default jpg, which works great for photos, but may not be your best choice for graphics or logos. It's interesting how much bandwidth can be saved when taking the format of the picture into consideration
I'm a web developer, graphic designer, type designer, musician, comicbook-geek, LEGO-collector, food lover … as well as husband and father, located just south of Copenhagen, Denmark.
Thank you! You're right: modern formats like webp (maybe not modern any more, it's been 10 years since it's initial release!) and avif can greatly reduce loading times. This article has some great image-optimizations outlined. For CMS-based systems, it's often easier to use CDN's like Akamai or Cloudflare. A content-editor uploads a full-size JPG, and these services will return the most optimized format (maybe webp), based on the browser-capabilities.
Professional web developer and hobbyist programmer from the Welsh Marches. I'm particularly interested in performance, accessibility, and reducing carbon emissions from software.
I've been trying to aid in the effort with adding avif files to the static site generator zola recently and something that has really struck me is how good jpegs are when they're encoded with mozjpeg.
Avif was always smaller in my testing, but took about 30x as long to encode. For websites with smaller numbers of visitors that might conceivably mean that it is actually worse for the environment? As the reduced filesize might not compensate for the longer encode time.
One thing we could definitely do with is getting better data on what processes release the most carbon etc.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Great post... something I was concidering myself. One additional thought, not to overcomplicate things is image format type.. most modern browsers finally support the webp image format.(apple finally catching up with the latest safari) I've switched most of my png files over to webp, but have fallback logic to use png if the browser doesn't support it. Real world I've seen about a 1/4 size difference between png and webp. Then there is svg which can be even smaller and render fantastic at any size, but it comes at a cost of render processing as it's nothing more then a math formula. Then there is always the default jpg, which works great for photos, but may not be your best choice for graphics or logos. It's interesting how much bandwidth can be saved when taking the format of the picture into consideration
Thank you! You're right: modern formats like webp (maybe not modern any more, it's been 10 years since it's initial release!) and avif can greatly reduce loading times. This article has some great image-optimizations outlined. For CMS-based systems, it's often easier to use CDN's like Akamai or Cloudflare. A content-editor uploads a full-size JPG, and these services will return the most optimized format (maybe webp), based on the browser-capabilities.
I've been trying to aid in the effort with adding avif files to the static site generator zola recently and something that has really struck me is how good jpegs are when they're encoded with mozjpeg.
Avif was always smaller in my testing, but took about 30x as long to encode. For websites with smaller numbers of visitors that might conceivably mean that it is actually worse for the environment? As the reduced filesize might not compensate for the longer encode time.
One thing we could definitely do with is getting better data on what processes release the most carbon etc.