您好,欢迎来到时间财富网
全部需求分类
当前位置:首页 > 多媒体制作 > 图像处理优化常见的问题
图像处理优化常见的问题
2018-3-2 15:00:47   作者:未来,尽在我手中   人气:450次  评论(0)
所属标签: 图像处理 

  当网页加载时,图像本身占每种内容类型平均字节的60%以上。这就是为什么在寻求一个优化,快速加载的网站时,图像优化必须在您的优先列表上。这是开发人员和设计人员在处理图像时遇到的最常见的错误,以及如何解决这些图像优化的问题!

  图像优化解决方案一:使用图像的东西,你可以用CSS做

  有一段时间,CSS规范是非常基本的,图像需要背景,阴影,图标等。但是,所有主要的Web浏览器都支持CSS3,现在可以使您的网站加载并保存更快带宽使用现代CSS技术。

  你需要一个渐变?你可以用纯CSS做到这一点。看上一些图标?不要使用图像图标,但SVGs或图标web字体来代替。

  图像优化解决方案二:使用错误的图像格式

  谈到在线提供图片时,一个很常见的错误是使用错误的格式。让我们总结一下.jpg,.gif并且.png是互联网上三种最常见的图像格式。但这并不意味着你应该使用任何格式。实际上,每种格式都有自己的优点和缺点,正确的格式适合正确的图像格式,这一定会使您在节省带宽的同时加快网站载入速度,同时仍然能够以良好的质量显示图像。

  照片应始终采用.jpg格式。标志或图表?.png是正确的选择。那么.gif呢?只用于非常小的图像,如重复的背景,你不能用纯粹的CSS。GIF在显示简短的循环视频方面非常受欢迎。但是你可知道,一个6Mo .gif图像只有一点点的重量超过300KB的.mp4 格式?

  另一个要考虑的事情是新兴的格式。WebP是由Google创建的一种现代图像格式,它为网络上的图像提供了卓越的无损和有损压缩(比PNG小26%)。到目前为止,WebP在Chrome和Opera中是本地支持的,毫无疑问,其他主流浏览器也将遵循。微软还创建了另一种名为JPEG-XR的现代格式,目前仅支持微软浏览器。

blob.png

  图像优化解决方案三:使用非优化的图像

  作为一个经验法则,您的网站上显示的每个图像都应该进行优化。优化图像的最简单方法是使用Adobe Photoshop的“Save for Web”功能。

  如果您使用的是WordPress,那么您一定要安装WP Smush插件:它会自动优化通过WordPress上传器上传的所有图片,并将其降低到90%,而不会影响质量。它也有一个选项,允许你批量抹掉你以前上传的图像。这个插件绝对是必备的!还有一个插件的高级版本,提供额外的功能和增加的优化。我还没有测试过,但看起来非常有趣。

  图像优化解决方案四:使用浏览器调整大图像!

  您的网站必须适应各种设备和解决方案。虽然让你的网站响应相对容易,处理图像是非常棘手的。

  在所需的最大分辨率下使用一个图像可能非常诱人,然后使用浏览器调整大小来缩小分辨率。浏览器调整大小的问题是,您仍然提供相同的大图像,从而使您的网站长时间在移动设备上加载,浪费带宽以及访问者移动数据。

  解决这个问题的方法是创建相同图像的不同缩略图,并根据客户端分辨率提供正确的图像大小。为此,您可以使用像众所周知的ImageMagick这样的开源解决方案,也可以使用像Cloudinary这样的基于云的服务。


推荐阅读
我们曾经在《设计新手在使用Photoshop时最常犯的错误》一文中介绍了一些设计入门者使用Photo