Question

想象一下，有一个10MB的图像文件驻留在Web应用程序的静态文件夹中。

如果您将其加载到HTML文件中，如下所示：<img src="static/image.png"></img>，则会为请求图像的用户加载整个10MB。

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

如果我是对的，那么动态缩略图这种图像的策略是什么，以便在用户端加载的文件大小也会减少（实际存储单独的缩略图的时间不足）服务器上每个图像的文件）。假设它是非javascript环境，网络服务器是nginx，Web应用程序是用Django构建的（如果重要的话）。

只存储单独的缩略图吗？

Answer 1

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

有一些不错的django应用程序可以处理自动化的thubmnail生成。我使用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 }}" />

Answer 2

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

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

Answer 3

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

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

3 个答案: