何时使用jpg、gif、png和svg格式
web上常见的图像类型示例包括GIF、JPG和PNG。SVG文件。这些不同的格式为网页设计师提供了各种选择，以优化网站的视觉吸引力。
gif图像
将GIF文件用于具有少量固定颜色的图像。GIF文件的唯一颜色始终不超过256种。GIF文件的压缩算法没有JPG文件复杂，但当用于平面彩色图像和文本时，它生成的文件大小非常小。
GIF格式不适用于摄影图像或具有渐变颜色的图像。由于GIF格式的颜色数量有限，因此在保存为GIF文件时，渐变和照片最终会出现带状和像素化。
jpg图像
将JPG图像用于具有数百万种颜色的照片和其他图像。它使用了一种复杂的压缩算法，允许您通过丢失一些图像质量来创建更小的图形。这被称为“有损”压缩，因为压缩图像时会丢失一些图像信息。
JPG格式不适用于具有文本、大块纯色和具有清晰边缘的简单形状的图像。这是因为当压缩图像时，文本、颜色或线条可能会模糊，导致图像不像以其他格式保存时那样清晰。
png图像
PNG格式是作为GIF格式的替代品开发的，当时GIF图像似乎要缴纳版税。PNG图形比GIF图像具有更好的压缩率，这导致图像比保存为GIF的同一文件更小。PNG文件提供alpha透明度，这意味着您可以拥有完全透明的图像区域，甚至可以使用一定范围的alpha透明度。例如，放置阴影使用一系列透明效果，并且适合PNG（或者您可以使用CSS阴影代替）。
PNG图像与GIF一样，不适合用于照片。可以绕过影响使用真彩色保存为GIF文件的照片的带状问题，但这可能会导致非常大的图像。老式手机和功能手机也不太支持PNG图像。
svg图像
SVG代表可缩放矢量图形。与JPG、GIF和PNG中基于光栅的格式不同，这些文件使用矢量创建非常小的文件，这些文件可以以任何大小渲染，并且不会损失文件大小增加的质量。它们是为图标甚至徽标等插图而创建的。
准备用于web交付的图像
无论您使用哪种图像格式，请确保该网站上的所有图像都已准备好用于web交付。过大的图像可能会导致站点运行缓慢并影响整体性能。为了解决这一问题，必须对这些图像进行优化，以便在高质量和该质量级别的最低文件大小之间找到平衡。
选择正确的图像格式是战斗的一部分，但同时确保您已准备好这些文件是这一重要web交付过程的下一步。
- 发表于 2021-09-04 22:50
- 阅读 ( 134 )
- 分类：IT
你可能感兴趣的文章
知道何时使用哪种文件格式：png与jpg、doc与pdf、mp3与flac
在计算机上保存文件时，是否注意到“名称”字段下面的下拉框中的几个字母？这些是文件扩展名，用于定义文件另存为哪种格式。一种类型的文件很少有单一的格式，因此您可能会对它们的不同之处以及最好使用哪种格式感到...
jpg与jpeg：这些图像文件格式之间有什么区别？
...（不仅仅是图像）的更多信息，请参阅我们的指南，了解何时使用哪种文件格式。 ...
如何制作矢量图像：5个在线工具
...形和插图工作。如果要将现有图像转换为矢量文件，可以使用各种在线工具。 ...
如何将microsoft powerpoint幻灯片保存为图像
...中有用的幻灯片，您可以将该幻灯片另存为图像并相应地使用它。下面介绍如何将Microsoft PowerPoint幻灯片保存为图像。 首先，打开PowerPoint，在缩略图窗格中，单击要另存为图像的幻灯片。选定幻灯片后，幻灯片周围会出现一个...
如何将googleslides对象保存为图像
...slides演示文稿中导出图像或幻灯片等对象，但您可能需要使用一些变通方法。当然，过程会根据您要保存的对象的类型而变化。下面是方法。 将幻灯片另存为谷歌幻灯片中的图像 如果要将Google幻灯片演示文稿中的单个幻灯片...
如何将图像转换为png格式
...它最早是在20世纪90年代作为GIF的开放替代品开发的，GIF使用专有的压缩算法。PNG免版税。 PNG支持8位和24位颜色，就像GIF和JPG一样。它们也被认为是无损文件，这意味着无论您打开和保存文件多少次，它们的质量都不会降低。 相...
illustrator和photoshop有什么区别？
...Photoshop是一个“基于光栅的”编辑应用程序，而Illustrator使用“矢量” 基于光栅的编辑应用程序使用像素创建图像。数百万个不同颜色的像素组合在一起构成了这幅图像。放大时，可以看到单个像素，但从远处看，它们是不可见...
什么是svg文件，如何打开？
...表“可缩放的矢量图形”。SVG文件是一种计算机文件，它使用万维网联盟定义的SVG标准来显示图像。 典型的图像格式，如JPG、PNG和GIF使用光栅图形，这意味着它们通过存储一个像素网格（称为位图）来显示图像。每个像素的颜...
了解何时在此图形中使用jpeg、gif或png
...这取决于文件大小是否是一个问题。了解您的文件类型：何时使用JPEG、GIF和；PNG |谁将通过DesignTAXI主持此活动
位图(bitmap)和矢量(vector)的区别
...造力，更容易迅速有效地向更多的受众传达信息。此外，使用图形创建的视觉效果可以比一组文字更方便地表达想法。很少有图形包括图像、地图和科学插图。位图和矢量是两种主要的图形类型。 覆盖的关键领域 1.什么是位图...
0 篇文章
