Ultra Image Server

🌐 A production grade on-the-fly image processing server setup using imgproxy and Nginx caching.

Table of contents

• Why it's good
• Getting started
• Examples
• Debugging
• Configurations

• Author: Mai Nhut Tan [email protected]
• Copyright: 2021 AppSeeds https://code.shin.company/docker-imgproxy#readme

Support my activities

If you like this repository, please hit the star button to follow further updates, or buy me a coffee 😉.

I really appreciate your love and supports.

Why it's good

• Just download this project and run ^(*).
• Fast on-the-fly generating thumbnails thanks to imgproxy.
• High availability and performance thanks to Nginx content caching.
• Forget troubles of Image URL signature, but still ensure the security of the service.
• Easily serve local files as well as from other origin servers.
• Flexible in customizing SEO-friendly URLs without exposing imgproxy options (which are long and hard to remember).
• Flexible in selecting origin server for the request ^(**).
• Flexible in creating your own image presets for any request.
• Flexible in serving fallback image when the source file is not available.
• Easy SSL configuration (with your own certificates) with built-in HTTP/2 support.
• Automatically detect and convert images to WebP or AVIF format if the browser supports.

^{(*) using Docker Compose. (**) which is supported by imgproxy.}

Getting started

Prepare your files

Please put your files to be served in the folder www/.

There are some sample files available (a sample image cacti.jpg, a watermark, and some fallback images).

Start the server

docker-compose up -d --build --remove-orphans --force-recreate

That's all! 😉

Note: This setup requires Docker Compose installed. If you have already installed Docker Desktop or Docker Toolbox, then no need of installation for Docker Compose.

If you like this setup, please support my works 😉.

Examples

Local images

Assuming that we want to generate various thumbnail images from the original file named cacti.jpg.

I already created some preset names, such as _thumb or _w200, and I add preset names to the original URL to get thumbnails from it.

Image with no preset (it is resized to max-width=1600 as default).
http://localhost/cacti.jpg

The image with preset _w200 applied (200 is a dynamic number).
http://localhost/_w200/cacti.jpg

The image with preset _blurry applied.
http://localhost/_blurry/cacti.jpg

The image with preset _small applied.
http://localhost/_small/cacti.jpg

The image with preset _medium applied.
http://localhost/_medium/cacti.jpg

The image with preset _thumb applied.
http://localhost/_thumb/cacti.jpg

The image with preset _square applied.
http://localhost/_square/cacti.jpg

See my configurations to know how it works.

Remote images

With the same presets as above examples, we are going to serve an image by NASA using the alias @nasa, that will be added in these URLs.

Note: the image source is from NASA, it may be unavailable in the future.

Image with no preset (it is resized to max-width=1600 as default).
http://localhost/@nasa/esp_040663_1415.jpg

The image with preset _w200 applied (200 is a dynamic number).
http://localhost/@nasa/_w200/esp_040663_1415.jpg

The image with preset _blurry applied.
http://localhost/@nasa/_blurry/esp_040663_1415.jpg

The image with preset _small applied.
http://localhost/@nasa/_small/esp_040663_1415.jpg

The image with preset _medium applied.
http://localhost/@nasa/_medium/esp_040663_1415.jpg

The image with preset _thumb applied.
http://localhost/@nasa/_thumb/esp_040663_1415.jpg

The image with preset _square applied.
http://localhost/@nasa/_square/esp_040663_1415.jpg

Supported origin servers

This setup serve images from other public origin servers, as well as from Amazon S3 buckets, Google Cloud and Azure Blob.

You can learn how to serve files from private storage in the configurations section.

Debugging

Debugging rewrite rule:

When you make a request with the query component debug=1, you will see an X-Debug header contains its internal imgproxy's options.

Example 1 (local file with preset _small):

curl -Isk 'http://localhost/_small/cacti.jpg?debug=1'

HTTP/1.1 200 OK
Server: nginx
Content-Type: image/webp
X-Debug: /unsafe/size:320:320:0:0/sharpen:0.3/preset:logo/plain/local:///cacti.jpg@webp

Example 2 (remote file with preset _w640):

curl -Isk 'http://localhost/@nasa/_w640/esp_040663_1415.jpg?debug=1'

HTTP/1.1 200 OK
Server: nginx
Content-Type: image/webp
X-Debug: /unsafe/size:640:0:0:0/preset:logo/plain/https://www.nasa.gov/sites/default/files/thumbnails/image/esp_040663_1415.jpg@webp

Debugging fallback image:

When you requested a file which is not available, a fallback image will be served. There will be a 404 response with a header called X-Fallback, which contains the fallback image's path.

curl -Isk 'http://localhost/i-am-a-teacup.jpg'

HTTP/1.1 404 Not Found
Server: nginx
Content-Type: image/jpeg
X-Fallback: /noimage.jpg

Other helper URL parameters:

We can use these URL query components to modify some requests.

skip=1
Skip imgproxy processing for current request. The original file will be served.
E.g. http://localhost/cacti.jpg?skip=1

nocache=1
Disable Nginx caching for current request. The response will not be saved to a cache.
E.g. http://localhost/cacti.jpg?nocache=1

bypass=1
By pass Nginx caching for current request. The response will not be taken from a cache.
E.g. http://localhost/cacti.jpg?bypass=1

If you like this setup, please support my works 😉.

Configurations

Enabling SSL (and HTTP/2)

