2022-12-18 分类: 网站制作
成都网站制作在现代竞争激烈的网络上,重要的是优化你的网站向访问者展示的图片,无论是你的新标识,案例研究,还是仅仅是你用手机拍下的照片,只想和你的观众分享。
用于显示网页的大多数数据传输由影象因此,通过优化图像大小,网页的加载速度将大大加快。通过减少显示页面所需的字节数,还可以减少访问者等待页面加载所需的时间。对于搜索引擎来说,Web图像优化也是非常重要的,它将优先处理更快的网站加载,特别是在移动设备上。
这篇文章的目的是作为一个基本的指南,为任何人希望网页的网页加载速度更快的网站图像优化。
图像文件格式及其使用您可以在互联网上看到三种主要的图像格式:jpeg、png和gif或gifv。
GIFGIF和GIFV(图形交换格式)可以显示动画,并支持透明性。你可能还记得90年代的业余爱好网页,所有的东西都是带着漂亮的火焰或灯光效果在它们身上移动的。几乎所有的动画都是GIF图像.
今天,我们可以在诸如reddit或9gag这样的网站上找到它们,它们之所以被使用,是因为它们与视频文件相比加载速度快,而且没有声音,而且质量不像内容那么重要。GIFV是一个改进的旧GIF格式,他们支持更长的“视频”或动画。
GIF是好的,实际上是唯一的选择,显示小视频或动画,以及当图像需要透明的部分或背景。
巴新PNG(便携式网络图形)是作为GIF文件格式的替代而创建的。它具有无损压缩,这意味着压缩后不会丢失任何数据,从而确保质量与较小的文件大小保持不变。
例如,PNG还支持与JPEG不同的透明度。PNG支持不同的调色板和灰度,这使得它成为一个理想的解决方案,减少的颜色数,如一个标志,例如,不同颜色的数目通常较低。
当需要透明度或图像只包含少量不同颜色时,PNG图像是理想的解决方案。当图像包含清晰的形状,如打印屏幕或光栅时,最好使用它们。矢量图形.
JPEG或JPGJPEG是一种有损图像压缩格式,它经常被数码相机用来存储图像。JPEG格式可以很容易地处理自然图像的色调和颜色的平滑变化,因为它是为这个特定的用例设计的。它是最常见和最广泛使用的图像格式,因为大多数图片可以非常好地压缩使用JPEG格式。
它的有损特性存在一些缺点,即每次编辑和保存JPEG图像时,压缩算法的每一次迭代都会丢失一些信息,降低图像质量。
Web图像的优化选择正确的格式成都网站制作一旦你知道了最常见的图像格式的优点和缺点,这部分应该是容易的。简单地回顾一下,如果图像中有锐利的边缘和/或它只使用几种颜色,使用PNG 8格式,因为它可以处理256种颜色。如果你的图像有更多的颜色,而且你很喜欢不会失去任何图像质量,您可以使用PNG 24或在极端情况下(大量渐变、圆角和透明)PNG 32。
如果您不介意非常微妙的质量损失,并且您的图片有平滑的变化,如肖像或景观,您可以使用JPEG格式在80压缩级别,或者如果您真的不太关心质量,您甚至可以使用JPEG 65,因为这将大大减少您的图像文件大小。
图像大小使用现代数码相机和手机,可以很容易地制作出12-25兆像素的图像,这些图像可以转换成分辨率非常大的图像,例如4160×3120甚至更高的分辨率。
优化图像的第一步是决定最终图像的分辨率,这可能因网站而异,但您可以使用常识,甚至可以查看竞争对手使用的分辨率。通常,你可以在1200-2000像素的宽度范围内找到图像,它们在更大的屏幕上仍然很好看。
你通常可以使用两个图像大小的真正高分辨率设备,如高端台式机或27英寸iMac有5K屏幕,一个用于正常设备,如高清或富勒高清能力显示器。您可以使用html IMG标记的srcset属性向访问者的浏览器指示图像有不同的分辨率,因此它可以下载适当的图像并显示出来。
调整大小
一旦你有了决议,你可以继续调整你的形象为该决议。成都网站制作
值得注意的是,有不同的模式可以调整图像的大小(最近邻、双三次插值、Lanczos等)。像Photoshop这样的图像编辑器可能会给你不同的方法。在大多数情况下,您可以坚持默认设置,但始终要检查结果映像,并且可以看到任何工件或质量显著下降,您可能希望选择另一种方法。
优化交付在过去的几年里,在图像压缩方面有了很大的改进,特别是对于PNG和JPEG图像。有很多免费和付费的解决方案,将优化您的图像,一些与质量损失和一些没有。
不用说,如果你愿意牺牲质量,你可以得到的图像是高度优化和一个比其他小得多的文件大小。
对于png图像,可以使用pngquant、pngoptim或丁PNG甚至还有Photoshop插件。对于JPEG文件,您也可以使用TinyPNG或ImageOptim.com,这两种方法都提供了非常好的和高度优化的图像,并且它们还删除EXIF数据,如果您不想透露拍摄图像的确切位置或相机手机的模型,这是很方便的,因为这些细节通常存储在与图像相连的EXIF数据中。
如果您使用的是CDN(确实应该使用CDN),请查看它们的界面,因为它们中的大多数都有一个图像优化解决方案,它们可能提供WebP格式的图像,而不是JPEG文件(CloudFlare,MaxCDN),或者它们会动态地优化PNG图像。
除了给你提供优化网站内容的建议外,谷歌的“页面速度洞察力”还为你提供了一个可下载的ZIP文件,并通过这些文件对图片进行了优化。
成都网站制作
分享题目:成都网站制作:Web图像优化基本指南
当前网址:https://www.cdcxhl.com/news/223751.html
网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有网站制作等
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联
猜你还喜欢下面的内容