Most mobile carriers force all HTTP traffic to go through their proxies that—among other things—recompress images on the fly. This means that visitors of your website or mobile app may be getting images in much lower quality than you’re serving.
It turns out that these proxies are not as bad as I expected, but quality of images they produce is rather low and cannot be relied upon. With few simple tweaks it’s possible to deliver images with even better compression and quality. Here’s what I’ve found:
- All proxies recompress all JPEG images. Unfortunately, even very low quality JPEGs are recompressed to have even lower quality. If you’re already using JPEGs at minimum acceptable quality (e.g. “compressive images” trick for high-dpi displays) you need to stop proxies from ruining them.
- PNG images are very rarely recompressed. If you’re not using lossy PNG yet—you really should!
- Static GIF images are getting noticeably posterized/discolored/dithered. Fortunately, apart from nostalgia, there’s no reason to use GIF for images any more.
- The standard HTTP header Cache-Control: no-transform which tells proxies not to modify responses was respected by all proxies I’ve encountered. This is amazing! It wins an award in the “Best Supported Obscure Header” category.
...
Proxies cannot modify HTTPS traffic, so this is one way to bypass them. For insecure traffic, you can add an HTTP header.
In nginx:
location ~* \.(png|jpg|jpeg|gif)$ { add_header "Cache-Control" "public, no-transform"; }
Apache:
<IfModule mod_headers.c> <FilesMatch "\.(png|jpg|jpeg|gif)$"> Header append Cache-Control "public, no-transform" </FilesMatch> </IfModule> ...
...
Takeaways
- Make PNGs 70% smaller by converting them with a lossy PNG encoder. Check outImageAlpha or TinyPNG.
- Lower quality of JPEGs. “Quality” setting in JPEG is very misleading—it controls how much data is removed, but some images can tolerate much more compression than others. Tune it per image instead of using arbitrary high setting for all of them. TryJPEGMini/Adept and ImageOptim.
- Serve well-optimized images over HTTPS or with Cache-Control: no-transformheader to prevent further degradation.
- Never use GIF, TIFF, BMP or other legacy formats.