SVG, PNG and JPG image formats: pros and cons. PNG image - how to open, edit and convert a PNG file Learn more

PNG (Portable Network Graphics), pronounced "ping", is a raster graphics storage format that uses lossless compression. PNG was created to both improve upon and replace the GIF format with a graphics format that does not require a license for use. PNG is an international standard (ISO IEC 15948:2003) and is officially recommended by the W3C.

PNG format stores graphic information in a compressed form. Moreover, this compression is performed without “losses”, unlike, for example, standard JPEG (even with the maximum high level quality).

The PNG format is designed to replace the older and simpler GIF format, and to some extent to replace the much more complex TIFF format.

If we are talking about web design, then compared to GIF it has the following main advantages:

Improved Compression: In most cases the size PNG images less than the same in GIF format.
- More colors in the image: Almost unlimited number of colors in the image, while the limit for GIF is 256.
- Optional alpha channel support: While GIF only supports binary transparency, PGN allows you to achieve an unlimited number of transparency effects through alpha channel support.

As a drawback, it is worth noting, of course, the lack of support for animation, like GIF. Although, of course, there is a similar standard for animation called Multiple-image Network Graphics (MNG), it is not widely used and, accordingly, is not widely supported by modern browsers.

PNG (Portable Network Graphics) is a raster-type graphics format containing an 8-bit color palette. The Deflate compression algorithm developed for PNG files reduces the size of the saved image without losing the quality of the final image.

In this article you will also learn how to open a PNG file.

PNG is the second most popular Internet format after JPG.

Among other advantages it is worth noting:

• interlaced layout;
• built-in software correction of color palette and gamma.

The latter allows you to embed all the necessary display parameters into the image so that it looks the way the author intended on all screens.

The format has 2 versions:

• PNG-8 (index color scheme is similar to that of GIF);
• PNG-24 (full and full color palette simulating JPEG).

In 1995, during the era of the development of the free Internet, the question of the proprietary nature of the complex GIF format suddenly arose. An equally reliable but free and free format was needed for exchanging graphic data in world wide web. At this time, the international W3C consortium presented the PNG 1.0 specifications, approved already in 1996.

The format was created as an alternative to GIF. The latter was “closed” until 2004, that is, it had a number of restrictions for free use (required the owner’s copyright when saving, patent licenses when posting). PNG was deprived of such shortcomings, while implementing support for color depth up to 48 bits and an 8-bit alpha channel for image transmission.

The developers managed to create a smooth transparency of colors that is impossible in GIF. In the latter, the palette is limited to an 8-bit channel (256 colors) and only supports full transparency.

Today, the graphic format can be easily displayed in an Internet browser and standard means to view graphics. To put it in more detail, the picture is as follows: each OS has its own tools for working with the format. Let's take a closer look at how to open the PNG format.

To view files on the Internet, use the following software:

OS Windows family open the PNG format in the following way:

• photo viewer;
• MS Paint;
• web browser (view only).

The mobile OS has the following features:

Mobile cat for Apple works with PNG files using such software.

When it comes to creating images for the web and other digital purposes, which file formats will give you the best results? You have to think about speed versus image quality and size. So, should you use SVG, PNG or JPG?

There was a time when you simply used a JPG to fit the space at 72 dpi and moved on. Not anymore. Screens with high resolution, multiple viewports and the need to have a fast website made the whole thing a much more complex process. Let's look at the pros and cons of each of these formats!

SVG, or Scalable Vector Graphics as it stands for, is incredibly practical. This is why designers use this format more often.

Because SVG is a vector format, it looks great at any size and works for almost any type of image except photography.

SVG is a lossless format, meaning it doesn't lose any data when compressed, displays an unlimited number of colors, and is most often used for graphics and logos on the web, as well as for projects that will be viewed on Retina and other high-resolution screens.

Pros of SVG

• Vector format displays well at any size
• Ability to create simple SVG renderings in code or text editor
• Design and export complex graphics from Adobe Illustrator or Sketch
• SVG text available
• SVG is easy to style and write
• SVG formats are supported by modern browsers and fit for tomorrow
• The format is very compressible and lightweight
• Good for searching due to text format
• Transparency support
• Allows you to save still or animated images

Cons of SVG

• SVG design can get complicated
• Does not display in some legacy browsers
• Limited support for email clients

PNG, or Portable Network Graphics, is a format designed for the web that offers what JPG cannot - transparency. This is why PNG is so popular for downloading elements such as logos for website designs.

