用于网站的最佳图像格式 – PNG，JPG，GIF和WEPP

技术教程 2022年3月9日
936 0

图像优化开始为您的需求选择最佳文件格式.这超出了PNG与JPEG.没有一种文件格式来统治它们.

每个人的图像需求都不同，即使单个站点内的不同图像也有不同的要求.但不用担心，我们让你覆盖了.

在这篇文章中，我要教你如何选择WordPress网站的最佳图像格式.我们将浏览旧收藏夹，JPEG，PNG和GIF以及一些像WEBP和SVG的下一个Gen.我们将介绍其优势，劣势和理想的用例，因此您可以像专业版一样优化您的图像.我还汇集了一个可下载的PDF作弊表，让您能够参考！点击此处获取您的副本

继续阅读，或使用下面的链接跳到特定部分.

  • 尺寸会影响速度，速度很重要

    • 选择最佳文件大小



    • 如何压缩图像:损失VS无损
  • jpeg

    • JPEG压缩



  • JPG与PNG

    • pngs
    • 三种PNG


  • webps
  • 两个图像图形类型

    • 的故事

  • svgs

    • 到svg或不到svg?


  • gifs
  • 最佳文件大小是最小的

Image file format infographic 使用smull指南到文件格式，为图像找到最佳文件类型.

尺寸会影响速度，速度事实

为什么选择正确的文件格式重要?因为越来越多的访客正在访问移动设备上的网站.与专用网络相比，网络速度不仅相对较慢，但不是每个人都有无限数据.

以来，由于谷歌通过在搜索结果中显示较低，因此通过较低的速度来惩罚加载的页面，从而提高负载时间是增加流量，销售和转换的无意识.

当您选择错误的图像格式时，您可能会无意中为更大的图像提供比所必需的更大.附加图像文件功能(如透明度)，不必要的细节和太多颜色都将膨胀添加到图像.有时，这些是必要的，其他时间不是.例如，如果您的图像没有透明度，那么如果您选择不支持透明度的图像类型，您将实际上没有给出任何内容.

关键是只添加所需的内容.

选择最佳文件大小

您还需要考虑与其余的网页相关的图像，以便选择最佳文件大小.平均网页目前在2MB附近，因此您希望保持在该限制下，以具有相对较快的网站.这意味着您必须查看您网站上所有资产的总数，而不仅仅是图像.

如果它是具有主要文本的页面上的唯一图像，那么1MB的大型英雄图像将不会是一个大的交易;但是，如果您要在页面上显示10个大图像，那么它将是一个遥控的速度.您可以通过显示更少的图像或以更小的尺寸显示它们来妥协.

如何压缩图像:损耗VS无损

为了选择理想的图像格式，您需要了解有损和无损压缩之间的差异.理想情况下，您的图像应该利用这两种算法过程，以产生最小的文件大小.并非所有格式都支持两者.

损失压缩，您的一些数据将永远丢失.有损图像压缩永久地删除图像数据并降低过程中的图像.

这并不像听起来那么糟糕，因为一些额外的细节可能甚至不能察觉到人眼.

无损图像压缩，相比之下，保留数据，所以没有丢失.无损算法保留所有必要的数据以确切地重新创建图像.

理想情况下，您的图像将首先通过有损压缩阶段，然后是剩余的阶段将被优化.

WordPress的图像优化的终极指南

JPEG

JPEG代表联合摄影专家组，旨在用于照片.作为大多数消费者数码相机和手机的标准文件格式，您几乎发现它到处都是它.

JPEG有几个优点:


  1. JPEGS可以包含数百万种颜色，因此它们产生丰富，生动的图像
  2. 它们产生了相对较小的文件大小，即使是如此多的颜色

    3. 他们支持所有现代浏览器.

否奇迹jpeg是web的流行文件格式.

由于JPEG为静止照片设计，因此它不支持透明度或动画.

jpeg压缩

jpegs利用有损压缩来保持文件大小.

jpeg压缩不是全部或全无的设置.您可以将0％(重质压缩)的压缩比调整为100％(无压缩)以为您的情况创建理想的平衡.

一般来说，压缩75-100％之间的图像将保持图像的完整性和高质量，但图像为75％，图像为一半.一半！这就是为什么大多数社交网络压缩它们在70-85％之间的图像.Facebook例如，压缩您的图像85％.

因此，当您在Adobe Photoshop或Lightoom准备图像时，不要害怕移动该滑块.

只是看看这两个图像.一个尚未压缩，是229k，而另一个已经被压缩了75％并且是95k.

Photo of mountain scenery with compression 选项1

你能告诉哪一个?

Photo of mountain scenery with no compression 选项2

有一种名为JPEG-2000的无损JPEG格式，但它没有被广泛采用.

