DEV Community

loading...

Discussion on: Making Sustainable Websites

Collapse
liukonen profile image
Luke Liukonen

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

Collapse
madsstoumann profile image
Mads Stoumann Author

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.

Collapse
bezpowell profile image
BezPowell

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.

Forem Open with the Forem app