调整网站图像大小以提高效率。

时间:2012-06-27 11:25:43

标签: php javascript jquery html image

我目前有一个聚合图像的网站,问题是那些图像非常大,当我以较小的尺寸显示它们时,它们仍然会耗费大量的计算量。

我很好奇如何实际强制减小尺寸/质量,而不仅仅将它变成<div>元素。

以下是我的相关网站,您可以看到制作图片时的“滞后”程度: http://newgameplus.nikuai.net/TEST/index.html

我正在使用timthumb.php调整图像大小,但主机因某些原因不允许使用该脚本。

2 个答案:

答案 0 :(得分:1)

执行此操作的最佳方法是使用某种图像重新分解服务。

我编写了自己的一个使用ffmpeg和imagemagik来动态调整图像大小并从视频中生成任意大小的缩略图。我记忆结果,以便后续请求超级流畅,并有一些有趣的补充,如使用人脸检测和图像熵的自动感兴趣检测,目的是“漂亮的缩略图,无论大小”

此类服务的一个示例是 src.sencha.io - 此服务的文档是here,但我在下面列出了重要的内容。

指定图像尺寸

<img src='http://src.sencha.io/320/200/http://yourdomain.com/path/to/image.jpg'
     alt='My constrained image'
     width='320'
     height='200' />

这将拍摄您的图像(http://yourdomain.com/path/to/image.jpg)并通过调整大小服务运行,返回320x200版本的图像。你不能使用这个服务来设置重力/兴趣点(据我所知)。


您还可以使用此服务更改格式,调整数据大小,调整百分比大小并使用调整大小服务来检测请求图像的用户代理的宽度/高度。

网上有很多这样的服务。

答案 1 :(得分:0)

我同意斜线:这取决于图像的大小调整方式。我为网站做的一件事是使用photoshop(或GIMP)将图像大小调整为我正在使用图像的页面所需的精确尺寸。然后我还在图像本身的width-height属性中包含相同的尺寸。

此外,如果您要使用不同的文件扩展名保存图像,可以使用照片编辑软件检查图像的大小,并且(特别是使用jpeg和png文件)photoshop会让您降低质量,从而降低图像质量文件大小和加速页面加载。