此外，您应该始终避免重新按压压缩图像.您是否曾在社交媒体上下载过复印，或下载并重新挂载图像?质量扭曲，因为你正在经历另一轮压缩.

(顺便说一下，选项1是压缩图像)

如何优化，调整大小和使用WordPress

的缩放图像

JPG与PNG

JPEG是具有高对比度的图像的弱点.这就是为什么JPEG屏幕截图在白色背景上的黑色文本往往是模糊的.

jpeg是照片的理想图像文件类型，尤其是没有文本的图像文件类型，当较小的图像文件优先考虑图像质量时.例如.大英雄图像，突出显示专业摄影

JPEG显着小于PNG.我们作为PNG的风景的形象是329K，这几乎是压缩版本的差不多3.5倍.

Mountain Scenery 这是同一图像的PNG版本，仅为329kb

pngs

让我们潜入Web的其他最喜欢的图像文件类型，PNG.由于许可问题，PNGS旨在取代GIF，因此功能性相似之处.

PNG的强度是其无损压缩算法.在压缩过程中不会丢失任何数据，因此可以在没有质量损失的情况下重新创建图像.因此，PNGS即使在文本方面也保持了图像中的细节.缺点是由于所有这些数据，PNG文件大小往往是相对于其他图像文件类型更大.

另一个优点是支持透明度.您是否可以使用透明背景创建徽标文件，但您还可以使用PNG创建高级透明度渐变等.

三种pngs

有三种PNG:PNG-8，PNG-24和神秘的PNG-32.从技术上讲，还有动画的pngs，但我们不会进入那个，因为它们尚未得到广泛支持.

Png-8就像PNGS的GIF.PNG-8支持256个索引颜色，但在更小的文件大小，甚至小于其JPEG等价物.与GIF不同，PNG-8有糟糕的动画支持.PNG-8非常适用于具有透明背景的简单Web图形，例如徽标和站点图标.

虽然PNG-8支持8位颜色，PNG-24支持24位颜色，这意味着支持1600万种颜色.yas！ PNG-24更像是JPEG，但文件大小明显更大.但是，即使在放大时，PNG-24的图像质量也是优秀的，这使其成为电子商务照片以及屏幕截图或具有文本的图像.

Screenshot of Photoshop Save As Dialog box Png-32没有选项，可能是通过设计所以人们不使用除非他们需要这些能力

如果在photoshop 保存中为web 对话框中创建pngs，则不会看到列为选项的PNG-32，但如果您，您的PNG将被静默转换为PNG-32添加支持透明度.为什么?

PNG-32S支持24位颜色，具有额外的8位alpha通道，可用于高级透明度功能.PNG-32S旨在具有创建具有透明梯度的高级图像的能力.

这些高级功能意味着PNG-32会产生更大的文件大小.如果您未创建需要复杂的透明度的图像，请与PNG-24一起粘.如果您正在创建图像覆盖，则将其逐渐消失，然后这是PNG-32的作业.

您可以在此处看到一个例子.我在Photoshop中创建的图像具有透明渐变，具有两种颜色，可从完全不透明度逐渐消除以完成无色透明度.为了说明这一点，我通过使用style="background: #222"使图像黑色后面的背景.

image of a transparent gradient png-32/166kb

您可以看到黑色背景如何影响图像的显示方式，因为它使整个渐变中的颜色变暗.

image of a transparent gradient with gradient not appearing correctly png-8/37kb

对于上面的PNG-8，这种效果扭曲.PNG-8图像仅支持一个级别的透明度，因此透明度仅出现在顶部的薄扭曲频段中.

webps

如果您可以将最好的PNG和JPEGS结合起来，这不会很好吗?谷歌认为同样的事情并发明了开源webp格式.

webp可能只是在优化图像时最好的保守秘密之一.youtube和eBay等巨大网站已经开始使用它在低位下，以改善现场性能.

有两种webp图像.一个人只是被称为 webp 并使用有损压缩.您可以将此视为WebP格式的JPEG版本.当您在Photoshop等程序中创建有损WPP时，您将获得压缩率.

其他版本称为 webp无损，它更像是一个png.您将获得更高的文件大小，但您不会丢失细节.

这两种WPP格式都会产生远小于其JPEG和PNG对应的图像.多少?

根据Google的数据，平均而言，WPP图像比比较的JPEG小25-34％，比相当的PNG小于比较的26％.

这很巨大！那么为什么我们都没有切换到WebP图像?

好吧，这是坏消息.尽管WebP在2010年逐步踩到图像场景，但Firefox和Safari并不支持它.Safari仍然没有，虽然现在Firefox爬上船上很可能只是时间问题.所以目前，WPP不是一个完全浏览器支持的解决方案.

您可以通过为使用浏览器的访问者提供无需支持WPP的访问者来解决此限制.

