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

Question

我目前有一个聚合图像的网站，问题是这些图像非常大，当我将它们显示为较小的尺寸时，它们仍然会消耗大量计算资源。

我想知道如何强制减小大小/质量，而不只是将其压缩到 <div> 元素中。

这是我的网站链接，您可以看到在生成图像时它变得“卡顿”：http://newgameplus.nikuai.net/TEST/index.html

我曾经使用timthumb.php调整图像大小，但是主机不允许使用该脚本，原因不明。

- Adola

---

早上好，你也好！ - slash197

你是如何调整它们的大小的？在img标签中更改高度/宽度吗？那不会调整图片的大小，只是让它看起来更小。你需要在服务器上缩小实际文件，减少字节数和像素数量。 - Marc B

Marc，我现在正在使用： code return ('<div class="box" style="width:'+($width+($width*$test[$iterator][0]))+'%">' +'<p>'+$test[$iterator][1][2]+'</p>' +'<img src="'+$test[$iterator][2]+'"/>' +'<div id=boxBottom>'+Math.floor($test[$iterator][0]*100)+'%</div>' +'</div>'); code顺便问一句，我该如何缩小实际文件！哦，Slash，晚安。 - Adola

在聚合搜索并将所需的调整大小尺寸（宽度=“ x”高度=“ y”）存储在数据库中时，您可以调整这些图像的大小。那可能会有帮助。 - web-nomad

这里有几个图像调整大小的例子 - https://dev59.com/d3VD5IYBdhLWcg3wVKEb - Donatas Olsevičius

Answer 1

最好的方法是使用某种图像重构服务。

我编写了自己的一个，它使用ffmpeg和imagemagik来动态调整图像大小，并从视频生成任意大小的缩略图。我将结果存储在memcache中，以使后续请求超级快速，并添加了一些有趣的功能，例如使用面部检测和图像熵自动检测感兴趣点，旨在实现“无论大小都有漂亮的缩略图”。

这样的服务示例是src.sencha.io - 该服务的文档在此处，但我已经包含了下面的重要部分。

指定图像大小

<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版本的图像。但是，您无法使用此服务设置重力/兴趣点（据我所知）。

---

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

网络上有许多类似的服务可用。

- darryn.ten

---

这是一个非常酷的服务！我实际上正在考虑像你一样走这条路。我正在编写自己的调整大小/缓存程序。有点不喜欢在这里重新发明轮子，但我必须做我必须做的事情。 托管大小大约为5GB，我的数据库将包含大约30K张图像，每张图像大约为4KB。所以我有足够的空间来存储/提供图像。 - Adola

Answer 2

我同意slash的观点：这取决于图片如何被调整大小。我在网站上做一件事情是使用Photoshop（或GIMP）将图像调整为我需要用于页面的确切尺寸。然后，我还在图像本身的宽度高度属性中包含相同的尺寸。

此外，您可以使用照片编辑软件检查图像的大小，如果您将其保存为不同的文件扩展名，则（特别是使用JPEG和PNG文件），Photoshop会让您减少质量，从而降低文件大小并加快页面加载速度。

- MainStWebGuy

---

这是不可能的，因为我正在从互联网上的各个地方聚合图像。 - Adola