There are two types of PNG - PNG-8 and PNG-24. PNG-8 uses a more limited color palette with only 256 colors, has slightly better transparency, and exports to non large size. PNG-24 uses an unlimited color palette, supports transparency, but is exported in a large size. Both types of PNG have lossless compression.

Although PNG formats are similar to GIF, they do not support animation. This format is most often used for icons, small still images, or any image that needs transparency.

Pros of PNG

• Transparency support
• Suitable for images with text
• PNG formats display logos well
• Includes built-in text description for search engines
• PNG-8 has a small file size and is the lightest
• Export without jagged edges

Cons of PNG

• File sizes grow quickly for large files such as images
• Some are old email clients have problems visualizing them
• No animation
• PNG-24 files can be large, which is not ideal for sharing over the Internet

JPG or JPEG is probably the most famous image format. This is the default option for most images because it is convenient for photos thanks to its virtually unlimited color display.

JPG also offers the option to choose how much the image should be compressed, from 0% (highly compressed) to 100% (no compression). Most designers choose something in the 60 to 70 percent range. Images still look good at this compression level, but the file sizes are significantly smaller.

JPG uses lossy compression and does not maintain the original data during compression. Each time a photo is resaved and exported to JPG format, it gets worse.

The JPG format is most often used for images, photographs, and anything that has a large number of colors.

Pros of JPEG

• Great for multicolor and photography
• Easily reduce file size
• Displays consistently across email clients

Cons of JPEG

• No transparency
• Creates jagged edges for text
• No animation
• Lossy format
• Automatic search metadata should not contain alt information

Now that you know what some of the differences are between SVG, PNG and JPG, which one should you use?

You can ask yourself the following few questions to answer this.

Do you need vector or raster format?

Vector: SVG

Raster: JPG or PNG

Do you need transparency?

Yes: SVG or PNG

Are you using a multi-color image?

Yes: JPG or PNG

Is this a big photo?

Does the image contain text?

Is lossless compression important to you?

Yes: SVG or PNG

Do I need to update and reconfigure the graphics?

No: PNG or JPG

Do you use animation?

No: JPG or PNG

All three image formats - SVG, PNG and JPG - have practical and wide application. Although SVG is the latest format and can often be saved to the smallest file size, this is not always the best option.

Think about how you use images in your project, how you choose the file type to find the one that will work best for what you are trying to achieve. You may even find that some projects contain images that use all three file types. This actually happens quite often!

Successful work and creativity to everyone!

Moreover, being a free format, PNG offers various practical advantages over GIF for the web designer:

• Better Compression: For most images, PNG achieves a smaller file size than GIF
• Greater color depth: PNG offers truecolor up to 48 bits, while in GIF we only have a 256 color palette
• Alpha Channel Transparency: Where GIF only offers binary transparency, PNG allows for virtually unlimited transparency effects by offering an alpha channel for transparency

It's worth noting that PNG doesn't allow for animation like GIF does. But there is a Multiple-image Network Graphics (MNG) standard that allows this, but it is not so widely supported by web browsers and graphics editors.

You're probably wondering why PNG isn't such a widely used format on the web if it's as good as advertised. The answer is, in large part, a misconception about the format and browser support for it.

Due to the fact that Internet Explorer 6 or more early versions do not support the full range of PNG features (including alpha channel transparency), people are left to believe (although this is incorrect) that Internet Explorer does not support PNG at all, or at least does not support transparency. In fact, Internet Explorer 5 and 6 support enough PNG specifications to make it functionally equivalent (or better) to non-animated GIF images. All other browsers mentioned, including Firefox, Netscape 6 and above, Mozilla, Opera 6 and above, Safari, and Camino fully support PNG transparency.

Apart from this misconception about browser support built into GIF animation was (and continues to be) the main reason for his success. Although, over the years, the use of GIF has become less and less popular compared to other technologies (for example Flash), which are becoming more suitable for animation.

Transparency - key characteristic GIF and PNG, which is often the reason for a web designer's choice of format to use. Although PNG offers more comprehensive support for transparency, web designers often need to create a GIF version of images to fit older browsers. Using CSS this is possible (and somewhat trivial) by sending GIF images for older browsers and high-quality PNG images to browsers that understand them. But this is double work for a web designer and as a result, people follow the path of least resistance and continue to use GIF images.

So, we've looked at a few reasons why GIF is still so popular, but most of them are based on a misunderstanding of the concepts or using a familiar workflow. Armed with some key knowledge of PNG and how it can be reliably used in browsers, you can take advantage of all the benefits it has to offer.

