Java技术栈 —— 网络带宽受限，图片预览加速

CS-Polaris

已于 2025-05-08 09:48:19 修改

阅读量1.1k

点赞数 27

CC 4.0 BY-SA版权

分类专栏： Java技术栈文章标签： java 开发语言

于 2025-04-20 11:37:29 首次发布

本文链接：https://blog.csdn.net/weixin_44327736/article/details/147110705

Java技术栈 —— 网络带宽受限，图片预览加速

一、方法列表
二、原实现 —— Nginx+Minio
三、改进实现 —— Nginx+ImgProxy+Minio

一、方法列表

方法	解释
图片压缩	降低图片大小
图片懒加载	滚动加载：只加载用户视野范围内的图片，当用户滚动页面时再加载其他图片按需加载：根据用户的操作预测需要加载的图片，例如在电商网站中，只加载用户正在查看的商品图片
CDN内容分发网络	将图片存储在多个地理位置不同的服务器上，用户可以从距离最近的服务器加载图片，减少延迟
缓存策略	浏览器缓存或应用缓存
优化图片格式	如WebP格式，它通常比JPEG或PNG提供更好的压缩率
分片加载	将大图片分割成多个小块，逐一请求加载
使用流式传输	渐进式JPEG：允许图片逐步加载，从模糊到清晰，给用户一种快速加载的感觉
优化图片质量	降低质量：在不显著影响视觉效果的前提下，适当降低图片的质量以减少文件大小

分片加载和流式传输有区别，分片加载是将图片分割成小块，然后按顺序加载这些图片块

流式传输是，用户会首先看到一个低质量的版本，随着数据的不断到达，图片的质量会逐渐提高。

二、原实现 —— Nginx+Minio

我目前采用的是nginx+minio的实现，局域网可以直接访问minio的图片预览链接，那么在外网的话，通过nginx转发到本地的图片预览链接也是一样的，nginx配置如下

location ^~ /preview/minio/ {
        rewrite ^/preview/minio/(.*) /$1 break;
        
        proxy_pass http://{minio_ip}:{minio_console_port}/;
        #proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_redirect off