2012-09-28 46 views
0

当图像被放置在网页文档使用<img />元件/标签,应当图像以切片和编辑以适合原稿的尺寸或因为它们是它们应放置但widthheight属性应该修改以适应需要。在网站配售图像

例如,如果我有一个形象,说:“bldg_pic.png”,这是2000像素宽和1500px,我要放置在一个400像素x 300像素<div>适应它,我应该离开图像不变,做为

<img src="bldg_pic.jpg" width="400" height="300" alt="Building Picture" /> 

因此,加载的acutal图像是2000px x 1500px,但显示为400px x 300px。或者我只是编辑图像,并将其缩小到400px X 300px,并使用上述相同的代码。

我认为在放置图像时,浏览器会为图像插入一个“占位符”,如果在前面设置了属性,浏览器就知道应该为它保留多少“空间/内存” 。

我寻求使用哪种方法,并且他们的任何性能/最佳实践问题是相关的?

+0

图像按原样发送给客户。你可以指定为'width =“4”height =“3”',并且仍然会发送相同的大图像。如果您希望自己的页面加载速度更快,则可以将其他“缩小”版本的图像另存为缩略图。 – Passerby

+0

当所有的答案都是正确和有帮助的时候,很难选择接受哪个答案是正确答案。谢绝所有。 – Jawad

回答

5

始终调整图像大小。即时调整图像大小也是可能的。

https://github.com/lencioni/SLIR

SLIR是一个真棒库。你把slir文件夹放到你的网站根目录下。当您访问的图像,你可以这样做:

<img src="/slir/w400/path/to/image.png" width="400" /> 

让我们假设/path/to/image.png是4000px宽,SLIR不仅会压缩图像,它会调整其大小,并存储缓存版本的请求放在服务器上的文件夹中 - 当再次请求时,它将提供缓存版本。

如果您需要任何文件权限的帮助,只需询问。

祝你好运!

1

两者都是(尽管指定宽度/高度并不是真正必要的,如果它们的尺寸正确的话)。

虽然您可以使用widthheight属性来缩小图像大小,但它会影响您的网站和带宽的性能,因为没有很好的理由。

调整您的图像和(在Photoshop中),保存为网络/设备。

此外,如果您将图像放在一起以显示为一个图像,请确保在css中使用display:block以避免图像底部的间距。

2

从最佳实践的角度来看,您应该调整图像的大小以使其显示出来。您的访问者可能不乐意加载大图像,从而浪费带宽(考虑智能手机)并增加加载时间,甚至不知道他们有权访问更大的图像。或者,您可能希望将调整大小的图像链接到全尺寸版本。

从我的经验,一些浏览器使图像看起来破碎时,他们调整它自己(例如IE7在某些情况下),如此反复更好的使图像要在显示它的大小。

2

你必须将图像重新调整为实际需要的大小。请不要使用2000px 1500px图片。

这里的原因是:

  1. 当您在HTML(宽度&高度)的规模,浏览器仍然下载完整的形象,需要更多的时间来加载
  2. 如果你重新大小的东西更大的图像非常小的尺寸,在浏览器中看起来不会很好

如果您需要两个不同的尺寸,那么您应该创建两个不同尺寸的图像。

您还可以使用工具优化您的图像,以便在浏览器中快速加载而不会失去图像质量。

这里有几个工具,将帮助您:

砸烂:http://www.smushit.com/ysmush.it/

RIOT:http://luci.criosweb.ro/riot/

希望我的回答可以帮助你!

+0

我不推荐使用SLIR(Smart Lencioni Image Resizer),因为它会在服务器上增加额外的负载。 Sever需要动态地执行大小调整。您必须将图像重新调整到所需的大小。如果您需要动态重新调整大小,可能会有所帮助,但请不要使用它。 –

+0

感谢您的帮助和详细的解答。 – Jawad

+0

的确如此。 SLIR的确在服务器资源上增加了额外的开销。但是,只有一次。一旦图像被请求一次,它就会保存该请求的“缓存”版本。假设你有一个1000x1000的IMG,但你只需要将它用作100x100的图像。该图像首次被请求时,将需要1000x1000的图像并调整其大小。然后它会保存100x100版本,所以每次在第一次之后,它都会一次又一次地请求100x100图像 - 如果您手动调整大小,它也是一样的。 – verenion

1

应调整图像的大小,以确保您使用的网页的尺寸精确。我建议使用较小的格式(例如.jpg或.gif)而不是.png,而不会损失质量。

+0

谢谢+ 1 .. – Jawad