JPEG is another ubiquitous web format and in most cases, such as photographs (and the like), it is even better than PNG or GIF. PNG is not intended to compete with JPEG. JPEG compression produces significantly smaller files than PNG when working with photos. On the other hand, PNG produces smaller files when there is text, artistic lines, logos, "flat" colors, etc. inside the images.

Now let's look at how to use PNG in web design. I've collected all the files for each example into a separate folder, available on friends of ED.

Over the past few years, the gradient - smooth transition between two or more colors has become a web designer's best friend. Particularly popular are subtle, subtle gradient fills that, without being conspicuous, create a feeling of depth and texture.
Sometimes GIF is the best choice for a gradient. If the gradient is a simple two-color transition, GIF works flawlessly in it. However, GIF's limitation to only 256 colors often creates noticeable and sloppy "banding" among more complex gradient transitions. JPEG, on the other hand, can output some pretty neat gradients, but often at the cost of a larger file size. While JPEG gradients are generally quite good, you need to remember that JPEG uses lossy compression, which means the resulting image will never live up to the quality of the uncompressed image.

The typical background gradient style in question is used for buttons, blocks or just anywhere else. It might look like Figure 5-1. Clockwise from the top left corner, we see the original (uncompressed) image, GIF version, PNG version and JPEG. You can see that the resulting PNG is the smallest size (515 bytes). This is four times smaller than a GIF image. JPEG is slightly larger than PNG at 637 bytes and is also lower in quality due to lossy compression (although the human eye is unable to detect the difference in quality in this simple example remains in question).

Figure 5-1
Photoshop panel - Save For Web,
showing file size differences for the same image in different formats

Sometimes you need to create an image that works the same on different substrates. Some common examples are logos and icons. GIFs have traditionally dominated these situations, but there are several reasons why PNG may be more best choice in this situation. PNG usually wins in file size for logos or some other simple "art". In addition, the inherent transparency of PNG makes simple creation single files that work on top of any background. PNG offers binary transparency like GIF, but also provides the much more desirable option of an alpha channel, in which pixels can be partially transparent instead of just being turned on or off. Using the latter increases the file size, sometimes even larger than a GIF with binary transparency, but it allows for anti-aliasing on the edges of your image and makes it more elegant to place it on top of the background.

However, I reworked their concept using a white image with stencil symbols. They used the white symbol on transparent background, which could generally be quite effective. In this case, your CSS background color would appear in a square or rectangular area around the symbol, instead of the symbol itself.

Both Dan and PJ used a transparent GIF instead of a PNG. This completely covered their needs, and they had to create pixel images to match the style of the icons. Using PNG, you can achieve a similar technique, but with some advantages in the form of anti-aliasing and partial transparency for use in more detailed icons.

I know what you're thinking: all this PNG transparency looks good, but is it practical?

The good news is that all modern browsers fully support PNG images, including alpha channel transparency, the benefits of which I showed in the examples. Safari (all versions), Firefox (all versions), Opera (versions 6 and above), Netscape (versions 6 and above), and Mozilla (all versions) will do everything I ask them to do. But there is one bad news - the only browser that I have not yet mentioned and which most of your users have: Internet Explorer.

Internet Explorer 6 and below does not support the alpha channel transparency built into the PNG format. Ever since the browser choice (or non-choice) was made for most of the many web surfers, this gaping hole has kept web designers away from PNG. But with the release of Internet Explorer 7 we got full alpha support PNG transparency in all major browsers. What's next, are there any ways to work with PNG alpha transparency in Internet Explorer 6 and below? So, if you want to use this effect, nothing can stop you. Internet Explorer 6 and its earlier versions require more attention than necessary, but it is definitely possible.

Internet Explorer comes with various native filters. They are used in CSS, but they are not any part of the official CSS specification. In other words, they are not standardized on the web. Unfortunately, Internet Explorer 6 and below do not fully support the PNG format (which is recommended by the W3C), but Microsoft has a filter that eliminates this shortcoming: AlphaImageLoader.

According to a section on Microsoft's official website, AlphaImageLoader "displays an image within the boundaries of an object and between the object's background and its contents." In other words, AlphaImageLoader loads a PNG image with its full transparency, but it loads it as its own layer, underneath which is the content of the object on which it is applied. PNG images loaded this way act more like background images than foreground images (although they actually "sit" on top of the object's background).

