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

Question

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

假设我想将一张 1600x900 图片缩小到 890x500

方法一

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

方法二

在 Photoshop 或其他软件中调整图像大小并使用:<img src="myPic.png"/>

方法三

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

方法四

使用 CSS 通过上述的某种组合来调整图像的大小...(不确定这是否真的有效，但我想为了完整起见我会把它放在那里)

最好的图片格式是什么？

这是我一直持观望态度的另一件事，虽然 GIF 有助于合并文件大小，但您会牺牲质量。 PNG 总是好的，因为它们具有最好的质量，但文件大小相对较大。至于 JPG，我一直避开它们，因为我觉得它们是相当大的文件，但质量不是很好，而且我对它们的使用有限，因为它们必须有背景。

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

Answer 1

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

如果您仍想调整图片大小，因为用户可能会上传图片，而他们可能不会上传尺寸正确的图片，您应该使用 css 调整图片大小，这样您的所有 css 都在一个单一的文件中文件，因此更易于维护。

关于格式:

• 非透明图片的 Gif
• Jpg 仅用于图片
• Png 透明图像