Improved image optimisation on Netlify / Netlify Large Media

We’re super excited to let you all know that we have implemented Brotli support! We know that many of you have been waiting for this for some time, here it is.

3 Likes

Another suggestion for the snippet injection: Snippet injection Improvement

Cloudflare supports it that way. it is great because you don’t need to worry about the browser not supporting webp. I’d love to see it on netlify. Especially because it has the potential to boost your Google speed index for pages with many images.

1 Like

Now there’s even .avif, which is supposed to be superior to .webp (Chrome Platform Status).

Would be awesome if this could be used for modern browsers without worrying about breaking older ones.

1 Like

I would also love to see webp image support please!

2 Likes

+1 for webp.

Given that browser support for webp is quite broad now, it would be awesome if it was supported as part of the image transformation service.

A very common scenario on the web today is to have a source image where you need to provide variants in both A) the file format, as a fallbacks for older browsers, and B) the image size, for screen density.

For example, let’s imagine I have a high resolution PNG file as my source image at 1024x1024 pixels. And I want to be able to provide webp images for browsers which support it, but also provide PNG as a fallback as well as a variety of sizes for pixel density. If the image transformation service provided an additional parameter where you could specify the image’s file type (say type), then you could write markup that specifies baseline functionality with enhancements for file format and sizing where supported:

<picture>
  <source
    srcset="
      image.png?nf_resize=fit&w=100&h=100&type=webp,
      image.png?nf_resize=fit&w=200&h=200&type=webp 2x
    "
    type="image/webp"
  />
  <source
    srcset="
      image.png?nf_resize=fit&w=100&h=100&type=png,
      image.png?nf_resize=fit&w=200&h=200&type=png 2x
    "
    type="image/png"
  />
  <img src="image.png?nf_resize=fit&w=100&h=100&type=png" />
</picture>

Granted, you could iron out the API contract for this where type is optional and fallsback to the image extension when not specified, but i’ve included it here for illustration purposes.

In the above scenario, a modern device like an iPhone with a retina screen would get the 200x200 webp image, a device that doesn’t support webp but has a high pixel density screen would get the 200x200 PNG, and an old device that doesn’t support webp or even the <picture> element would get the basic 100x100 PNG—with each user agent only making 1 request for the appropriate image.

Being able to do these kinds of image transformations on the fly would be :fire:

1 Like

Any more information for format optimizations? That’s all that is really keeping me from switching from 11ty-image plugin over to Netlify LFS. WebP and AVIF seem like good options to start.

Thanks

1 Like

Another vote for webp support

Haven’t heard an update on this thread, but now coming back to it to ask for more :slight_smile:

Getting support for AVIF files would be amazing. Support for this format is now in Chrome and Firefox (and speculatively coming to Safari). It’s supposed to be much better than even webp (now 10 years old). Others, like Cloudflare, are beginning to support it

Getting support for AVIF for netlify’s image optimization would be :gift: :santa:

Per my previous example, if large media supported asking for different image formats, writing HTML that provides modern user agents with the best image format supported on their device would be negligible:

<picture>
  <source
    srcset="
      image.png?nf_resize=fit&w=100&h=100&type=avif,
      image.png?nf_resize=fit&w=200&h=200&type=avif 2x
    "
    type="image/avif"
  />
  <source
    srcset="
      image.png?nf_resize=fit&w=100&h=100&type=webp,
      image.png?nf_resize=fit&w=200&h=200&type=webp 2x
    "
    type="image/webp"
  />
  <source
    srcset="
      image.png?nf_resize=fit&w=100&h=100&type=png,
      image.png?nf_resize=fit&w=200&h=200&type=png 2x
    "
    type="image/png"
  />
  <img src="image.png?nf_resize=fit&w=100&h=100&type=png" />
</picture>

Hi @jimniels,

Thanks for the input. We’d pass this to the devs.

I’d love to see webp support as well. Could you give us an ETA on this? Webp has been supported by other tools I use for quite some time…

1 Like

Hi, @luksak. There is no official ETA of when WebP support may added to Large Media. I’ll add your +1 to the feature request but I cannot promise if this will become available or not.

@luke Thanks for your feedback.

Alright, I understand. Let me put it like this: Webp is a must have for me for several reasons (eg. smaller file size in general, lossy compression of png, compressing animated gif).

Please reconsider the priority of webp support, since at least I won’t use Netlify Large Media because of this.

1 Like

Hoping that that a year later, this thread is not dead. Image format is still one of the top reasons that my sites under preform in Google Search Console and Lighthouse. Optimizing for WebP would greatly reduce the load on devs/designers to render images in multiple formats.

Hi, @brycekunkel. One of my hobbies is data compression and I’ve got mad respect for the WebP format as well. It is a wonderful format/algorithm.

I do agree that WebP support would be great. However, the Large Media feature is not one that gets much attention these days so I don’t know if or when this will be added.

I also wanted to mentioned that using Git LFS by itself or Git LFS with Large Media at Netlify does not change the performance of the image loading. The Large Media offers browse-time image transformation (as opposed to build-time image transformation). The feature is about being able to modify images on the fly and not about increased performance.

1 Like

Good to know - I won’t plan on switching to LM until I actually need to or until WebP conversion is supported. FWIF, Cloudflare does this out of the box - and it’d be super helpful in boosting performance of our sites. Next best option would be to switch to use Next.js, but with so much of the Netlify community still using React (as shown in the year in review screenshot) it does seem like it’d at least be worth looking into.

Hiya @brycekunkel :wave:t6: welcome to the forums! Thank you providing this feedback. We appreciate it greatly. I’ll pass this on!

1 Like

+1 for next-gen image formats: webp, avif.

I’m looking at LM and the image transforms for the first time today. I was surprised with how few options there are, and especially that there’s no support for conversion to webp.

I’ve used Imgix several times in the past and have got used to some of its offerings:

  • I can specify that it’s important image compression stays lossless (which means a flag for the next-gen formats, or usually PNG otherwise).
  • I can specify a specific format, or that it’s OK to choose one based on the browser’s reported capabilities. So in that latter mode, it might serve a jpeg to one person, but a webp to another and an avif to another.
  • I can ask for low quality image placeholders.
  • It has more scaling/cropping options. Sometimes I specifically want the crop “gravity” to be a particular side, for example, or the centre, without any “smart” focal point detection happening.

Those are the features I use most; I’ve seldom or never found a use for most of the other things Imgix offers, like brightness adjustments, adding text, combining images, rotations, effects, etc.

1 Like

I thought I’d also put in my +1. I would love the support for more modern formats such as .webp. It surprises me that this isn’t supported yet. I’ve started using LM recently and having no format query is the only drawback

1 Like

+1, Would love support for .webp.