html - 从服务器加载高分辨率图像的低分辨率版本(非 JavaScript 解决方案)

Question

假设有一个 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 构建的(如果重要的话)。

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

Answer 1

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

2. 有一些不错的 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 }}" />