英文:
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论