The right posture for a large website front end using picture format

Today, images are an integral part of the web. But this is not always the case. It was not until 1993 that Mosaic browser added images to Web content. Some image formats such as GIF and JPEG were already present, and PNG and SVG did not appear until the 90. Images are used for a variety of purposes, such as displaying pictures, brands, illustrations, charts, and many other things.

It is more difficult to choose the right picture format due to the variety of image formats and the wide range of application scenarios. Should the logo choose SVG or PNG? But is it good to choose JPEG or PNG? What is the optimal quality of a file without generating an oversized file? Knowing how each image format works and their pros and cons can help answer these questions.

Over the past few years, a number of research and testing tools in digital design and front-end development have helped us to understand these issues. In this article, I'll show you how each of these formats works, their advantages, and how to compress and save them when using a Web page.

Jpeg

JEPG was created by the Joint Imaging Expert Group (Joint Photographic Experts Group) in 1992 and named after the creator. JPEG is a lossy raster image format, which means that some information will be irreversibly lost each time the JPEG is saved.

JPEG uses the flaw of human eye perception-more sensitive to luminance than color-uses a compression algorithm to discard information that we are not very good at, and therefore belongs to "lossy format". The compression rate setting determines the size and quality of the final saved file. JPEG compression is much more than that, and if you want to learn more about it, you can look at the David Osting (David Austin) article.

Use of JPEG

Because JPEG is suitable for brightness and color compression, it works well on photos, as well as other realistic or shaded images such as painting and 3D rendering. That's why it's the most popular format for storing pictures over the years. For the same reason, JPEG is not suitable for vector images, such as logos, geometry, etc.

Photographs, as well as complex or shaded images such as painting, are good examples of using JPEG.

Compress JPEG

As a lossy format, the compression ratio of JPEG files is inversely proportional to the final image quality. When you save 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% (KB), very high 80% (KB).

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

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

It is recommended to use a JPEG between 50% and 60% quality on a Web page, as it takes into account good image quality and smaller file sizes. Deleting metadata can also reduce the volume of JPEG files. Also like tinyjpg online tools, as well as desktop applications such as Imageoptim (MAC) and RIOT (Windows) can be used to compress pictures. In Photoshop, you can do this by selecting metadata: None or Save as a Web format (Legacy) in export. Blurring the whole or part of an image also produces smaller files, which you can look at if you don't believe it. Note that because JPEG is a lossy format, even if the same file is saved with 100% quality, the compression algorithm is applied again and again on the same image, and the image quality is reduced after multiple times. However, this change may not be shown on changes in file size.

Png

The Portable Network Graphics (portable) is also a raster image format that has been in existence since 1995. It differs from JPEG because it is a lossless format and is the most common lossless format on the web today. This means that due to its compression algorithm, no information is lost when the file is saved and compressed.

PNG has a lot of cool features, such as:

• Transparent channels-meaning that each pixel can have a different transparency;

• 8-bit files can use color palette-based colors models (also known as indexed colors)-which means that if the number of colors is reduced, the file may be smaller;

• PNG compression efficiency is 25% higher than GIF, according to Libpng

• Two-dimensional interlaced scanning-images are progressively displayed during loading, not only when the image is fully loaded. You must use this option with caution because it increases the file size.

For a complete list of PNG more features, history, and technical information, see the Libpng page.

Use of PNG

PNG is ideal for line charts, logos, icons, and images with fewer colors. Complex colors of photos and images using PNG format will generate huge files. PNG Another Y advantage is to support transparent backgrounds. In this case, even a complex picture still needs to use PNG because the picture is not transparent in JPEG.

PNG can be used well in line works, logos and icons. (comic xkcd)

Compress png

Because the compression algorithm in PNG is lossless, you can selectively reduce its color, thereby reducing the size of the image with external tools. Pngquant is a great tool that can reduce file size while keeping the transparency constant. Note that this process creates a 8-bit file that can have a maximum of 256 colors. It may not seem like much, but with so many colors it's good enough to get a better result.

24-bit image on the left (149 KB) and 8-bit on the right, 256-color image (KB)-Reduced by 63.7%

For most PNG usage scenarios (line charts, graphics, icons), 256 colors are sufficient. Therefore, you can further reduce the file size by reducing the number of colors in the palette. Using GUI tools is a good choice, such as Pngyu or Imagealpha, which allows you to preview the generated files. The following example shows how to reduce the palette to 32 colors without significantly compromising quality. In similar cases, images are difficult to compress automatically-because they need to be previewed and tested for best results-with minimal color and minimal file size. Just like JPEG, there are online tools for compressing PNG, such as: Tinypng.

In this example, the logo is reduced from the original 24-bit PNG (ten KB) to 8-bit, 32-color version (2 KB, reduced by 80%), and no noticeable details are lost.

So, what about GIF?

The Graphic Interchange Format (Graphics Interchange Format) is also a bitmap format and appears earlier than the other formats mentioned in this article. It was created by Steve Wilhite in 1989 and is the most popular 8-bit image format before PNG was created. GIF and PNG have similar characteristics, but have some drawbacks:

• Only 256 colors are supported;

• One-dimensional interlaced interlaced-the image is progressively displayed, but not smooth enough;

• Poor compression performance compared to PNG

• Binary transparency-pixels can only be 100% transparent or 100% visible;

• Have ambiguous pronunciation??

