How to perfectly use graphic formats such as JPG on the web

JPEG

JEPG was created in 1992 by the Joint Photographic Experts Group and is named after its creator. JPEG is a lossy raster image format, which means that every time a JPEG is compressed and saved, some information

is irreversibly lost.

JPEG takes advantage of flaws in human eye perception - being more sensitive to brightness than color - using a compression algorithm that discards information we're not very good at getting at, and is therefore a "lossy format". The compression setting will determine the size and quality of the final saved file.

Uses of JPEG

Because JPEG is suitable for brightness and color compression, it is used in photos, and other realistic or shaded images (such as paintings and 3D Rendering) with good results. That's why it has been the most popular format for storing pictures for many years. For the same reason, JPEG is not suitable for vector images, such as logos, geometric figures, screenshots, etc.

#Photos, as well as complex or shaded images such as paintings, are good examples of using JPEG.

Compressed JPEG

As a lossy format, the compression rate of a JPEG file is inversely proportional to the final image quality. When saving a JPEG in a tool like Photoshop, you'll see a quality setting from 0 to 100. Photoshop sets some image quality ranges: Low — 10%

Medium — 30%

High — 60%

Very high — 80%

Best — 100%

Best 100% (61 KB), Very High 80% (29 KB).

##High 60% (16 KB), Medium 80% (7 KB).

Low 100% (6 KB), Minimum 0% (3 KB).

The Web page recommends using JPEGs between 50% and 60% quality, Because it combines good image quality with small file size. Removing metadata can also reduce JPEG file size.
In Photoshop, compression can be accomplished by selecting "Metadata: None" or "Save for Web (Legacy)" in "Export". Blurring all or part of an image will also produce smaller file sizes.

Please note that since JPEG is a lossy format, even saving the same file at 100% quality will result in a reduction in image quality after multiple times because the compression algorithm is applied again and again on the same image. . But this change may not

be shown as a change in file size.

PNG

Portable Network Graphics is also a raster image format that has been around since 1995. It is different from JPEG in that it is a lossless format and is currently the most common lossless

format on the Internet. This means that no information is lost when the file is saved and compressed due to its compression algorithm.

PNG has a lot of cool features like:

Transparency channel - means each pixel can have a different transparency;

8-bit files can use a palette-based color model (also known as indexed color) - meaning the file can be smaller if the number of colors is reduced;

• PNG compression is 25% more efficient than GIF

• 2D interlaced — the image is displayed progressively during loading, rather than only when the image is fully loaded. You must use this option with caution as it increases file size.
• Uses of PNG

PNG is great for line drawings, LOGOs, icons and images with less color. Photos and images with complex colors will generate huge files using the PNG format. Another advantage of PNG is that it supports transparent backgrounds. In this case, even if

is a complex picture, you still need to use PNG, because picture transparency cannot be achieved in JPEG.

PNG can be used well for line works, logos and icons.

Compress PNG

Because the compression algorithm in PNG is lossless, you can selectively reduce its colors and thus reduce the image through external tools size.

For most PNG usage scenarios (line drawings, graphics, icons), 256 colors are sufficient. Therefore, the file size can be further reduced by reducing the number of colors in the palette.

GIF

Graphics Interchange Format is also a bitmap format and appeared earlier than the other formats mentioned in this article. It was created by Steve Wilhite in 1989 and was the most popular 8-bit image format until PNG was created. GIF has similar characteristics to PNG, but has some disadvantages:

only supports 256 colors;
One-dimensional interlacing — the image will Progressive display, but not smooth enough;
Poor compression performance compared to PNG
Binary transparency - pixels can only be 100% transparent or 100 % visible;
Ambiguous pronunciation

##SVG

Scalable vector Graphics (Scalable Vector Graphics) are different from the raster format mentioned earlier. As the name suggests, it is a vector format. This means that it does not store data based on pixels, but instead stores graphics information in the form of recorded coordinates. SVG uses an XML-based semantic tag structure, which is a bit like HTML. Because of the DOM structure, you can get SVG elements by ID and manipulate them. This opens up a lot of possibilities, such as modifying and animating elements or creating responsive graphics using JavaScript and CSS

.

Like other vector formats, SVG images can be enlarged to any size without losing any detail.

Uses of SVG

SVG is widely used in line art, logos, icons, illustrations and data visualization. But it is not suitable for realistic images and complex pictures with many details. In some cases, both SVG and PNG serve the same purpose well. For line art, SVG generally produces smaller file sizes. But this is not inevitable. Depending on how many anchor points the vector image has, it may even generate a larger file than PNG. Where SVG really excels is in data visualization. Since vector animations can be manipulated and created using JavaScript, libraries like D3 offer endless possibilities.

Compressed SVG

In most cases, use Tools such as SVGz (GZipped SVG) are unnecessary to compress SVG files for use in web pages. You can (and should) enable Gzip on the server to achieve compression, although it may have little effect. A better approach would be to reduce file size by removing unnecessary anchors, elements, and attributes from SVG vector graphics. Anchor points draw the vector image, so you need to make sure that the removed anchor points do not affect the final shape of the vector image. If you use Adobe Illustrator to edit your SVG, make sure to save it using Export >Export As... rather than File >Save As... as this produces a minimized file, which of course has other advantages.

#point. In Sketch, be careful not to use unnecessary folders as they will also be saved as extra tags in the SVG.

Cleaning up unnecessary nodes is one way to reduce the size of SVG.

Element tags are all content contained within an SVG file, including opening and closing tags. Vector editing software such as Adobe Illustrator and Sketch may litter SVG with unnecessary elements and attributes. SVG compressor can be used to remove this redundant information.

The above is the detailed content of How to perfectly use graphic formats such as JPG on the web. For more information, please follow other related articles on the PHP Chinese website!