Create a folder certs/ in the same place with the docker-compose.yml file, then rename and put your SSL certificates server.crt and server.key to that certs/ folder.

Open the file at nginx/nginx.conf and uncomment 4 lines right after the # SSL line, like this:

# SSL
listen              443 ssl http2 reuseport;
listen              [::]:443 ssl http2 reuseport;
ssl_certificate     /etc/nginx/certs/server.crt;
ssl_certificate_key /etc/nginx/certs/server.key;

Then run the command in the Start the server section to recreate and restart the service.

Serving files from private storage

Please uncomment settings in docker-compose.yml file to enable serving files from Amazon S3 buckets, Google Cloud or Azure Blob. Then run the command in the Start the server section to recreate and restart the service.

You can find more details on imgproxy documentation.

Flushing cache files

Just remove the folder cache/.

rm -rf cache/

Then run the command in the Start the server section to restart the service.

Advanced settings

All settings for handling image URLs are written in the imgproxy.conf file using Nginx's map directives.

I keep all configurations in very simple variables. You can also make your own version from this base.

$use_imgproxy
This flag indicates that the request will be proceeded by imgproxy.

map $uri $use_imgproxy
{
    default 0;

    # Add any rules that you want to skip image processing.
    #> E.g. this line excludes files under "hq-cactus" folder.
    ~^/hq-cactus/ 0;

    # Else, process all image files with these file extensions
    ~*\.(jpe?g|png|gif|tiff?|bmp)$  1;
}

$origin_server
Define origin base URL from the request. This setup assumes that an origin server starts with an @ symbol (such as @nasa, @pinterest, etc.). You can also add your own origin servers using regular expressions.

map $uri $origin_server
{
    default         'local://';

    # Put your rewrite rules for origin servers from here.
    #> E.g.
    ~^/@mybucket/   's3://my-bucket';
    ~^/@myhost/     'http://myhost.com';
    ~^/@nasa/       'https://www.nasa.gov/sites/default/files/thumbnails/image';
    ~^/@pinterest/  'https://i.pinimg.com/originals';
}

$origin_uri
Parse real origin URI of the file. This setup just omits origin server and preset name in the URI if they exist, but you can also rewrite requested URI using regular expressions.

map $uri_omitted_origin_preset $origin_uri
{
    default '$uri_omitted_origin_preset';

    # Put your rewrite rules for origin URI from here.
    #> E.g. this line rewrites cactus.jpg to the real path cacti.jpg.
    ~*^/cactus\.jpe?g$  '/cacti.jpg';
}

$preset_name
Parse preset name from requested URI. This setup assumes that preset name starts with an underscore (_) symbol (such as _thumb or _w200). You can define your own presets using regular expressions.

map $uri_omitted_origin $preset_name
{
    default '';

    # You can define dynamic presets,
    #> but beware that dynamic presets are able to cause a denial-of-service attack
    #> by allowing an attacker to request multiple different image resizes.
    #> E.g. a dynamic preset with a variable $width.
    # ~^/_w(?<parsed_width>[0-9_-]+)/  'max_w:${parsed_width}';

    # This is a better version for above dynamic preset.
    #> It allows only certain image sizes,
    #> and fallbacks other undefined image sizes to max_w:200
    ~^/_w(?<parsed_width>(200|640|800|1200|1600))/  'max_w:${parsed_width}';
    ~^/_w(?<parsed_width>([0-9_-]+))/               'max_w:200';

    # Get static preset name from the URI
    ~^/_(?<parsed_name>[a-z0-9_-]+)/ '$parsed_name';
}

$imgproxy_preset
Define imgproxy options for each preset name.

map $preset_name $imgproxy_preset
{
    default 'size:1600:0:0:0/preset:logo';

    # Dynamic preset
    ~^max_w:(?<width>[0-9]+)$ 'size:${width}:0:0:0/preset:logo';

    # Static presets
    blurry  'size:320:320:1:0/blur:10/quality:50';
    small   'size:320:320:0:0/sharpen:0.3/preset:logo';
    medium  'size:640:640:0:0/preset:logo';
    thumb   'size:160:160:1:1/bg:ffffff/resizing_type:fill/sharpen:0.3';
    square  'size:500:500:0:1/bg:ffffff/resizing_type:fill/preset:center_logo';
}

$imgproxy_extension
Detect WebP or AVIF supports from the request header Accept.

map $http_accept $imgproxy_extension
{
    default '';
    ~*webp  '@webp';
    ~*avif  '@avif';
}

$imgproxy_options
Generate final URL for imgproxy following their documentation. When URL query ?skip=1 is set, use another rule to skip imgproxy processing.

map $arg_skip $imgproxy_options
{
    default '/unsafe/${imgproxy_preset}/plain/${origin_server}${origin_uri}${imgproxy_extension}';
    ~.+     '/unsafe/plain/${origin_server}${origin_uri}';
}

$fallback_uri
Define fallback file to serve when the requested file is unavailable. E.g. /noimage.jpg or /noimage_thumb.jpg, which is stored in the folder www/.

map $preset_name $fallback_uri
{
    default '/noimage.jpg';
    thumb   '/noimage_thumb.jpg';
    # small   '/noimage_small.jpg';
    # medium  '/noimage_medium.jpg';
    # square  '/noimage_square.jpg';
}

I think you can even make a better version than mine 😊.

If you like this project, please support my works 😉.

From Vietnam 🇻🇳 with love.