This is the 25th day of my participation in the August Challenge.

Color depth

Color depth standards are usually the following:

  • 8 bit color, each pixel can display the number of colors is 2 ^ 8, namely 256 colors.
  • 16 bit enhanced color, 16 bit color, each pixel can display the number of colors for 2 power 16, that is, 65536 kinds of colors.
  • 24-bit true color, each pixel can display the number of colors is 24 bits, that is, 2 to the 24th power, about 16.8 million colors.
  • 32-bit true color, that is, on the basis of the 24-bit true color image, an Alpha channel is added to express the transparency information of the image. 32-bit true color is not 2 to the power of 32 colors, it is actually 16.77 million colors, but it adds 256 shades of gray, for the sake of name, it is designated as 32-bit color

The classification of the figure

Raster and vector images

For pictures, generally divided into raster map and vector map.

  • Raster: An image based on pixel pixels. JPEG, PNG, webP, etc
  • Vector drawing: Uses geometric shapes such as points, lines and polygons for composition, with high resolution and zoom capabilities. SVG is a vector graph.

No compression, lossless compression, lossy compression

Another classification

  • No compression. The uncompressed image format does not compress the image data and can accurately present the original image. The BMP format is one of them.

  • Lossless compression. Compression algorithm for all the data of the image encoding compression, can ensure the quality of the picture while reducing the size of the picture. PNG is an example of this.

  • Lossy compression. The compression algorithm does not compress all the data of the image, but removes the details that the human eye cannot recognize during the compression. So lossy compression can greatly reduce the size of an image with the same image quality. The representation is JPG.

Front end 9 picture formats

The birth of time

For programmers over 30 years old, they are very young, it is really a good time!

What were people doing 85 years ago?

  1. GIF – 1987
  2. Base64- 1987
  3. JPEG – 1992
  4. PNG – 1996
  5. SVG – 1999
  6. JPEG2000 – 1997 to 2000
  7. APNG – 2004
  8. WebP – 2010

Ico: 1985?? According to the documentation, the ICO file format was born with the Release of Windows 1.0.

GIF

GIF is an indexed color mode image, so each GIF frame can display up to 256 colors. GIF can support animation, also can support background transparency, this even the old IE6 support, so in the past to use transparent background images in projects, one of the solutions was to generate GIF images.

Advantages:

  • Supports animation and transparent backgrounds
  • Good compatibility
  • Grayscale images perform well
  • Support interleaved portions of the received files can be displayed at lower quality. This is especially useful when the network connection is slow.

Disadvantages:

  • Supports up to 8 bits 256 colors, color level transition is poor, the picture has a sense of granularity
  • Transparency is supported, but translucency is not supported. There are miscellaneous edges

Applicable scenario

  • Logo, icon and wireframes with simple colors are suitable for GIF
  • animation

JPG/JPEG

Here’s a question: what’s the difference between JPG and JPEG

Most of the static images we see are in this format. This format of pictures can better display a variety of colors, mainly in the compression of distortion, but also because of this, created this format of light volume.

advantages

  • High compression rate
  • Good compatibility
  • Color is rich

disadvantages

  • JPEG is not suitable for storing high definition images such as corporate logos and wireframes
  • Animation and background transparency are not supported

JPEG 2000

JPEG 2000 is an image compression standard based on the wavelet transform, created and maintained by the Joint Photographic Experts Group. JPEG 2000 is generally considered the next generation image compression standard to replace JPEG (based on DCT) in the future. JPEG 2000 files usually have a.jp2 file name and a MIME type of image/jp2.

JPEG2000 has a higher compression ratio and does not produce the blocky blur defects of the original DCT based JPEG standard. JPEG2000 supports both lossy and lossless compression.

Can is use-PNG2000 supports 18%.

advantages

  • Support lossy and lossless compression

disadvantages

  • The approval ratings are too low

ICO

The ICO (Microsoft Windows Icon) file format is designed by Microsoft for desktop ICONS in Windows. Web sites can provide an icon called favicon.ico in the root directory of the site, an icon displayed in the favorites menu, and some other useful signature web site representations. An ICO file can contain multiple ICONS and start with a directory listing the details of each icon.

It is mainly used to make website ICONS, now PNG can also be used to make website ICONS.

PNG

There are three versions of the PNG format, pnG-8, PnG-24, and PnG-32, all of which do not support animation. Png-8 and GIF similar properties are similar, both are indexed color mode, and both support background transparency. Relatively better than GIF format features with transparent background, image edge no noise, color performance is better. Png-24 is essentially a lossless compressed JPEG. Png-32 is based on PNG-24, added transparency support.

If there is no animation requirement, pNG-8 is recommended instead of GIF

advantages

  1. Compress the image file size as much as possible without losing authenticity
  2. Pixel rich
  3. Support for transparency (Alpha channel)

disadvantages

  1. File size

As an added bonus, GIF and JPG have progressive, PNG has interlacing, which allows you to see the full picture before downloading the image completely.

For details, see online examples: PNG normal, PNG interlaced, JPG progressive

APNG: Animated PNG

APNG (Animated Portable Network Graphics), as its name suggests, is an animation format based on the PNG format extension, which adds support for Animated images, 24-bit images and 8-bit Alpha transparency. This means animations will be of better quality. It was created as a replacement for the older GIF format, but it is not officially approved by the PNG organization.

From Can I Use, chrome, Firefox and Safari are all supported except IE series. In 2021-08, support reached 94%.

As opposed to GIF

  • Color is rich
  • Support transparent
  • Backwards compatible PNG
  • Support for animation

disadvantages

  • The generation is cumbersome
  • Not standardized

webP

Lossy WebP images are, on average, 25-35% smaller than JPEG images with visually similar compression levels. A lossy WebP image is typically 26% smaller than the same image in PNG format. WebP also supports animation: in lossy WebP files, image data is represented by a VP8 bit stream, which may contain multiple frames.

These include small size, adequate color presentation, and support for animation. Is the heart of the perfect goddess!!

According to Can I Use-Webp, 95% approval rating. The main reason is that Safari versions are incompatible with IE versions.

advantages

  • The same mass is smaller
  • There is no significant change in mass after compression
  • Lossless image support
  • Support for animation

disadvantages

  • Compatibility, as opposed to JPG, PNG, GIF

SVG

SVG is an XML-based vector graphics format that specifies the content of an image as a set of drawing commands that create shapes, lines, apply colors, filters, and so on. SVG files are ideal for charts, ICONS and other images that can be accurately drawn in any size. SVG is therefore a popular choice for user interface elements in modern Web design.

advantages

  • Scalability You can make them as big or as small as you want without sacrificing quality
  • Small Svg is much smaller on average than GIF, JPEG, PNG, even at very high resolutions
  • Support animation more flexible, unmatched quality
  • Svg can be manipulated directly using HTML, CSS, and JavaScript (such as animation)

disadvantages

  • High SVG complexity can slow down rendering
  • Not suitable for games such as high interactive animation

base64

Image Base64 encoding can encode a picture data into a string, using the string instead of the image address, the image is downloaded to the local along with HTML, no longer consume a separate HTTP to request the image.

advantages

  • No additional request
  • For very small or very simple images
  • Can be used as a single image, such as background image reuse, etc
  • No cross-domain issues, no caching, headers, or cookies to worry about

disadvantages

  • It will be at least 1/3 larger than other formats
  • Encoding and decoding costs extra

Some contrast

PNG, GIF, JPG comparison

Size comparison: usually, PNG ≈ JPG > GIF 8 bit PNG can completely replace GIFCopy the code
Transparency: PNG > GIF > JPGCopy the code
Color richness: JPG > PNG >GIFCopy the code
Compatibility: GIF ≈ JPG > PNGCopy the code

GIF, JPG, PNG, Web pros and cons and usage scenarios

format advantages disadvantages Applicable scenario
gif Small file, support animation, transparent, no compatibility problems Only 256 colors are supported Simple color logo, icon, GIF
jpg Rich colors, small files Lossy compression, repeatedly save the picture quality decreased significantly Colorful pictures/gradient images
png Lossless compression, support transparency, simple picture size is small Does not support animation, colorful pictures are large in size The logo/icon/transparent figure
webp File small, support lossy and lossless compression, support animation, transparent Browser compatibility is relatively poor Support webP format app and WebView

Write in the last

If you think it is good, your likes and comments are the biggest motivation for me to move forward.

Technical group please come here. Or add my wechat Dirge-Cloud and learn together.

reference

Image file type and Format guide JPEG_2000 APNG – Wikipedia Can I use – APNG GIF, JPG, PNG, webp APNG, GIF vs APNG vs webp