# Ensure Nginx knows the .webp mime type
# 确保Nginx识别.webp的mime类型
# (Newer Nginx versions should already have this in mime.types)
# (较新版本的Nginx应该已经在mime.types中包含了)
# types {
# image/webp webp;
# }
server {
listen 80;
server_name yourdomain.com;
location ~* ^/path/to/images/.+\.(png|jpe?g)$ {
add_header Vary Accept; # Important for caching proxies # 对缓存代理很重要
try_files $uri$webp_suffix $uri =404; # Try to serve .webp, then original # 尝试提供.webp，然后是原图
# Optional: On-the-fly conversion if webp doesn't exist
# 可选：如果webp不存在则进行实时转换
# This requires ngx_http_image_filter_module and libgd or libvips
# 这需要ngx_http_image_filter_module以及libgd或libvips
# error_page 404 = @generate_webp;
}
# Optional: Location for on-the-fly WebP generation
# 可选：用于实时生成WebP的location
# location @generate_webp {
# set $webp_uri $uri$webp_suffix;
# image_filter resize 400 400; # Example: resize, not strictly for webp conversion
# 示例：调整大小，并非严格用于webp转换
# image_filter_jpeg_quality 75;
# image_filter_webp_quality 80;
# image_filter_buffer 10M;
# # Logic to convert original to webp and serve it
# # 转换原图为webp并提供的逻辑
# # This part is complex and might need additional scripting or modules
# # 这部分比较复杂，可能需要额外的脚本或模块
# }
}
}
```
```nginx
# 在 http 段添加:
# In http block add:
lua_package_path "/path/to/your/lua/scripts/?.lua;;"; # 根据实际路径修改 # Modify according to your actual path
server {
# ... 其他配置 ... other configurations ...
location ~* /path/to/images/.+\.(png|jpe?g)$ {
set $original_uri $uri;
set $webp_uri $uri.webp;
# 检查浏览器是否接受webp
# Check if browser accepts webp
if ($http_accept ~* "image/webp") {
# 尝试直接提供webp文件，如果存在
# Try to serve webp file directly if it exists
try_files $webp_uri @generate_webp_lua;
}
# 如果浏览器不支持webp或者webp文件不存在，则提供原图
# If browser does not support webp or webp file does not exist, serve original image
try_files $original_uri =404;
}
location @generate_webp_lua {
# 调用Lua脚本处理
# Call Lua script for processing
content_by_lua_file /path/to/your/lua/scripts/webp_converter.lua; # 根据实际路径修改 # Modify according to your actual path
}
}
```
**Lua 脚本示例 (`webp_converter.lua`) 思路 (来自搜索结果)**:
```lua
-- webp_converter.lua
local function file_exists(name)
local f = io.open(name, "r")
if f ~= nil then
io.close(f)
return true
else
return false
end
end
local original_image_path = ngx.var.document_root .. ngx.var.original_uri -- 假设original_uri是相对于文档根目录的路径
-- Assuming original_uri is relative to document root
local webp_image_path = ngx.var.document_root .. ngx.var.webp_uri -- 假设webp_uri是相对于文档根目录的路径
-- Assuming webp_uri is relative to document root
if not file_exists(original_image_path) then
ngx.exit(ngx.HTTP_NOT_FOUND)
return
end
if not file_exists(webp_image_path) then
-- 调用 cwebp 进行转换，质量参数可以调整
-- Call cwebp for conversion, quality parameter can be adjusted
local command = string.format("cwebp -q 75 %s -o %s", original_image_path, webp_image_path)
local handle = io.popen(command)
handle:close() -- Ensure process finishes Ensure process finishes
end
if file_exists(webp_image_path) then
ngx.exec(ngx.var.webp_uri) -- 内部重定向到 WebP 图片 Internal redirect to WebP image
else
-- 如果转换失败，可以考虑返回原图或错误
-- If conversion fails, consider returning the original image or an error
ngx.exec(ngx.var.original_uri) -- 或者 ngx.exit(ngx.HTTP_INTERNAL_SERVER_ERROR) or ngx.exit(ngx.HTTP_INTERNAL_SERVER_ERROR)
end
```
一般情况下，webp图片文件大小会变的很小，也就加快了图片加载速度，节省了带宽。