把照片放在网站上使用灯箱

我正在为一个学校组织制作一个网站，该网站上会有很多活动的照片。我使用的是灯箱，所以图片将以幻灯片形式显示，并且我更改了图片的尺寸，因此幻灯片上的“当前”图片不像原始图片那么大。我仍然发现从打开图片或转到下一张图片延迟约5秒钟。我想知道是否有办法实现更快的加载时间，甚至是我没有考虑的另一种方法。把照片放在网站上使用灯箱

我为我的网站使用了xhtml，css和php。

来源

2012-07-10 user977151

你是如何改变尺寸的？你实际调整了图像的大小，还是只在HTML/CSS中添加了宽度和高度属性？ – 2012-07-10 10:39:13

您应该在页面加载时预加载图像。 – 2012-07-10 10:44:52

我只是放一个宽度和高度属性，所以最好实际调整它的大小？这似乎需要一些时间手动调整每张图片的大小而且我不确定您的意思是预加载 – user977151 2012-07-10 14:03:31

不好意思回答，但我不能写评论现在...

我做它的其他方式，上传后，我重新采样图片大图和缩略图。

当然，您可以每次重新采样图片，但这是有道理的原因，为什么您必须等待这么久，并且如果您在一个时刻有很多访问者，那么它对于服务器来说是很多工作。

所以对我来说最好的方式就是说，最大的图像是640x480 max，然后在上传到这个尺寸后保存图片，然后按照相同的比例重新采样。从你的文章，我不知道你是否调整大小/重新采样图像，以及在HTML中，通过设置高度和宽度，或在PHP中，以及多久。

来源

2012-07-10 10:49:50 Arxeiss

我不确定你的意思。你的英语有点难以理解。我猜你的意思是你保存它们后将你的图片设置为640x480大小。我没有这样做，所以我会尝试，但我仍然困惑你重新取样的意思。 – user977151 2012-07-10 14:07:20

是的，你理解正确。当用户上传图片时，我重新采样它，只保存更小的图片，当然，您甚至可以保存原始图片。重新采样是调整图片大小的更好方法。比文字更好的例子是：[看这里]（https://www.dropbox.com/sh/64c05q8bh65rzsy/YV8O1CWiny）左下角是图片名称（调整大小/重新采样） – Arxeiss 2012-07-10 14:28:07

假设您在服务器上有一张照片，其大小为8000x6000。其大小可能是10 MB。

现在让我们假设你想显示在网页这个形象，像这样做：

<img src="largeImage.jpg" width="800" height="600"/>

浏览器会下载大量图像（10 MB），这需要时间一大堆，然后将其重新调整到800x600的内存以显示在网页上（这会消耗内存和CPU时间）。总时间：25秒。

现在假设您将此图像调整为800x600并将此尺寸的图像放在服务器上。然后，显示与

<img src="smallImage.jpg" width="800" height="600"/>

图像的小图像看起来相同的用户访问你的网页，但浏览器将只需要下载一个小图像，这将是像100 KB大（100次小于大图像）。下载图像所花费的时间也将被除以100（0.25秒），浏览器将不必加载和调整内存中的巨大图像（较少的内存，较少的CPU时间）。您的图像几乎可以立即看到。

有许多工具（我自己使用Irfanview），它们能够拍摄大量图像并一次调整大小。你应该这样做。

来源

2012-07-10 15:27:14

所有浏览器将图片大小调整为800x600？ – user977151 2012-07-12 08:01:37

他们这样做，如果你告诉他们用'width =“800”height =“600”' – 2012-07-12 08:10:47

把照片放在网站上使用灯箱

回答

相关问题