Imgproxy is an open source image processing proxy service. You supply image URLs and processing parameters in the URL. It downloads the image and applies the filters you’ve specified. It can also automatically serve WebP or AVIF images to clients that support those formats.
I started by installing imgproxy on the DigitalOcean App Platform. You can use the Docker image directly from Dockerhub. I recommend reading through the configuration options for more information about self hosting imgproxy. I’ve limited the allowed sources with IMGPROXY_ALLOWED_SOURCES and enabled WebP and AVIF detection.
IMGPROXY_ENABLE_AVIF_DETECTION=true
IMGPROXY_ENABLE_WEBP_DETECTION=true
IMGPROXY_ALLOWED_SOURCES=https://josh.blogDigitalOcean uses Cloudflare for the App Platform, so you can use the subdomain they provide or point a domain you control at the app.
To replace the WordPress image URLs with imgproxy URLs, I’ve written a small WordPress plugin. This does a few things.
- Replace all the images with our new imgproxy URLs.
- Automatically generate
srcsetimage URLs. - Automatically generate a blurhash when images are uploaded.
This is similar to other image CDNs, but you can self host the processing service and host the images on your own domain.
Blurhash generates a short string that represents a blurry version of the image. These are used as placeholders while images are downloaded. On a fast internet connection you may not even notice this. I like to use a lot of large images, so it’s nice to have a representative placeholder while they download.
This is super handy! I was about to setup a Dockerized Photon service for the same purpose but that would require writing a custom plugin and updating that Docker image.