在线图像调整大小和优化

如果您有一组令人惊叹的图片，那么我相信您会很乐意在您的网站上与您的客户分享。 您可以制作可爱的幻灯片、制作画廊或只是将图像插入单个页面或博客中。 无论您选择什么选项，非专业内容编辑器都会遇到一个困难：调整图像大小。

在下面，一些有关调整图像大小的建议将对您有所帮助。

调整大小以适合您的内容

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

调整网络图像分辨率

任何网站大纲中都不会有“每英寸”的印象。 当您出于电子邮件、博客或通过社交媒体共享等任何目的编辑或调整图片大小时，PPI（即每英寸像素）和 DPI（即每英寸点数）没有任何相关性。 除了打印之外，在屏幕显示上，您将无法对图像特征或质量进行任何区分。

对于PDF尤其如此，请避免将包含分辨率高于72dpi的图像的PDF用于网络阅读。 在这种情况下， ImageRecycle PDF优化器可以帮助您优化内部包含300dpi图像的PDF，并且您可以节省98％的pdf尺寸，并且具有完美的质量，可以在网上阅读。

使用ImageRecycle获得最佳 JPG 导出质量

使用 Photoshop 时，建议在 Web 上保存 JPEG 图像，最大尺寸为 20% 的压缩。 您还可以使用最适合您的各种 JPEG 优点进行一些测试。 应用全局压缩是大小和质量之间的平衡问题。

现在有了ImageRecycle图像优化算法，过程就大不一样了。 ImageRecycle正在检测当前图像压缩比，并据此优化图像。 由于压缩并未应用于整个图像，因此您会对下面的测试感到非常惊讶。

请记住：原始图像压缩得越少，优化和尺寸就会越好。

80％|
90％| 100％然后，我使用ImageRecycle优化了图像，这是尺寸结果。

优化最终图像

根据您运行的网站，相同的图像可以以不同的尺寸显示在不同的页面上。 这通常是您在带有滑块、产品列表、产品详细信息的电子商务中找到的内容。
调整大小的过程通常由在线 php 库（如 GD）完成。 确保原始用户图像与最终用户图像的质量和重量。 不要相信在线图书馆和缓存生成器，否则您可能会遇到质量和大小问题。 如果您的原始图像已经在您这边进行了优化（通过在质量、颜色、压缩之间进行微调）以节省带宽和页面加载，并且使用一些 Web 扩展调整大小库，您可能会失去所有这些！

解决方案：

• 对最终客户端浏览器上显示的图像应用优化。 您可以对每个图像和每个尺寸手动执行此操作，或者使用我们的 API 或ImageRecycle的 CMS 扩展来选择存储最终图像的文件夹。 然后对其运行自动优化。
• 使用我们的原始图像缩放器。 您可以节省服务器存储空间，更快地操作图像，并且通常在最终显示时不需要宽度超过 1600 像素的图像

下一步：HTML5和 元件

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

这 HTML5元素正在试图解决这个问题。 本机优化的图像资源的好处是加载时间 - 对于移动互联网连接速度较慢的用户尤其重要。 这 只需向浏览器提供 HTML 指令，Element 就可以实现真正的动态调整大小。

代码摘录：

目前的限制是这需要最新的 chrome 版本 (39) 和一些 JS 才能正常工作。 在不久的将来，借助与图像优化器相关的这项技术，我们可以期望获得最佳的网站加载时间。