GIF is famous for its animations and is widely used. However, even animations can now be done in other ways, with smaller file sizes: For example, using SVG and java,png sequence frames or video. So, unless you have a very specific reason to use GIF, I would recommend PNG or SVG for you.

Svg

The Scalable vector graphic (Scalable Vector graphics) differs from the previously mentioned raster format, as its name implies, as a vector format. This means that it does not store data based on pixels, but rather stores graphical information in the form of record coordinates. SVG uses an XML-based semantic tag structure, which is a bit like HTML. Because of the DOM structure, you can get the SVG elements by ID and manipulate them. This brings a number of possibilities, such as using Java and CSS modifications and animating elements or creating responsive graphics.

Take a look at this example: #1 – Coffee machine –css3 making SVG animations, the author Jonathan Silva (@jonathansilva) published in Codepen read the original view)

Just like other vector formats, SVG images can be magnified to any size without losing any detail. For example, the same icon can be used in a variety of sizes and will look clear in any screen resolution (such as a Retina display) without having to save multiple files.

Vector images (right) to zoom in and out without compromising the image quality

Use of SVG

SVG has a wide range of uses in line art, logos, icons, illustrations, and data visualization. But it does not apply to realistic images and complex images with many details. In some cases, both SVG and PNG are well-designed to achieve the same goal. For line art, SVG can usually generate smaller files. However, this is not necessarily true, depending on how many anchor points the vector image has, it may even generate larger files than PNG. The real good part of SVG is data visualization. Because Java can be used to manipulate and create vector animations, libraries such as D3 provide unlimited possibilities.

Logos, icons and data visualization are excellent examples of SVG use.

Compress SVG

In most cases, it is not necessary to use tools such as Svgz (gzipped svg) to compress SVG files used in Web pages. You can (and should) turn on Gzip on the server for compression, although it may be a handful of effects. A better approach would be to reduce the file size by clearing unnecessary anchor points, elements, and attributes in SVG vector graphics. The anchor points draw the vector image, so you need to make sure that the removed anchor point does not affect the final shape of the vector graphic. If you use Adobe Illustrator to edit SVG, make sure to use export > Export as ... Instead of File > Save as ... To save, as this will generate a minimized file, and of course it has other advantages. In sketch, be careful not to use unnecessary folders, as they will also be saved as extra tags in svg.

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

The element tag is all content contained within the SVG file, including the start and end tags. Vector editing software, such as Adobe Illustrator and sketch, may contain non-essential elements and attributes of SVG everywhere. SVG compressors can be used to remove this extra information. Online tools such as compressor and svgomg can do the job. If you are a developer and are not accustomed to cleaning and compressing SVG, you can use the Auto-execute tool svgo, if you are a designer, you can talk to the developer of the project about SVG optimization by using automated methods to avoid manually completing optimizations.

In the example below, the icon exported from sketch is 1364B in size. Once the same icon is cleaned and compressed, only 460b-is reduced by 66%.

See this example on Codepen: The SVG author Bruno Moulles (Bruno Müller) from sketch (@brunomuler).

Before optimization:

<?xml version= "1.0" encoding= "UTF-8"?>

<svg width= "20px" height= "20px" viewbox= "0 0" version= "1.1" xmlns= "Http://www.w3.org/2000/svg" xmlns:xlink= " Http://www.w3.org/1999/xlink ">

<!--Generator:sketch (36781)-http://www.bohemiancoding.com/sketch--

<title>ic_shopping_cart_black_24px</title>

<desc>created withsketch.</desc>

<defs></defs>

<g id= "Page-1" stroke= "None" stroke-width= "1" fill= "None" fill-rule= "EvenOdd" >

<g id= "artboard" transform= "translate ( -51.000000, -61.000000)" >

<g id= "ic_shopping_cart_black_24px" transform= "Translate (50.000000, 59.000000)" >

<g id= "Group" >

<path d="M7,18 C5.9,18 5.01,18.9 5.01,20 C5.01,21.1 5.9,22 7,22 C8.1,22 9,21.1 9,20 C9,18.9 8.1,18 7,18 Z M1,2 L1,4 L3, 4 l6.6,11.59 l5.25,14.04 c5.09,14.32 5,14.65 5,15 c5,16.1 5.9,17 7,17 l19,17 l19,15 l7.42,15 C7.28,15 7.17,14.89 7.17,14.7 5 l7.2,14.63 l8.1,13 l15.55,13 c16.3,13 16.96,12.59 17.3,11.97 l20.88,5.48 c20.96,5.34 21,5.17 21,5 C21,4.45 20.55,4 20,4 L5.21,4 L4.27,2 L1,2 Z M17,18 C15.9,18 15.01,18.9 15.01,20 C15.01,21.1 15.9,22 17,22 C18.1,22 19,21.1 19,20 C19,18.9 18.1, 17,18 Z "id=" Shape "fill=" #000000 "fill-rule=" nonzero "></path>

<polygon id= "Shape" points= "0 0 0 0" ></polygon>

</g>

</g>

</g>

</g>

</svg>

Optimized SVG:

<svg height= "viewbox=" 0 0 "width=" xmlns= "Http://www.w3.org/2000/svg" >

<path d= "M7 18c-1.1 0-1.99.9-1.99 2s5.9 7 22s2-.9 2-2-.9-2-2-2zm1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1 .1.9 2 2 2h12v-2h7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1h5.21l-.94-2h1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z "/><path d=" M0 0h24v24h0z "fill=" None "/>

</svg>

The right posture for a large website front end using picture format