在线图像调整大小和优化

如果您有一堆令人惊叹的图片，那么我相信您希望与您的网站上的客户分享。 您可以制作精美的幻灯片，制作画廊或在单个页面或博客中插入图像。 无论您选择什么选项，使用非专业内容编辑器都会遇到一个难题：调整图像大小。

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

调整大小以适合您的内容

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

调整网络的图像分辨率

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

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

使用ImageRecycle最佳的JPG导出质量

使用Photoshop，网络上的建议是最大保存JPEG图像。 压缩20％。 您还可以使用最适合您的JPEG优点进行一些测试。 应用全局压缩是大小和质量之间平衡的问题。

ImageRecycle正在检测当前的图像压缩率，并对此进行优化。

注意事项：压缩原始图像的次数更少，优化和尺寸会更好。

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

优化最终图像

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

解决方案：

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

下一步：HTML5和 元件

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

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

代码摘录：

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