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

因此，我试图找出让网页上的所有图片尽快加载的最佳方法。我只想知道如果我有最好的方法是什么

比如说一张1600x900的图片，我想缩小到890x500

方法1

方法2

在Photoshop或其他工具中调整图像大小并使用：

方法3

在Photoshop中调整图像大小并使用：

方法4

使用CSS来调整图像的大小与上面的一些组合。。。（不确定这是否真的有效，但我想为了完整起见，我会把它放在那里）

最好的图片格式是什么？

这是我一直担心的另一件事，虽然GIF有助于整合文件大小，但您可以提高文件质量。PNG总是好的，因为它们有最好的质量，但文件大小相对较大。至于JPG，我已经避开了它们，因为我觉得它们是相当大的文件，但质量不是很好，而且我对它们的使用有限，因为它们必须有背景

只想知道你所有的想法！

---

谢谢

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

如果您仍然希望调整图像大小，因为用户可能可以上载图像，而他们可能无法上载具有正确尺寸的图像，那么您应该使用css调整图像大小，以便所有css都位于单个文件中，从而更易于维护

至于格式：

• Gif用于非透明图像
• Jpg仅适用于图片
• Png用于具有透明度的图像
• 即使设置了

  width=“0”height=“0”

  ，浏览器仍会加载1600x900图像
• 性能方面您只需帮助浏览器使用

  宽度

  和

  高度

  属性定义大小即可
• 最佳图像格式取决于您的需要
• 在PS中裁剪/调整图像大小后，转到保存为Web，使用压缩和首选项，始终关注图像的大小/vs/质量

---

关于.jpg，我不理解你的想法。它们非常好
• 原始.jpg图像（自然）800x600最佳质量=555KB
• 网络质量60的相同图像=118KB
• web 60和模糊0.5的相同图像=小于100KB（是的，模糊技巧）
差异？几乎看不见

---

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

---

方法5-

myPic small.png

已调整大小

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

请注意：
• 对于JPG不要使用100%的质量，85%-90%的质量和尺寸都很好
• 当图像没有很多颜色时（JPG的大小可以更小），当您需要无损图像格式时，或者您将来需要编辑它，或者需要透明度时，请使用PNG

---

您可能想尝试无损优化，或智能有损优化，如您提供的，这里有两个问题。请关注其中一个，如果需要，请提出另一个问题。PNG vs GIF，请记住旧版本的IE不支持PNG透明性，这应该是您正在进行的任何项目所关心的。请注意IE中的PNG支持，现在是2013年了……我发现jpg在网络上看起来没有那么好，尤其是当您将其用作相对较大的图像时。至于

Save for Web

这件事，我每天都会学到一些新东西，我总是把它用在GIF上，但我从来不知道你也可以把它改成png。