在线图像缩放和优化

如果您有很多精美的图片，我相信您一定很乐意在网站上与客户分享。您可以制作漂亮的幻灯片、创建图库，或者直接将图片插入到单个页面或博客文章中。无论您选择哪种方式，都会遇到一个与非专业内容编辑器相同的难题：图片尺寸调整。.

下面提供一些图像调整大小的建议，希望能对您有所帮助。.

调整大小以适应您的内容

务必根据内容的大小或宽度调整图片大小。例如，如果内容区域的宽度限制为 650 像素，则无需将图片尺寸设置得大于 650 像素，因为页面最多只能显示 650 像素。如果图片尺寸小于或大于容器，则显示质量会下降。

调整图像分辨率以适应网络

在任何网站布局中都不会出现“每英寸”的概念。PPI （每英寸像素数）和 DPI（每英寸点数）在您编辑或调整图片大小（例如用于电子邮件、博客或社交媒体分享）时没有任何意义。除了打印之外，在屏幕显示上，您无法区分图像的特征或质量。

对于PDF文件来说尤其如此，应避免将包含分辨率高于72dpi图片的PDF文件用于网页阅读。在这种情况下， ImageRecycle PDF优化器可以提供帮助，它可以优化包含300dpi图片的PDF文件，在保证完美网页阅读质量的前提下，节省98%的PDF文件大小。

ImageRecycle提供最佳 JPG 导出质量

使用 Photoshop 处理网页时，建议将 JPEG 图片的压缩率设置为最高 20%。您也可以尝试不同的 JPEG 压缩率，找到最适合自己的方案。全局压缩需要在图片大小和质量之间取得平衡。.

现在 ImageRecycle 借助 ImageRecycle 图像优化算法，整个过程截然不同。ImageRecycle 会检测当前的图像压缩率，并据此优化图像。由于压缩并非应用于整张图像，您一定会对下面的测试结果感到惊艳。.

请记住：原始图像压缩程度越低，优化效果越好，图像大小也越小。.

在下面的示例中，我使用 Photoshop 导出了 4 张 jpg 图片，质量级别分别为：60% | 80% | 90% | 100%。
ImageRecycle优化了这些图片，以下是优化后的文件大小。就质量而言，90% 和 100% 的图像质量略优于其他两个级别。由此可见：导出 jpg 图片时，尽量使用压缩率最低的格式， ImageRecycle会完成剩下的工作！

优化最终图像

根据您运营的网站类型，同一张图片可能会在不同的页面上以不同的尺寸显示。这通常出现在带有轮播图、产品列表、产品详情页等的电商网站上。
调整图片尺寸的过程通常由类似 GD 这样的在线 PHP 库完成。请务必确认原始图片和最终用户图片的质量和文件大小。不要完全依赖在线库和缓存生成器，否则可能会出现质量和文件大小方面的问题。如果您已经对原始图片进行了优化（通过调整质量、颜色和压缩率等参数），以节省带宽和加快页面加载速度，那么使用某些网页扩展的调整图片尺寸库可能会导致所有这些优化成果丢失！

解决方案：

• 对最终客户端浏览器上显示的图像进行优化。您可以手动对每张图像和每个尺寸进行优化，也可以使用 ImageRecycle 的 API 或 CMS 扩展来选择最终图像的存储文件夹，然后运行自动优化。.
• 使用我们的图像缩放工具调整原始图像大小。这样可以节省服务器存储空间，更快地处理图像，而且通常最终显示的图像宽度不需要超过 1600 像素。

接下来：HTML5 及<picture>元素

响应式设计技术，包括媒体查询，是网页设计师将网站布局适配到各种设备（从台式机到智能手机）并保持始终清晰显示效果的方法。这里的问题不在于显示效果，而在于性能，也就是在智能手机和平板电脑上显示和加载的桌面图像。

这<picture>HTML5 元素正试图解决这个问题。原生优化图像资源的优势在于加载速度——这对于使用较慢移动网络连接的用户来说尤为重要。<picture>元素只需向浏览器提供 HTML 指令，即可实现真正的动态调整大小。.

代码片段：

目前的限制在于，这项技术需要非常新的 Chrome 版本（39）以及一些 JavaScript 代码才能正常运行。在不久的将来，如果将这项技术与图像优化器结合使用，我们可以期待网站加载速度得到显著提升。.