为为WordPress创建这些Cool WebP文件，您可以使用插件来为您执行此操作.实际上，Smul Pro CDN将图像转换为WEPP.如果有人在支持WebP的浏览器上访问您的网站，Smull将转换图像并提供WebP图像.如果他们在一个不支持webp的浏览器上，他们会得到您的日常jpeg或png.

两个图像图形类型

的故事

有两种类型的图像图形，矢量和光栅.

矢量图像是从一系列点由线路和曲线连接的一系列点来形成几何形状.使用向量图形，图像可以调整为任何形状，大或小而不损坏图像的质量.

相比之下，光栅图形包括布置在网格上的像素，每个像素表示颜色.光栅图形只出现在要显示的分辨率下的高质量.如果图像缩放到较大尺寸，则会发生像素.

svgs

让我们直接得到一件事，svgs实际上不是图像文件格式.SVG是一种标记语言，允许您创建二维图形.svgs比pngs或jpegs更像html.

svgs在技术上是基于XML，可以用JavaScript和CSS进行操作和动画.只是看看这个令人敬畏的英雄形象.

svgs也是独一无二的，因为与我们遵循的图像格式不同，它们会创建矢量图像.这意味着图像是无限的可扩展性的，看起来擅长所有分辨率.这使得它们适应不同的设备.

您将无法获得其他图像文件类型中发生的像素.但是，由于SVGS旨在基于几何形状显示简单的图像，例如徽标，标志，图表和图标.他们对摄影不起作用.

您可以在矢量程序中创建SVG，例如Adobe Illustrator，Inkscape，Vectr，SVG-Edit或草图.如果您创建简单的图像，则产生的文件大小将远小于PNG，JPEG或WebP图像，即使在高分辨率下也是大图像.复杂的SVG文件将否定这些优点.

即使它是一个标记语言，google索引svgs，所以它们出现在图像搜索中.它们与所有浏览器兼容.

to svg或不为svg?

如果我在SVG上销售你，你试图在阅读这篇文章时尝试将一个上传一个到WordPress，你可能已经注意到WordPress不允许SVG出于安全原因.

但WordPress不是唯一的一个.媒体，Tumblr和Facebook等社交网络也不允许SVG.

您可能会尝试解决此问题并修改功能文件以允许SVGS，但我不会推荐它.由于SVGS区域是一个标记语言，它们是对恶意软件注入开放的.如果您是一个网站管理员，并且您启用SVG，但您的网站的作者和贡献者不了解风险，他们可以在不知道的情况下上传受损的SVG文件.

如果您决定安装插件以允许SVGS，那么您应该只从您信任的人中上传SVG，并限制将SVG上传到了解如何安全地上传SVGS的人.

gifs

我已经保存了最后一个最臭名昭着的文件类型.虽然非常适合以具有讽刺意味的糟糕的方式动画笑话，但这些日子里的GIF对别的东西不好.

你想知道一些会吹脑的东西吗? Twitter上的动画GIF甚至不再GIF！它们是Webm文件.

因为事实是，GIF绝不为动画设计.它们产生异常大的文件大小.框架越多，它变得更糟.如果切换到WebM文件，您可以使用一个文件更小，质量更高的文件.MP4S是与所有浏览器兼容的另一个可行选项.

GIF具有256种颜色的有限色板，并使用无损压缩.但是，Do PNG-8文件，并以更小的文件大小，它们也有透明度.

所以你也许是GIF的唯一用例是当您尝试与不支持HTML 5的旧浏览器兼容的东西时，看起来不符合目的或怀旧效果.

加速WordPress的终极Mega指南

最佳文件大小是最小的

在您的网站上使用图像来实现您的观点，那么1000字不便宜！他们需要很多资源来服务.最好的方法是选择给您提供所需的文件格式，而且更多.

diagram summarizing capabilities for JPEG, SVG, PNG, WebP and GIF 这里是一个快速功能回复

WordPress尝试通过自动压缩图像来帮助图像优化部门，但它没有多大.为此，像Smush Pro这样的专用工具可以节省大量时间，并将图像快于您认为的速度快.

当我正在编写这个帖子并了解网页图像，压缩和其他图像优化技术时，我很高兴使用我的新发现的知识来改善我的个人网站.我即将读取关于如何在我了解到Smush Pro的情况下如何创建WebP图像的冗长教程.

我也激活了Smuld CDN并看到了我的页面加载时间来掉下来.在Smul Pro加载图像之前在某些页面上花费3秒钟，但在转换为WPP和使用Smush CDN之后，事情将在秒内加载.我被吹走了.

你可以尝试闪闪发光.继续，看看它为您的网站提供了多少差异.

jpeg(1)png(1)图像(37)
♥赞11

相关文章

发表回复