Basically, you can simply apply AlphaImageLoader in CSS on img elements and enjoy the result. The image will be loaded first, the transparency will remain, but then the image will be loaded again - as the front contents of the object - with opaque areas (thus "shadowing" your transparent version).

You can't use a transparent PNG as a background CSS image for an (X)HTML element (say for ) and expect AlphaImageLoader to do the job properly in Internet Explorer. Remember that AlphaImageLoader inserts your image between the background and foreground of the object. So while it will load your image in all its transparent glory, it will also continue to load it as a CSS background image, and without your wonderful translucent pixels.

Let's go back to one of the earlier examples and try to load it correctly in Internet Explorer. Remember Channel 49, the TV station in Topeka? I'm sure yes. Figure 5-21 shows what the site looks like in Internet Explorer 6.

Figure 5-21
The headline 49abcnews.com, rendered in Internet Explorer 6 for Windows, with PNG transparency intact.

The HTML for the weather top part looks like you might have already guessed:

Currently in Topeka, KS:
82° Overcast
Get the forecast and more...

You see an image, and it's definitely a PNG; even Internet Explorer loads it flawlessly. The secret ingredient to this is JavaScript. I actually used a bit of DOM scripting to remove the img element on the fly and replace it with a div element that - you guessed it - uses AlphaImageLoader. JavaScript is described inside conditional comments, another handy but completely non-standardized idiom from Microsoft built into Internet Explorer. Conditional comments allow you to use code only for previously known Internet versions Explorer. The code is ignored by all other browsers, so it does not affect them in any way. In the site element www.49abcnews.com, you will find:

Thanks to the first line, if lte IE6, this script will only be included in the rendered document if it is shown in a version of Internet Explorer less than or equal to (this is indicated by lte) 6. All other browsers, including the newly arrived Internet Explorer 7, will completely ignore this .

So, what's in the JavaScript fixWeatherPng.js file? Let's take a look:

Window.attachEvent("onload", fixWeatherPng); function fixWeatherPng() ( var img = document.getElementById("weatherImage"); var src = img.src; img.style.visibility = "hidden"; var div = document.createElement("DIV"); div.style. filter = "progid:DXImageTransform.Microsoft. AlphaImageLoader(+ src + "", sizing="scale""); Some 49abcnews.com-specific CSS styling omitted for brevity. img.replaceNode(div); )

Let's analyze, step by step, what the script does. First, we tell the browser that we want to execute the fixWeatherPng function when the page loads. The rest of the script is the function itself.

Let's start, first we look for the image with which we will work by its id attribute and save it in the img variable. We save the src attribute (URL to the image file) in the src variable. Then we hide the img element by exposing CSS property visibility to hidden.

As a result, we replace the original img element (which is hidden) with a newly created div element, to which the AlphaImageLoader is successfully attached.

Using DOM scripting to insert your AlphaImageLoader - filtering bits on the fly - has its ugly but necessary downside - incorrect CSS. Moreover, outside of your (X)HTML markup there will be non-semantic div elements. And as long as this is all described inside conditional comments, there is no chance for other browsers to be corrupted by Microsoft's code. (handyblogger: Here Jeff is trying to subtly point out Microsoft's "clumsy" solution)

If you have to do something incorrectly, at least you can extract it and keep it separate from everything else where it is not needed.

PNG, as a graphic format, offers many technical advantages beyond those commonly used in GIFs. In fact, the advantages are so great that PNG could have long ago assumed a dominant position as a non-photo graphics format. Internet Explorer's lack of support for some of PNG's more significant features, such as alpha channel transparency, has as a result deterred many web developers. But there are two very good reasons why you shouldn't be afraid of PNG.

First: even Internet Explorer 6 and its earlier versions almost completely support PNG in a way that GIF can (with the exception of animation, of course). PNG almost always produces smaller files, allowing them to load faster and use fewer resources.

Second: Internet Explorer 7 offers full support for PNG alpha transparency. The effects that can be achieved with the full range of translucent options are virtually limitless. I expect that for designers who find interesting ways to use PNG transparency like the ones described in this article, the door will be opened to a new level of styles never seen before. I've given you some useful ideas of what you can create with PNG transparency, but don't stop there. Look for yourself!

Excerpted from Web Standards Creativity by Cameron Adams, Mark Boulton, Andy Clarke, Simon Collison, Jeff Croft, Ethan Marcotte, Derek Featherstone, Ian Lloyd, Dan Rubin, and Rob Weychert; published by friends of ED. Copyright Jeff Croft 2007. Used with permission of Apress, Inc.