Web Optimize Png

Optimizing PNG files is a matter of reducing colors, maximizing repeated pixel areas, minimizing drop-shadows, and controlling any smooth transitions with a judicious application of dithering. With specialized tools you can reduce source images to a fraction of their original size and still maintain acceptable quality. Compressor.io: Compressor is a very useful online tool for optimizing your images. It supports JPG, PNG, SVG and GIF, and offers both lossy and lossless image compression. Compressor.io can provide up to 90% file size reduction. Faster web pages and apps. Reduces image file sizes — so they take up less disk space and down­load faster — by applying advanced compression that preserves quality. Image files scrubbed clean. Removes invisible junk: private EXIF meta­data from digital cameras, embedded thumbnails, comments, and unnecessary color profiles. Best tools with drag'n'drop.

1. Reduce Png File Size
2. Png Shrinker

Once upon a time, there was the mighty GIF image format, the most popular type of image compression for web graphics. Then, it was announced that software programs using GIF would require a license (this was because of the Unisys patent for the LZW compression method used in GIF). This change sped up the development for its successor: the PNG format. PNG, which stands for Portable Network Graphics, gained popularity and, nowadays, it's probably the most used image format when it comes to web design, alongside JPEG.

In this guide, we will cover everything you, as a web designer, need to know about the PNG image format.

Understanding Digital Image Formats

There are many digital image formats available for you to use, but only some of them are optimized for web use. For example, the TIFF image format is not designed for web use; it's used for printing. Examples of image formats for the web are JPEG, PNG, GIF, and SVG.

Why are certain image formats suitable for the web, while others aren't? Because images on the web must be optimized and highly compressed so that they don't get too huge.

Some digital image formats, especially those designed for print (such as TIFF) are so unnecessarily high in resolution, metadata, and color-richness — which all become irrelevant when viewed in computer monitors — that they are too big in file size for web use.

Compression Methods

There are two general kinds of image compression methods: lossy and lossless.

Lossy compression is when the compression algorithm being used results in some loss in data. This means that you will not get the exact same image as the original if you try to decompress it. The data loss, in most instances, is done in such a way that you don't lose too much quality; at least not enough that people will notice.

On the other hand, lossless compression is the opposite of lossy. Lossless compression involves compression algorithms that when decompressed, will get you exactly the same image as the original. An example of lossless compression is when you are zipping up a document using the ZIP format. When you unzip your document, it will be the same as the original.

PNG uses a lossless compression algorithm. On the other hand, JPEG uses a lossy compression algorithm. What this essentially means is that, by saving your original images using JPEG, you might witness some quality loss (the same goes for PNG in certain situations, as you'll see later on).

Some Technical Stuff about PNG

Aside from using lossless compression, PNG is a bitmapped image format, which just means it's a raster image format. If you skipped Design 101, raster images, unlike vector image formats such as SVG, cannot be rescaled without losing quality. However, raster images are better than vector images for complex images such as photographs.

PNG was designed for quickly transferring images on the web and for displaying images in computer screens, so it only uses the RGB color model. The CMYK color model, which is typically for print purposes, is not available when saving images in PNG format. In short: the PNG image format is not optimal for graphics that will be printed.

PNG-8 and PNG-24

There are two PNG formats: PNG-8 and PNG-24. The numbers are shorthand for saying '8-bit PNG' or '24-bit PNG.' Not to get too much into technicalities — because as a web designer, you probably don't care — 8-bit PNGs mean that the image is 8 bits per pixel, while 24-bit PNGs mean 24 bits per pixel.

To sum up the difference in plain English: Let's just say PNG-24 can handle a lot more color and is good for complex images with lots of color such as photographs (just like JPEG), while PNG-8 is more optimized for things with simple colors, such as logos and user interface elements like icons and buttons.

Another difference is that PNG-24 natively supports alpha transparency, which is good for transparent backgrounds. This difference is not 100% true because Adobe products' Save for Web command allows PNG-8 with alpha transparency.

The Short Story: When to Use PNGs

When you need to preserve transparency and large amounts of color, as well as achieve full or partial transparency, the PNG image format is the best.

Since it's a lossless format, images saved using the PNG format aren't going to be small all the time, but because PNG stores a lot of additional data, you can easily optimize images for web usage to reduce file sizes.

PNG vs. GIF vs. JPEG

Let's compare the advantages and disadvantages of using PNG versus the two other popular web image formats.

PNG vs. GIF

Short answer: Always use PNG over GIF unless you are making an animated GIF or when you want to use images with transparent backgrounds on older versions of IE (however, there's a workaround for supporting PNG transparencies in IE6 and below, using JavaScript PNG fix libraries). I'm not alone on this, Jeff Atwood, founder of StackOverflow and the Coding Horror blog, will agree.

PNG has some important advantages over GIF that web designers will care about, such as:

• Better compression than GIF, a difference that can mean as much as 25% in file size
• No license required
• It is an open file format maintained by the W3C
• Completely lossless compression
• Real alpha transparency on web browsers that support alpha transparency, which is most of them except older versions of Internet Explorer

There are, of course, many other advantages, but those are the ones that matter to web designers.

Here's a visual comparison of PNG versus GIF. Note that for the sample image below, you would not use PNG-24 because it has simple colors and will also weigh more than GIF. However, the PNG over GIF notion still stands: If you save a photographic image (such as a photo of your mom and dad), PNG-24 will have a better result than GIF.

Adobe premiere completo 64 mac crack torrent. Optimization Tip: There are a lot of tools you can use to optimize your images. Below, I used pngcrush for the PNG images and Smush.it for the GIF image. No apparent loss in quality, and PNG-8 still wins over GIF.

PNG vs. JPEG

JPEG will be tinier in file size versus PNGs when we're talking about photographic images. This is because it uses a lossy compression algorithm specifically designed for photographic, rich-color images.

So for web use, if you're putting up a photographic image on a web page (such as a picture of your cat), always choose JPEG over PNG. Using PNG over JPEG in this situation will result in a bigger file size (often 5-10 times more than JPEG).

Here is a PNG vs. JPEG (quality: 70) comparison using a photographic image. Note that we use PNG-24, not PNG-8, because it's the proper format for photographic images.

Further optimization with pngcrush and Smush.it:

Optimization tip: You (as the web designer) will criticize your images more than your website users, so a good advice is to be a little more 'brutal' when saving your web images. Find a good balance between file size versus quality. Lower your quality settings until it becomes unbearable.

When to Use Each Format

Here is a simplistic summary of the file format comparisons:

• Use PNG-8 over GIF for images with simple colors (logos, icons, buttons)
• Use PNG-8 over JPEG for images with simple colors (logos, icons, buttons)
• Use PNG-24 over GIF for photographic images
• Use PNG over JPEG when using alpha transparency
• Use JPEG over PNG for photographic images
• Use GIF for background transparency for older browsers (IE6 and below)
• Use GIF for animated GIFs

PNG-8 Color Reduction Optimization

When choosing the PNG-8 image format, you may see a decrease in the number of colors in the image. This is why it is good for simple artworks such as logos, icons, and UI elements such as buttons.

Pick PNG-8 in instances where there is a limited color palette. This will help you achieve a smaller image file size without any visible difference, allowing you to build faster, leaner and more responsive web designs.

An optimization trick you can perform is reducing the number of colors of your PNG image. This will drastically reduce its file size, and you can do it with little-to-no apparent loss in quality.

Most software applications that can save PNG files will have the ability to allow you to manually enter the number of colors to include. For example, Photoshop's Save for the Web & Devices feature (which you can get to by going to File > Save for Web & Devices) gives you a dropdown menu for setting the number of colors for the PNG format. Reduce the number of colors until you see a visible difference in quality.

Below, you can see the optimization of the RSS icon we used earlier through the reduction of the number of colors. Reducing the number of colors from 256 to 16 results in very little noticeable loss in quality and results in a file size that is 62% smaller — over half of the file size was shaved off!

PNG-24 Posterization Optimization

This optimization technique helps you optimize the PNG-24 format and this is how it works: it reduces the amount of colors by combining similar colors.

In Photoshop, here is how you can do this optimization trick: Open the image in Photoshop. Choose Image > Adjustments > Posterize and then decrease the levels until it results in visible quality loss. Then just use the Save for the Web & Devices feature to save the image in PNG-24 format.

Summary

For web designers, the importance of reducing images sizes is a way to increase the overall speed of a web page. Optimized, smaller images in a web design means:

• Faster web pages that load more quickly
• Less bandwidth consumption
• Less data required to transfer to site visitors, which means lower data activity

You may be wondering if PNG is the best image format — this is an inevitable question. The answer is: it depends. As shown in this guide, there are many variables that will affect what image format you will choose. Certain situations will find PNG-8 favorable over PNG-24, while others will produce better results when using JPEG.

PNG has certain advantages over GIF, such as lower file sizes and being an open format. However, PNG transparency in IE6 isn't supported so you might have to use GIFs (or a JavaScript library that emulates PNG alpha transparency in IE6, such as IE PNG Fix). The same can be said for when you're dealing with animated images, which GIFs can do.

Regarding PNG versus JPEG: the choice depends a lot on what type of image you're optimizing. Specifically, PNG does extremely well with limited color schemes, solid colors and supporting transparency (which JPEG does not support). For complex, photographic images, JPEG is the way to go.

The main thing to take away here is that you should use a combination of image formats. You shouldn't strictly use PNG, or JPEG, or GIF. Furthermore, you shouldn't be afraid to optimize each image manually so that you can achieve better results and smaller file sizes. You should always use an image optimizer, which will squeeze out every last excess byte.

There are two things that will help you pick the right format: experimenting and experience. The more you save images for the web, the quicker you will be in recognizing situations in which PNG, JPEG, or even GIF should be used.

References and Resources

• Coding Horror: Screenshots: JPEG vs. GIF (vs. PNG)

Related Content

If you have a website or an online store, you know it can be tricky to get your images to look just right. These tips on how to optimize images for the web will take all the guesswork out of it for you.

Why You Should Optimize Web Images

When preparing an image for a website, you need to understand that the balance between quality and size is critical. If the image is too small, it may look blurry and unprofessional. If the image is too large, it will slow down your site, and you could lose visitors. Additionally, if you haven't prepared the image for SEO, you could be leaving money on the table there, as well.

Tip 1 - Choose the Right Image for a Website

If your intention is to provide your visitors with professional experience, choose only high-quality, well-framed photos. Homegrown images are nice, but they don't often present the best image for a business online.

Start with large (at least 1500px wide), professionally taken photographs, and then size them down for the web. Balance content with images and use only images that relate well to the subject matter of the website.

Reduce Png File Size

Tip 2 - Choose the Right Format

The top three image formats to choose from are JPEG, PNG, and GIF. Each has pros and cons to using them. For online store images, the best option is JPEGs because they can be resized without losing any quality. In cases where you need a transparent background, then PNG is the right choice.

PNG files also support a lot more colors than GIF, but the file size can get bloated. GIF files are best used for simple drawings and images with fewer colors. They are fine to use for thumbnails but not for large images or backgrounds.

Tip 3 - Resize Your Image

The trick to optimizing your images for your website is to get them as small as possible without the quality degrading any. There are dozens of software programs that can help you with editing photos for a website. Some of them have output settings such as 'save for web,' which automatically optimize the size and quality.

The biggest thing that will slow down your website are images that are too large and take too long to load. For example, a 15MB image on a website is huge. A more reasonable option would be to compress it down to around 125KB. You don't necessarily have to sacrifice image resolution to have large images appear on your website. It's a balancing act that you can play around with using some free photo editor apps until you find just the right combination.

Tip 4 – How to Name Your Image Properly

How you name your images may seem unimportant, but to search engines, it is essential. Instead of naming your files with nonsensical or numerical values, be descriptive so that SEO bots can find your website and your images easily.

For example, an image of a piece of real estate for sale could be named: 11-sycamore-avenue-newport-rhode-island.jpg. Always use hyphens or underscores between words. Most popular web development programs require it anyway. Don't forget to add ALT-tags to your images with plain-language descriptions as well.

Tip 5 - Tools to Help Optimize Your Images for the Web

If you need professional images and don't have a lot to spend, check out Pexels, Pixabay, Canva, and Unsplash for free stock images to use on your website.

There are also some great free image resizer apps you can try out online to help with sizing your photographs to get everything just perfect.

Png Shrinker

Related Articles: