The use case:

• You need to display bunch of logos provided by 3rd parties and they don't align because they all have different transparent borders

https://pixboost.com/img/v2/homepage/animation-js.svg - hitting this SVG directly from Chrome will serve gzipped version less than 100Kb

Hitting the same URL from transformimgs will serve uncompressed version ~450Kb:

http://localhost:8080/api/img/https://pixboost.com/img/v2/homepage/animation-js.svg/asis

When implementing:

• Do not forget to add Accept-Encoding into Vary header
• Consider where to server Encoding header into response - probably just proxy

Press Release (not implemented yet):

There is a new feature in open source Image CDN to better support screens with DPI > 1.

Here is the blog post inspiration for the feature: https://jakearchibald.com/2021/serving-sharp-images-to-high-density-screens/

Current State

Currently, there is no support for DPI on API level, and developers use <img> tag with different source sets, e.g.

<img src="https://yourwebsite/image.jpg" srcset="
                https://yourwebsite/image.jpg/resize?size=300 300w,
                https://yourwebsite/image.jpg/resize?size=400 400w,
                https://yourwebsite/image.jpg/resize?size=500 500w,
                https://yourwebsite/image.jpg/resize?size=600 600w,
                https://yourwebsite/image.jpg/resize?size=1200 1200w,
                https://yourwebsite/image.jpg/optimise 2400w"
                alt="image" 
                sizes="(min-width: 768px) 200px,
                            600px" 
                width="2400" height="2400">

In the example above we provide sources for different sizes, so a web browser can pick the correct one based on the image size in the viewport, screen DPI and possible other factors.

For instance, if we load the image on mobile device on the screen witth DPI = 3, then the web browser will load 600px variant (3 * 200). On the other hand if we load the same image on desktop with DPI = 1 and the display image width is 600px then the browser will pick the same variant - 600 * 1 = 600px

This approach has performance drawbacks:

• We cap the maximum width to 2x, so if we deal with screens where DPI > 2 (Samsung Galaxy S6 dpi is 4, for example) we would load an image with maximum width x2
• When DPI is high, we use lower quality of the result image

To address above limitations we introduced new query parameter ?dpi that you can use with <picture> tag.

New API

There is a new query parameter dpi that accepts float number value, e.g. 1.5, 2, 3.4.

Examples:

• https://yourwebsite/image.jpg/resize?size=300&dpi=2
• https://yourwebsite/image.jpg/resize?size=300&dpi=3.5

Using in HTML

The ?dpi query parameter is best used with the picture element where you can pass screen dpi using -webkit-min-device-pixel-ratio media query

<picture>
  <source
      media="(-webkit-min-device-pixel-ratio: 2)"
      src="https://yourwebsite/image.jpg/optimise?dpi=2"
      srcset="
                https://yourwebsite/image.jpg/resize?size=300&dpi=2 300w,
                https://yourwebsite/image.jpg/resize?size=400&dpi=2 400w,
                https://yourwebsite/image.jpg/resize?size=500&dpi=2 500w,
                https://yourwebsite/image.jpg/resize?size=600&dpi=2 600w,
                https://yourwebsite/image.jpg/resize?size=1200&dpi=2 1200w,
                https://yourwebsite/image.jpg/resize?size=1800&dpi=2 1800w,
                https://yourwebsite/image.jpg/optimise?dpi=2 2400w"
      sizes="(min-width: 768px) 200px,
             600px"
  >
  <source
      media="(-webkit-min-device-pixel-ratio: 3)"
      src="https://yourwebsite/image.jpg/optimise?dpi=3"
      srcset="
                https://yourwebsite/image.jpg/resize?size=300&dpi=3 300w,
                https://yourwebsite/image.jpg/resize?size=400&dpi=3 400w,
                https://yourwebsite/image.jpg/resize?size=500&dpi=3 500w,
                https://yourwebsite/image.jpg/resize?size=600&dpi=3 600w,
                https://yourwebsite/image.jpg/resize?size=1200&dpi=3 1200w,
                https://yourwebsite/image.jpg/resize?size=1800&dpi=3 1800w,
                https://yourwebsite/image.jpg/optimise?dpi=3 2400w"
      sizes="(min-width: 768px) 200px,
             600px"
  >
  <img
      src="https://yourwebsite/image.jpg/optimise"
      srcset="
                https://yourwebsite/image.jpg/resize?size=300 300w,
                https://yourwebsite/image.jpg/resize?size=400 400w,
                https://yourwebsite/image.jpg/resize?size=500 500w,
                https://yourwebsite/image.jpg/resize?size=600 600w,
                https://yourwebsite/image.jpg/resize?size=1200 1200w,
                https://yourwebsite/image.jpg/resize?size=1800 1800w,
                https://yourwebsite/image.jpg/optimise 2400w"
      alt="image"
      sizes="(min-width: 768px) 200px,
             600px"
      width="2400" height="2400"
  >
</picture>

Is there currently a plan to support cache storage for input/output images to reduce processing time? We can save produced AVIF/Webp or other optimized/filtered images in a local storage for future use when client sends same/similar requirements. Or is this done in the proxy/CDN layer?

Add a configuration flag to reduce quality of the resulting images when Save-Data header is on.

Consideration:

• Client side control, e.g. add a query param to turn on/off quality reduction for specific images or return empty images?

HTTP Header Description
Can I Use

Browsers Implementation Tickets:

• Safari

Understand how PNG's alpha channels and tRNS chunk work. If the alpha mask is binary (that is, either fully transparent or fully opaque), see if the transparent parts correspond to a single color or gray shade; if so, eliminate the alpha channel from the PNG file and use the tRNS chunk (cheap transparency'') instead. Alternatively, see if the total number of color+alpha combinations is 256 or fewer; if so, write a colormapped image with a tRNS chunk. If the user requests that an RGBA image be converted to indexed color, do so intelligently. The combination of PNG's PLTE and tRNS chunks amounts to a palette whose entries are RGBA values. The exact same algorithms that quantize and dither a 24-bit RGB image down to an 8-bit palette-based image can be used to quantize and dither a 32-bit RGBA or 16-bit grayscale+alpha image down to an 8-bit RGBA palette. In particular, you cannot treat color values and transparency values as if they are separate, unrelated entities; attempting to partition the palette into a color part'' and a transparent part'' makes no more sense than attempting to partition a standard RGB palette into red, green, and blue parts. If you do cheap transparency poorly, the user will be forced to use a full alpha channel, quadrupling her file size. For grayscale, an alpha channel merely'' doubles the size. Note that the icicle image in Figure C-1 in the color insert is actually colormapped. Aside from the garish background--which was actually generated by the viewing application--the full-resolution half looks pretty darned good, doesn't it?

Does this application support PDFs as a possible upload media?

I saw that PNGs / JPEGs can be resized, so maybe PDFs are not supported...

Apologies if this was answered online somewhere, I tried to find the answer in the issues and google, but failed...

Add svg file format support to /optimise endpoint.

IMO, the main use of the feature would be using relative images sizing (vw, %) combined with Width client hint which then won't require setting different sizes for different breakpoints.

From the quick look on things there is not much value on implementing with only Chrome supporting it.

Can I Use

Tickets to track in the other browsers:

• Firefox
• Safari - wont fix

Example: