数字图像处理的位图 和通道
Bitmaps: images composed of induvidual pixels, or “dots” of color, come in three major formats for the web: JPEG, GIF and PNG. Each of these formats has a particular purpose, use, and limitations.
位图：由单个像素或彩色“点”组成的图像以三种主要的Web格式出现：JPEG，GIF和PNG。 这些格式中的每一种都有特定的用途，用途和限制。
GIF(图形交换格式) (GIF (Graphics Interchange Format))
-
Mnemonic:
助记符：
- GIF is for “G IF是对于 Graphics.” G raphics”。 Color depth: 颜色深度：
- 8-bit (256 color)
- 8位(256色) Used for: 用于：
-
GIFformat.GIF格式保存。 在某些情况下， SVG may be considered as an alternative format in some circumstances. SVG可被视为替代格式。
Compression:
压缩：
- GIF. GIF的目标调色板相同。 Optimal settings: 最佳设置：
-
PhotoShop or any other image editor suggests). PhotoShop或任何其他图像编辑器建议的颜色)。
Minimize the number of colors (you can type in and experiment with the number of colors used; it does not have to be what 最小化颜色数量(您可以键入并尝试使用的颜色数量；它不一定是
- Try using the “Restrictive” palette first. “Perceptual”, “adaptive”, “selective” or “greyscale” may also be options. 首先尝试使用“限制性”调色板。 也可以选择“感知”，“自适应”，“选择性”或“灰度”。
- Try to keep “Web Snap” at or near 100%. 尝试将“网络快照”保持在或接近100％。
- Try to keep “Dither” off. 尝试保持“抖动”关闭。
Do not attach metadata unless you are actively using it as a means of captioning the image with PHP or part of a sitemap
- “Transparency” may or may not reduce file size. Experiment with removing the background to the image and turning “transparency” on and off. “透明”可能会减小文件大小，也可能不会减小文件大小。 尝试删除图像的背景并打开和关闭“透明”。
- “Matte” only matters if “transparency” is on. If it is, “matte” should be set to the predominant background color the image will be set against. “哑光”仅在启用“透明度”时才重要。 如果是这样，应将“遮罩”设置为将要设置图像的主要背景色。
Finally, experiment with interlacing. If turning it on reduces file size, leave it on.
最后，尝试隔行扫描。 如果打开它会减小文件大小，请保持打开状态。
Transparency: 透明度：- One color only may be specified as transparent. (Tends to produce “halo” effects when used against colors that are different from its assumed background color.)
- 只能将一种颜色指定为透明。 (当使用与假定背景颜色不同的颜色时，往往会产生“光晕”效果。)
Other features: 其他特性：- Can be animated.
- 可以动画。
JPEG(联合摄影师专家组) (JPEG (Joint Photographers Experts Group))
-
Mnemonic:
助记符：
- PEG is for “ĴP EG是用于 Photographs.” P hotographs”。 Color depth: 颜色深度：
- 24-bit (16,777,216 colors)
- 24位(16,777,216色) Used for: 用于：
- Photographs
- 摄影作品 Compression: 压缩：
-
JPEGs can appear “blocky” at higher compression ratios.JPEG可以在较高的压缩率下显得“块状”。
Optimal settings:
最佳设置：
-
-
Ignore “Low”, “Medium”, “High” pre-settings.
Start the “quality” slider as low as possible. 20 is a good start, but you may be able to go as low as 10 to 15 in some cases.
尽可能低地启动“质量”滑块。 20是一个好的开始，但是在某些情况下，您可能可以降低到10到15。
Don't think of the slider as “quality”, but as compression, with high compression to the left, low to the right.
不要将滑块视为“质量”，而应将其视为压缩 ，向左压缩高，向右压缩低。
Judge the visual quality of the image at normal resolution (i.e. no zoom). If the quality is acceptable, leave the slider position where it is (or even move it down a notch). Otherwise, work the slider up in small increments (steps of 5 or 10) until the quality becomes acceptable.
以正常分辨率(即无变焦)判断图像的视觉质量。 如果质量可以接受，则将滑块位置保持不变(甚至将其向下移动一个缺口)。 否则，以小增量(5步或10步)向上移动滑块，直到质量合格为止。
Do not attach metadata unless you are actively using it as a means of captioning the image with PHP or part of a sitemap.
Ensure that you convert the image to sRGB.
确保将图像转换为sRGB 。
Turn “progressive” on for images greater than 10K in size: it will usually be smaller a smaller file size, and the image will feel like “loads faster” while looking better on high-density displays such as Retina-based Apple devices.
对于大于10K的图像，请打开“渐进式”：通常较小的文件会变小，并且在高密度显示器(例如基于Retina的Apple设备)上看起来更好时，图像看起来就像“加载得更快”。
- “Blur” is not usually required, but may be useful if the image was already blurred to begin with. Higher levels of blur will allow the JPEG compression algorithm to further decrease file size. 通常不需要“模糊”，但如果图像已经开始模糊，则可能会有用。 较高的模糊程度将使JPEG压缩算法可以进一步减小文件大小。
-
PNG(便携式网络图形) (PNG (Portable Network Graphic))
- “ GIF and JPEG met, married, and had a baby named PNG” i.e. PNG combines many of the best features from both formats, as a child can inherit the best qualities of both parents.
- “ GIF和 JPEG相识，结婚并 育有一个名为 PNG的婴儿”，即PNG结合了两种格式的许多最佳功能，因为孩子可以继承父母双方的最佳品质。 Color depth: 颜色深度：
- 8, 16, 24, or 32-bit
- 8、16、24或32位 Used for: 用于：
- APNG format. Often a smaller file size than GIF, and therefore often a better alternative ( APNG格式进行动画处理。 通常文件大小小于GIF，因此通常是更好的选择(另一种可能是 SVG is another possibility). SVG )。 Compression: 压缩：
- Uses a lossless compression algorithm. Tends therefore to have large file sizes.
- 使用无损压缩算法。 因此，倾向于具有较大的文件大小。 Optimal settings: 最佳设置：
- 8-bit PNGs follow the optimization guidelines for GIFs. 24-bit PNGs follow the applicable optimization values for JPEGs.
- 8位PNG遵循GIF的优化准则。 24位PNG遵循适用于JPEG的优化值。 Transparency: 透明度：
- 8-bit alpha mask (256 levels of grey, the same as PhotoShop). Not supported well by Internet Explorer before IE8.
- 8位Alpha蒙版(256级灰度，与PhotoShop相同)。 IE8之前的Internet Explorer不能很好地支持它。
Once you have stepped through the workflow we have discussed: creating the original image in as high a resolution and color depth as possible; saved it in an originals folder in your site; reducing the image size, eliminating excess pixels; and saving the image as a GIF, JPEG or PNG, with optimized settings, you are ready to add the final web-ready image to your page. (You don’t need PhotoShop to optimize images: online resources such as Kraken can also do a good job of compressing your files.)
一旦完成了工作流程，我们将讨论：以尽可能高的分辨率和色彩深度创建原始图像； 将其保存在您网站的原始文件夹中； 缩小图像尺寸，消除多余像素； 并将图像保存为具有优化设置的GIF，JPEG或PNG，就可以将最终的Web就绪图像添加到页面中了。 (您不需要PhotoShop来优化图像：诸如Kraken之类的在线资源也可以很好地压缩文件。)
“格式X怎么样？” (“What About Format X?”)
Occasionally other web image formats are proposed, such as JPEG 2000 and, more recently, WebP. None of these have yet gained a substantive foothold. While WebP is promising, it is not yet supported by the majority of browsers. Until that situation changes, I'll leave coverage of other formats as a side note.
偶尔会提出其他Web图像格式，例如JPEG 2000和最近的WebP 。 这些都还没有取得实质性立足点。 尽管WebP很有前途 ，但大多数浏览器尚未支持它。 在这种情况改变之前，我将保留其他格式的说明。
翻译自: https://thenewcode.com/64/Bitmap-Images-for-the-Web-Formats-and-Optimisation-Options
数字图像处理的位图 和通道
扫一扫
673
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
