最佳做法-处理网站上的图片


9

我正在将旧的电子商务站点移植到MVC 3,并且想利用设计改进的优势。该站点当前以3种尺寸存储产品图像:缩略图,中号(用于在列表中显示)和展开以放大外观。现在,我们必须上传3张大小完全合适的独立图像,并提供3个与网站期望的名称相匹配的不同名称,等等,这很麻烦。

我只想上传一个文件,然后上传一个大文件,然后让网站将其缩小到所需的大小,并且我希望可以灵活地根据用户的喜好和外形(例如移动设备,iPad)更改缩略图和列表的大小,台式机)等,因此可能需要使用同一图像的多个副本。我的问题是上传后应将图像缩小然后保存几次,如果这样,什么是好的存储/命名约定?

另一个想法是仅存储单个图像,但是在将其提供给客户端之前以编程方式调整其大小。有没有人这样做,除了几个机器周期外,还有什么取舍权衡?如何将内存中的临时图像传递给客户端(没有URL)?

Answers:


13

我是一家英国旅行公司的首席开发人员。我实施的项目之一是图像库的网络版本,可以自动查询该版本以为我们的网站提供照片。它包含约150k图像,其中约60-70k可从网站获得(评分最高)。

我们首先定义了大约5种尺寸,即时创建了这些尺寸版本并将其存储在Amazon S3中。价格极低,但Amazon能够正常运行,因此我们经常会看到丢失的图像。我们开发的网站越多,我们就讨厌只提供五种尺寸的图像。

我们转到了动态调整大小模型,因为我们可以在任何图像的URI中添加width和/或height参数,以使其以该大小即时渲染。我们缓存大小调整后的图像(使用请求URI的MD5哈希作为文件名)。

要获取图片#12345(我们的图片是通过db提取的,但是您可以将其替换为文件路径),宽度为200,jpg质量为80%,则URI格式为:

http://images.domain.com/?imageid=12345&w=200&q=80

该解决方案易于实施并且可以无缝地工作-即使在包含20至30张图像的页面上,网站访问者也没有明显的延迟。

尽管我也写了一个PHP图像调整大小脚本,但我们还是用.net来做这件事。

希望能有所帮助,亚当


对我来说有趣的是,“预期调整大小”实际上是一种缓存形式-只是一种极其原始且有限的缓存。第一个请求之后进行缓存是通常的方法,并且通常是更好的方法。唯一的例外是当您一次要处理大量数据,此处可能不是这种情况。
亚罗诺(Aaronaught)2011年

出色的@Adam(这是我最会说英语的地方),感谢您的深思熟虑。我走了
史蒂夫

2

图像处理器 图像处理器

Imageprocessor是用C#编写的轻量级,可扩展库,可让您使用.NET即时处理图像

快速调整大小:

<!--Automatic height based on width-->
http://your-image?width=600
<!--Automatic width based on height-->
http://your-image?height=250
<!--Both dimensions specified-->
http://your-image?width=600&height=250
<!--Both dimensions specified with the image anchored to the top-->
http://your-image?width=600&height=250&anchor=top
<!--Height ratio passed for automatic scaling-->
http://your-image?width=600&heightratio=0.416
<!--Width ratio passed for automatic scaling-->
http://your-image?widthratio=2.4&height=250
<!--Background color added to padded image-->
http://your-image?width=600&height=250&bgcolor=fff  

ImageProcessor.Web带有缓存作为标准配置。在您选择的长度内,所有处理的图像都将异步缓存在浏览器和服务器上。服务器缓存会智能地存储数百万个图像,并在原始图像更改或缓存过期时自动进行自我更新。


1

假设缩略图只是主图像的调整大小版本,那么我认为它应该在上载时完成,但可能安排为后台作业,以免影响其他过程。如果要即时调整大小,请确保缓存图像。

所有这些的不足之处在于,某些图像的最佳缩略图不是简单调整母版的大小。您可能需要以人为驱动方式进行缩放。您可能想要自动调整大小,但是有一种机制可以在这些特殊情况下进行覆盖。


0

亚当提到的内容略有不同:

(1)创建一个自定义错误页面(图像规则)

(2)图像文件名的结构应为:

ImageId_Width_Height_Quality

唯一的例外是原始图像,应命名为:

ImageId_Original

(3)在上传文件时,例如:1245_Original->应该删除所有具有1245_ *的文件

(4)自定义错误页面(假设存在1245_Original存在)应动态创建所请求的图像文件,例如:

1245_250_400_80.jpg

并在第一时间提供。

实际上,上传新图像会清除缓存。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.