调整和格式化图片图标的正确方法是什么？

Question

所以我想弄清楚什么是让网页上的所有图片尽快加载的最佳方法。我想知道如果我有最好的方法是什么。

让我们说一个 1600x900 图像，我希望将其缩小到 890x500

方法1

<img src="myPic.png" height="500" width="890"/>

方法2

在Photoshop或其他任何地方调整图像大小并使用：<img src="myPic.png"/>

方法3

在Photoshop中调整图像大小并使用：<img src="myPic.png" height="500" width="890"/>

方法4

使用CSS通过以上某种组合来调整图像大小...（不确定这是否真的有效但我想我会把它放在那里以便完整）

什么是最佳图片格式？

这是我一直关注的另一件事，虽然GIF的帮助巩固了文件大小，但你做了sacrafice的质量。 PNG总是很好，因为它们质量最好，但文件大小相对较大。至于JPG，我已经避开了它们，因为我觉得它们是相当大的文件但质量不是很好，而且我对它们的使用是有限的，因为它们必须有背景。

只想知道你的所有想法！ 谢谢！

Answer 1

您的第一个选项必须始终是预先调整图像大小，以确保发送给用户的图像尺寸与可能的一样小。这是性能最佳的选择，因此您的页面加载速度会更快。

如果您仍想调整图片大小，因为可能是用户可以上传的图片，而且他们可能无法上传尺寸正确的图片，您应该使用css调整图片大小，以便所有css都在一个文件，因此更容易维护。

格式：

• Gif for none transparent images
• Jpg仅限图片
• Png用于具有透明度的图像

Answer 2

• 即使您设置width="0" height="0" ，浏览器仍会加载1600x900图片。
• 以性能为导向您可以帮助您的浏览器使用width和height属性来定义尺寸。
• 最佳图片格式？ 取决于您的需求。
• 裁剪/调整图像大小在PS中转到 另存为 并使用压缩和首选项，始终关注图像大小 / VS /的质量即可。

---

关于 .jpg ，我不明白你的想法。他们非常好。

• 原始.jpg图像（性质）800x600最佳质量= 555KB
• 网页质量相同的图片60 = 118KB
• 网页60的相同图片，模糊0.5 = 100KB （是的，模糊技巧）

的差异？几乎无法察觉。

---

• 您需要完美的Alpha不透明度+透明度吗？ .png _{（旧版IE浏览器的插件支持）}
• 您需要透明度而不关心像素化边框 .gif
• 你需要一个基本的背景（模式）？的 .gif注意

Answer 3

方法5 - myPic-small.png已调整大小，

<a href="myPic-big.png"><img alt="..." src="myPic-small.png" /></a>

几点注释：

1. JPG 不使用100％质量，85％ - 90％可以提供良好的质量和尺寸。
2. 使用 PNG ，当图片没有多种颜色（JPG时尺寸可以更小），需要无损图像格式，或者将来需要编辑它，或者需要透明度。