如何通过 Nginx 处理不同分辨率的图片服务-Nginx-PHP中文网

Nginx通过路由+缓存+代理实现按需图片服务，支持image_filter模块基础缩放、路径式尺寸标识（如/img/320x240.jpg）、OpenResty+Lua动态决策（WebP适配、DPR响应等），并强调缓存key唯一性、防击穿及安全限流。

如何通过 nginx 处理不同分辨率的图片服务

通过 Nginx 实现不同分辨率图片的按需服务，核心思路是：不预先生成所有尺寸，而是利用 URL 路径或参数识别目标尺寸，再由后端（如 PHP、Python）或 Nginx 模块（如 ngx_http_image_filter_module）动态处理原图。Nginx 本身不支持智能缩放，但可高效路由、缓存和代理，是整套方案的关键调度层。

使用 image_filter 模块做基础缩放（轻量级场景）

Nginx 自带的 image_filter 模块支持裁剪、缩放、旋转等简单图像变换，适合低并发、格式较统一（如仅 JPEG/PNG）、尺寸固定的静态图服务。

确保编译时启用了 --with-http_image_filter_module（官方预编译包通常不含该模块，需自行编译或选用含模块的发行版如 OpenResty）
配置示例：将 /img/123.jpg?w=320&h=240 映射为缩放请求

location ~ ^/img/(.+)\.(jpe?g|png|gif)$ {
    set $width  "-";  # 默认不缩放
    set $height "-";
<pre class="brush:php;toolbar:false;">if ($args ~* "w=(\d+)&h=(\d+)") {
    set $width  $1;
    set $height $2;
}

if ($width != "-" ) {
    image_filter resize $width $height;
    image_filter_jpeg_quality 85;
    image_filter_buffer 10M;
}

alias /var/www/images/$1.$2;

}

⚠️ 注意：image_filter 不支持 WebP 输出、不支持智能裁切（如 face-aware）、无法处理 SVG 或 AVIF；且 if 在 location 中有局限，生产环境建议用 map 指令替代。

用 URL 路径标识分辨率（推荐用于 CDN + 缓存友好）

把尺寸信息直接写进路径（如 /img/320x240/photo.jpg），更利于 CDN 缓存、浏览器缓存及日志分析，也规避了 query string 对缓存的干扰。

用正则匹配路径中的尺寸，并重写到后端处理器
例如：将 /img/640x480/logo.png 转发给 /api/resize?src=logo.png&width=640&height=480

location ~ ^/img/(\d+)x(\d+)/(.+\.(jpe?g|png|webp))$ {
    proxy_pass https://backend/resize?src=$3&width=$1&height=$2&fit=cover;
    proxy_cache img_cache;
    proxy_cache_valid 200 7d;
    expires 7d;
}

后端（如 FastAPI 或 Laravel）接收请求后加载原图、缩放、加水印、转 WebP 并返回；Nginx 负责缓存响应结果，避免重复处理。

Nginx Config Linter

对 Nginx 配置文件进行语法检查、验证和安全、性能审计。

下载

结合 Lua 或 OpenResty 实现动态决策（高阶灵活方案）

当需要根据 User-Agent（如是否支持 WebP）、设备 DPR（devicePixelRatio）、甚至图片内容（如自动裁切焦点）来决定输出格式与尺寸时，纯 Nginx 配置难以胜任。OpenResty 内置 Lua 支持，可在 Nginx 层做轻量逻辑判断：

读取请求头 Accept: image/webp，自动改写后端请求为 .webp 后缀或添加 format=webp
解析 Cookie 或 JWT 中的用户偏好（如“高清模式开启”），动态提升输出质量
对首次请求触发异步生成并回源，后续命中缓存

示例 Lua 片段（在 location 中）：

content_by_lua_block {
    local args = ngx.req.get_uri_args()
    local accept = ngx.req.get_headers()["Accept"] or ""
    local format = args.format or (accept:find("webp") and "webp" or "jpeg")
    local width  = tonumber(args.w) or 800
<pre class="brush:php;toolbar:false;">ngx.exec("/_process", {
    src = args.src,
    w   = width,
    f   = format
})

}