未优化的图像可能是令人难以置信的瓶颈，它会将原本构建良好的网页变成缓慢加载、臃肿的页面。随着移动设备上用户比例的不断增加，正确调整和优化图像以提供良好的移动体验变得更加重要。网络研讨会与内容创建者合作时：培训内容创建者在不同的情况下使用哪种类型的图像文件。例如，PNG文件不应该用于静态照片（jpg是更好的选择），但是它们应该用于透明的web图形。PNG-8可以用于简单颜色的徽标等图形，因此文件大小比PNG-24小（参见Lara Hogan的"为性能设计"一书中的表）。如果使用Photoshop，请确保在可能的情况下裁剪图像，然后使用"保存到Web"功能保存将在网站上使用的所有图像。在"Save for Web"选项中，确保指定适当的图像大小并选择所需的图像质量（60%通常是一个不错的选择）。为内容创建者提供有关将上载到网站的图像的最大文件大小和尺寸的准则。通过像ImageOptim（OSX和Linux，免费）或Caesium图像压缩程序（Windows，免费）或TinyPNG（在线）这样的优化器运行映像。在可能的情况下，使用SVG而不是png来处理web图形，因为文件的大小往往要小得多，并且在各种大小的屏幕和设备上看起来都很清晰。如果使用动画gif，也应该进行优化（参见本文）。开发者小贴士：内置图像优化工具。对于CMS，这可以通过一个优化所有新添加的图像的附加组件来完成，比如用于WordPress的eww图像优化器。对于静态站点，可以将其构建到站点的构建工具中，例如：gulpimageoptim。如果可能，以编程方式设置可上载到站点的图像的最大文件大小和尺寸。这是内置在像WordPress和Drupal这样的CMS系统中的。使用响应图像。最简单的方法是将图像"srcset"和"size"属性添加到所有图像中。一些CMS系统已经内置了响应图像功能，例如，WordPress使用Picturefill来确保对旧浏览器的支持。另一种方法是使用元素，对于想要对照片进行艺术指导的情况，可以完全控制图像的哪个部分以不同的屏幕大小显示。第三方工具如Cloudinary是另一种解决方案。定期审核网站，以确保图像最佳实践得到遵守。通过对内容创建者进行适当的培训，以及开发人员预先完成的适当的规划和实现技术，图像可以成为网站或web应用程序的资产和差异点，而不是令人沮丧的瓶颈。Sheelah Brennan，Web开发人员和所有者，Sheelahb.com网站我优化图像作为我的Magento速度优化服务的一部分。由Magento支持的电子商务网站是一个复杂的目录，上面有成千上万的图片。手动优化每个JPEG或PNG是不可能的，所以我使用了两种自动减小大小的技术。我对GIF使用gifsicle，对JPEG使用JPEGRAN，对PNG使用optipng—这些都是命令行实用程序，用作操作系统的预建包。我使用下面的bash脚本查找每个图像并在飞：复制到剪贴板#！/垃圾桶/垃圾桶查找./media-iname'*.gif'-exec sh-c'gifsicle-b-O3-o"{}.out""{}"；mv"{}.out""{}"'\；查找./media-iname'*.png'-exec optipng-o5-keep-preserve'{}'\；找到./media-typef-iname'*jpg'-exec sh-c'jpetran-outfile"{}.out"-optimize"{}"；mv"{}.out""{}"\；这个脚本可以添加到cron守护进程中，以便在新图像出现时对其进行优化（有关更多详细信息，请参阅本文），一个可以为Nginx或Apache安装的服务器扩展。此工具优化图像并将其缓存在服务器上。配置是简单：复制到clipboardModPagespeedRewriteLevel CoreFilters CoreFiters过滤器包括图像优化以及许多其他有用的速度优化工具（请参见https://modpagespeed.com/doc/configuration)。我有时使用的第三种方法是运行通过谷歌PageSpeed Insights页面，然后下载优化后的图片包（可以在PageSpeed报告底部找到下载链接，请参阅https://developers.google.com/speed/docs/insights/OptimizeImages). 但是即使安装了PageSpeed模块，googleinsights仍然可以压缩几千字节。第三种方法需要大量的体力劳动和耐心，但这是值得的关。有贡献作者：Goivy首席执行官Konstantin Gerasimov在众多的文件格式中，我们来看看这三种流行的格式。对于普通用户来说，知道它们之间的确切区别可能并不重要，但在图像方面则更为关键优化。这里是我们对所谓的优化和渐进式图像的看法文件。已优化JPEG或优化PNG（也称为非隔行扫描PNG）创建更小尺寸的改进图像文件。浏览器自上而下加载这些文件，图像数据逐渐到达。这为10K以下的图像文件提供了最好的压缩，通常更好。进步PNG（PNG）也允许在加载前将所有PNG图像交替显示。加载的信息越多，图像质量越好。这种格式通常为10K以上的文件提供更好的压缩。在我们了解了哪种图像格式更适合您的电子商务网站上的不同类型的图像后，我们想谈谈如何压缩网站上的所有图像，以减少大小。但是, 即使你为你的图像选择了最合适的格式，它们仍然可能是巨大的。图像的质量越好，它的重量就越大。当你的在线商店中有数千张图片时，即使10%的图像压缩也会大大提高页面的负载速度。有贡献凯特·格林，促销员图片对于网络文章非常重要。对于一篇好文章，你需要有合适的关键词和有吸引力的图片的文章。但是，为了获得更好的用户体验，应该对图像进行优化。例如，如果一个访问者浏览了你的文章，而加载图片需要时间，他们可能会离开你的网站。此外，搜索引擎可能会让你在搜索中排名较低结果。你呢需要优化你的图像。我遵循的经验法则是使用小于50kb的图像，同时保持质量。有时，我可能会增加到60-70kb，但不会超过那个。那个我喜欢用在图像优化的工具是免费的，可以提供很好的效果。在找到并编辑图像后，我总是使用压缩机.io然后用tinypng.com网站. 我还使用了高级的延迟加载WordPress插件，它减少了页面加载时间，并提供了一个很好的用户经验。为了更多详细信息，请参见：网站找到创意共享零图片。贡献作者：Pawan Bahuguna，Tech2Blog所有者图像优化可能看起来有点复杂，但是通过一些技巧，您很快就会掌握它。说到互联网上的任何东西，内容可能是王者，但一张图片胜过千言万语。这就是为什么它是关键，你优化任何图像，你在你的网站上使用。图片质量：你选择放在网站上的任何图片都是可以想象到的最高质量，这是唯一合乎逻辑的。但是你会惊讶地发现，在一些最流行的网站上，你会看到大量的劣质图片。最好的方法是深入观察图像并检查清晰度。之后，你可以检查分辨率和大小，以确保图像质量在调整大小时是一致的。图像大小：有很多新的插件和工具可以帮助自动调整图像大小。如果不使用这些工具，可以使用Photoshop、Pixlr编辑器，甚至basic paint来调整图像大小。确保始终选中"约束比例"，以便图像质量保持不变。图像对齐：这是所有图像优化元素中最常被忽略的元素之一。在线对齐图像通常有三个主要选项：左对齐、居中对齐和右对齐。您可以用这种方式对齐图像并将其文本换行（左对齐和右对齐是文本换行的理想方式）。"居中"通常仅用于显示图像，并将文本定位在图像的上方或下方。图片标题，元数据，和搜索引擎优化：最近，它已成为强制性的所有图片，以适当优化搜索引擎排名的目的。首先，你的图片标题应该与你的网页名，关键词，或者你要找的文章名一致。此外，你可以用关键字为图片加上标题，或者向观众详细解释图片。最好在备选文本选项中加入主题和关键字短语或术语。搜索引擎会提取图片，并在它们的列表中为这些特定的术语排序。这不仅有助于提高您的内容在SERP中的排名，而且还可以提高您的排名和流量通过那些寻找特定的图像通过关键字。已投稿作者：Matt Hall，所有者，权杖页面加载时间增加的主要原因之一是页面上的图像！如何做好：渐进式图像加载：在所有图像（

标记）都从src加载图像之前，您的网页才可使用。所以，首先用占位符替换所有的img标记。网页上的一个高分辨率的占位符将替换为高分辨率的图像。这样做将允许您的网页继续执行而不妨碍页面的加载。对于任何需要显示的图像，必须有两个版本，一个是高分辨率的，另一个是低分辨率的（最大1kb）。在CDN上托管映像：当映像托管在CDN上时，它可以减轻appli的负载