如何在Django后端网络应用程序加载页面时减小图像大小?

huangapple go评论89阅读模式
英文:

How to decrease an image size when loading the page in Django backed web application?

问题

我的经典Django应用程序是一个简单的博客文章网站,在起始页面上显示发布的图片行。<br>
我允许用户上传图片到他们的帖子,最多可达100 Mb,以便其他人喜欢时能够下载图片。<br>
但是由于图片大小,我在起始页面遇到了显著的加载时间。<br>
我使用CSS的object-fit功能,将图片缩小以适应常见的起始页面,但图片的大小以Mb为单位并未改变。<br>
它仍然下载完整尺寸的图片,然后只是用CSS进行调整。<br>
结果,我的页面加载非常慢。<br>
在Django后端中,我使用了标准模型模式:image = models.ImageField...,然后只是在页面模板上使用post.image.url标签呈现它。<br>
因此,我希望只有在用户单击图片时才加载原始尺寸的图片。<br>
请建议如何解决这个问题。

英文:

My classic Django application is a simple blog post website showing the posted images line on a start page.<br>
I allow users to upload images to their posts up to 100 Mb to have the ability to download the image if someone likes it.<br>
But I encountered a significant loading time on the start page due to image sizes.<br>
I use CSS object-fit feature to make images small for good fitting on a common start page, but the image size in Mb doesn't change.<br>
It is still downloading full-sized images and after just shaping them with CSS.<br>
As a result, I have very slow page loading.<br>
I used a standard model pattern in the Django backend: image = models.ImageField...and then just render it on a page template with post.image.url tag.<br>
So I want the original-sized image loads if users click on the image only.<br>
Please advise how to fix that.

答案1

得分: 1

首先,我想说100MB对于一张图片来说确实太大了。这可能是未经压缩的高分辨率图像所需的数据,但即使稍微压缩一下也会有所帮助。

你可以简单地减小图像大小的限制,强制用户使用更加压缩的、更小的图像,但除此之外,如果你想在页面上显示图像而不是以完整质量显示它们,你还需要自行压缩图像并提供这些压缩的副本(下载按钮可以提供完整质量的版本)。关于这一点,我建议你查看另一个问题:如何使用PIL减小图像文件大小

英文:

First of all, I'd like to say that 100Mb for an image is really a lot. It maybe the data needed for uncompressed high resolution images, but even a small amount of compression would help with the size.

You could simply decrease the limit of image size to force users to use more compressed/smaller images, but other than that you also need to compress images yourself and serve this compressed copy if you want to show them not in full quality on your page. (Download button would then serve the full quality version) For that I'll refer you to another question:
How to reduce the image file size using PIL

huangapple
  • 本文由 发表于 2023年2月27日 01:44:43
  • 转载请务必保留本文链接:https://go.coder-hub.com/75573884.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定