从服务器加载低分辨率版本的高分辨率图像（非javascript解决方案）

Posted 2023-02-24

【中文标题】从服务器加载低分辨率版本的高分辨率图像（非javascript解决方案）

【英文标题】：Loading low-res version of high-res image from the server (non-javascript solution)

【发布时间】：2016-06-09 16:26:38

【问题描述】：

假设有一个 10MB 的图像文件驻留在您的 Web 应用程序的静态文件夹中。

如果您在 html 文件中将其加载到类似这样的内容：<img src="static/image.png"></img>，则会为请求图像的用户加载整个 10MB。

但是如果标签是<img src="static/image.png" height="10" width="10"></img>呢？ IE。它将图像的大小调整为 10px x 10px（大概比 10MB 小得多）。用户端还会加载整个 10MB 吗？就个人而言，我认为用户仍然会加载 10MB。如果我错了，请纠正我。这是我的第一个问题。

如果我是对的，有什么策略可以动态缩略图这种图像，这样在用户端加载的文件大小也会减小（实际上没有存储单独的缩略图服务器上每个图像的文件）。假设它是一个非 JavaScript 环境，网络服务器是 nginx，并且网络应用程序是在 Django 中构建的（如果重要的话）。

存储单独的缩略图是唯一的方法吗？

【参考方案1】：

是的，用户必须下载完整的 10Mb。

有一些不错的 django 应用程序可以处理自动生成缩略图。 我使用django-versatileimagefield。在那里，您可以轻松实现不同的缩略图大小。

from django.db import models

class ExampleModel(models.Model):
    image = models.ImageField(
    'Image',
    upload_to='images/'
)

>>> from someapp.models import ExampleModel
>>> instance = ExampleModel.objects.all()[0]
>>> instance.image.thumbnail['200x200'].url
'/media/__sized__/images/test-image-thumbnail-200x200.jpg'

# or in templates:
<img src=" instance.image.thumbnail.200x200 " />

【参考方案2】：

是的，即使您在 HTML 中调整图像大小，图像仍然是 10mb。 我还将创建不同大小的缩略图并在服务器上上传，而不是服务器进行大小调整。 您还可以查看以下 URL 以获取替代选项 https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/

【参考方案3】：

1：是的，用户会下载大的 10MB 并且浏览器会调整大小（可能使用它选择的阴暗调整大小算法）

2：我会在上传时自己生成缩略图并存储它。如果你动态生成它，它可能会很慢，你最终会选择一个糟糕的算法，以及使用大量的 cpu 服务器端。