Jun 5, 2018

13 Steps of Ultimate PNG Optimization

Approximately a quarter of images on sites - this is PNG. And understanding the format and means of optimizing it will allow you to make websites faster by reducing the size of PNG images. We talk about the features of this format and will offer some more techniques that will reduce your images in size.

PNG-format assumes no loss in quality when saving images (yes, it allows to have a full-color image with translucency WITHOUT loss of quality). But to maintain this advantage, you do not need to lose in size. In some cases - for example, gradient or low-color images - PNG is the most profitable format in terms of size.

1. Choosing the right format

Not always PNG is the optimal format for representing an image. If the number of colors in the PNG is very large, then it is better to use the JPEG format. But this is not always possible due to the technical task: for example, it is required to provide transparency or translucency for compatibility with the background.

In this case, it is worth considering the option of combining a PNG image with a background for saving in JPEG format, or generating a set of images (with different backgrounds) - again for the final save in JPEG format. In most cases, the full-color image in JPEG will be 2-3 times smaller in size than the PNG-equivalent.

2. Removing chunks

There are a huge number of PNG optimization programs, and most of them do roughly the same thing: they select different filter sets to reduce the size of the main, color information. But there are a few more approaches to reducing the size of PNG images, which also need to be kept in mind.

The first is: removing garbage in meta-information (unused chunks) and in the palette used (unused colors). Important are IHDR, IDAT and IEND-chunks. All the rest contain auxiliary information (but, for example, removing the gAMA chunk resulted in "spoiling" of images in the Safari browser of older versions). Chunks with comments, the date of change and color profiles (for printing) can be safely cleaned out: for the browser is a useless set of characters.

3. Choosing the Right Palette

There are 6 variants of PNG format for different tasks: gray palette, color palette (256 colors), full color palette, and additionally each option can include transparency. Choosing the right palette and transparency allows you to reduce the size of the PNG image. If you have less than 256 colors, always choose PNG8 and watch for transparency (some editors do not know how to preserve translucency for PNG8).

If the image contains only grayscale, then your choice is Grayscale.

If the image has more than 256 colors - try converting it to PNG8. Perhaps, the degradation of quality will be invisible. If there are too many colors, consider the option with JPEG format. If this is not possible, then choose TrueColor and watch for transparency.

4. Optimization of the alpha channel

A number of tools allow you to use non-indexed alpha channel, and full translucence, preserving the original palette (for example, in 256 colors). This significantly reduces the size of the image.

Additionally, you can use Dithering to smooth out a small number of colors when translucent.

5. Optimization of filters

The main "workhorse" of PNG optimization is choosing the right set of filters for each row (the PNG image is coded in line), which will provide the minimum overall image size. Filters in PNG are fairly simple: they predict adjacent pixels and represent, in fact, an enhanced version of data compression.

In the optimization of filters, almost all PNG optimization utilities will help: this is pngcrush, and optipng, as well as all online image optimization services. It makes sense to apply filter optimization only after going through the previous steps.

6. Optimizing compression

Almost the final point where you can still "squeeze" PNG is compression. Thanks to the open format (unlike GIF), PNG supports a large number of compression algorithms, in particular, zlib, 7-zip, Kzip, zopfli. Different utilities optimize images in different ways, and optimization due to compression should always go in the finale: after selecting a palette, transparency and optimization of filters. Although sometimes less optimal sets of filters can give a smaller file in combination with another compression.

Optimization of data compression is used by the following utilities: optipng, TruePNG, PNGwolf, AdfDef, PNGout.

7. WebP: a lightweight alternative

The WebP format due to a larger number of filters and a more adaptive approach to the indexed palette and transparency makes it possible to significantly reduce the size of PNG images. It's worth noting that WebP is not supported by all browsers, so the PNG alternative.

The PNG format assumes no loss in quality when saving images. But in some cases, storing with distortion (Dithering or posterization) allows you to get images that are almost identical to the original, but are essentially smaller.

8. Posterization, palette and grayscale

Posterization (not to be confused with pasteurization) can reduce the number of colors in the PNG file due to some adaptive algorithm (for example, mediancut or k-means). Usually the reduction in the number of colors is 2-3 times invisible to the eye, but reduces the image size by 20-50%.

The most famous pasteurization tools are Photoshop, pngquant, pngnq and TruePNG.

Choosing the right palette (for example, using only grayscale or only 256 colors) - if it is not already done - also significantly reduces the image size (each pixel is encoded 1 byte instead of 3).

9. Mask of transparency

A little-known technique, well described by Sergei Chikyonok. The essence of it is to remove the color information (nullification) from completely transparent pixels. This reduces the actual number of bytes in the IDAT chunk and allows the use of more optimal filters.

Fortunately, some PNG optimization utilities, in particular TruePNG, allow you to do this automatically.

10. Dithering

More interesting technique from Sergey, applicable not only to PNG images. The essence is to select areas of the image that can be blurred (apply dithering) while preserving the visual quality (or rather, selecting areas of the image for which blur can not be applied).

This optimization technique is not a technique with loss of quality, but the final image will be different from the original one, so it is important to choose such parameters in which quality loss will be minimal (visually).

Dithering allows to increase the compressibility of the image by filters (by discarding some color information). Fine tuning saves up to 20% of the image. In the automatic version, Dithering is not yet applicable, but your favorite image editor will do this with masks and selective filters for the PNG image.

11. Interlacing

The interlacing technique is similar to the progressive JPEG: at each pass the PNG-image gets more information, and the details of the image begin to "manifest".

Graphical editors, as well as console utilities (for example, convert), allow the use of hypertext (by lines or colors) for PNG images. In some cases, the gain from this method can be 5-10%.

12. Heuristic filtering

The main approach for optimizing the presentation of color information in PNG is a complete search of the filters for each line of the image, and the selection of the most optimal set for the image as a whole. But since filters can use the color information of the previous line, the number of options even for a small image (100 lines) is significant. Therefore, all utilities make some or other assumptions on the effectiveness of filters and reduce the overall search.

Heuristic (predictive) algorithms can provide more effective application of filters, based on the features of this image. This approach is implemented, in particular, in the utility pngwolf. Using filter heuristics in conjunction with other PNG filter optimizers reduces the resulting image size.

13. Zopfli for compression

The final point where you can still "squeeze" PNG is compression. PNG supports a large number of compression algorithms, in particular, zlib, 7-zip, Kzip, zopfli. It makes sense to use the most advanced of them - it's zopfli (bzip2 is not supported due to the time of unzipping, and h.264 is supported only in WebP).

Using zopflipng to compress PNG files (not to be confused with "compression on the fly", which is used for text files) reduces the current color information size after the most effective palette and the most effective filters are applied (and disable archiving in other optimization utilities). This will reduce the PNG size by another 3-7% relative to compression in other formats without significantly increasing the optimization time.

The most of described techniques (except manual color and dithering image transformation) are applied to images in Airee Cloud automatically depending on selected image optimization level.

52 comments:

  1. Amazingly charming article, I acknowledged examining your post, especially tolerable offer, I have to joke this to my followers. Much valued!. SEO in New Jersey

    ReplyDelete
  2. This variation in income per client can be attributed to the type of services provided as well as the depth of services. relevant comment

    ReplyDelete
  3. On an increasingly positive note, these untrustworthy specialist co-ops are vanishing because of the continuous changes in Google Search,blog comments service in 1$

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. What are the advantages of Outsourcing SEO to an agency? What are the pros and cons of In-House SEO? Should a growing business opt for Outsourced SEO services or should they get the SEO of their site done In-House? Read this article to know more.
    קידום אתרים מסה מדיה

    ReplyDelete
  6. An example of this is the "near me" phenomenon, which has seen a 150% growth in the last 12 months, where mobile phone users are adding "near me" to their search query i.e. "SEO Company near me". Digital Marketing

    ReplyDelete
  7. You should always take the proper care of your pets and you can use cbd and hemp oil for your dogs. Because these are the best treats and there is no bad ingredients are mixed up with this. This dog treats are known to all cbd treats for dogs and you can buy this from frenchiefries as you can get these things just at a simple and reasonable price.

    ReplyDelete
  8. When you start the course you will understand the difference between digital marketing and traditional marketing, exploring the basis of digital marketing and the main tools to become a digital marketer. digital marketing training in hyderabad

    ReplyDelete
  9. I'll teach you the five steps you need to take to optimize your content and drive massive sales. www.floorrefinishingstlouis.com/

    ReplyDelete
  10. Through this post, I realize that your great information in playing with all the pieces was exceptionally useful. I advise this is the primary spot where I discover issues I've been scanning for. You have a smart yet alluring method of composing.
    https://360digitmg.com/course/certification-program-on-digital-marketing

    ReplyDelete
  11. I find your blog so useful and helpful. Thank you so much for sharing! rv generator

    ReplyDelete
  12. Yet, as a rule, nearby optimization, while a vital precondition, isn't adequate to get high positioning SEO results. You will likewise have to do off-page (otherwise called off-site) optimization. SEO no cure no pay

    ReplyDelete
  13. Entrepreneurs who do have a business site lose huge measures of cash from web based showcasing. They should realize that SEO Internet promoting orders a business site, since it is an important web based advertising apparatus. best seo company in birmingham

    ReplyDelete
  14. Nice article. I liked very much. All the information given by you are really helpful for my research. keep on posting your views.
    digital marketing courses in aurangabad

    ReplyDelete
  15. Cool! Your article is so helpful and educational. Thanks a lot!
    Regards | www.watersoftenersolutions.com/

    ReplyDelete
  16. This comment has been removed by the author.

    ReplyDelete
  17. Nice and very informative blog, glad to learn something through you.
    digital marketing course in aurangabad

    ReplyDelete
  18. Thanks for sharing about the how to do PNG optimization. Your tips will really work for me.

    web design company Jacksonville

    ReplyDelete
  19. Yes i am totally agreed with this article and i just want say that this article is very nice and very informative article.I will make sure to be reading your blog more. You made a good point but I can't help but wonder, what about the other side? !!!!!!Thanks Web Design Agency

    ReplyDelete
  20. Great Post,
    Learn digital marketing video course at Digital Brolly

    ReplyDelete
  21. Thanks for posting the best information and the blog is very helpful.digital marketing institute in hyderabad

    ReplyDelete
  22. Great info! I recently came across your blog and have been reading along. I thought I would leave my first comment. I don’t know what to say except that I have. nearest metro station to national museum

    ReplyDelete
  23. Great info! I recently came across your blog and have been reading along. I thought I would leave my first comment. I don’t know what to say except that I have. British Citizenship

    ReplyDelete
  24. great info, I'm really new at this stuff and I didn't know about all of that behind a picture, I really appreciated this blog and this post. useful for sure. www.jdcseodesign.com

    ReplyDelete
  25. Neighborhood optimization can be performed utilizing the accompanying procedures Ebay SEO expert

    ReplyDelete
  26. Thanks for this great post, I find it very interesting and very well thought out and put together. I look forward to reading your work in the future. canada visum online

    ReplyDelete
  27. This is a great subject, if you would like to know more Click here.

    ReplyDelete
  28. Below you will understand what is important, the idea provides one of the links with an exciting site: how to sell merchant services

    ReplyDelete
  29. These you will then see the most important thing, the application provides you a website a powerful important internet page: 카지노사이트

    ReplyDelete
  30. Thanks for the marvelous post! ✅ I really enjoyed reading it, you might be a great author. I will certainly bookmark your blog and definitely will come back sometime soon. I want to encourage you to continue your great writing bad credit home loan

    ReplyDelete
  31. i am always looking for some free stuffs over the internet. there are also some companies which gives free samples. What about alliance-research.org

    ReplyDelete
  32. Thank you so much for this explanation, it's really helped my business
    James

    ReplyDelete
  33. Hi there, I discovered your blog per Google bit searching for such kinda educational advise moreover your inform beholds very remarkable for me. rockauto llc 6418 normandy ln madison wi 53719 united states

    ReplyDelete
  34. Likert scale is a five (or seven) point scale which is used to allow the individual to express how much they agree or disagree with a particular statement. Learn How to Analyze Likert Scale Data .

    ReplyDelete
  35. Fantastic goods article.I understood your stuff before and you are great..Turkey travel visa and visa required for Turkey, you need to fill visa application form Turkey online through Turkey e visa.

    ReplyDelete




  36. Fantastic read. I observed your internet site from a google search, and was glad i did. The data has helped me immensely.Khimar

    ReplyDelete
  37. Thank you for this post. The international tourists who want to apply for Azerbaijan sticker visa must check the Azerbaijan sticker visa requirements online.

    ReplyDelete
  38. Positive site, where did u provide you with the records in this posting? I even have study a few of the articles for your website now, and I virtually like your fashion. Thanks one million and please keep up the effective work. Hydrossential serum

    ReplyDelete
  39. I think this is one of the very important information for me. And I am satisfied to read your article. kenya single entry visa. Within 5 minutes you can fill your single entry visa kenya application form. you should receive an email asking you to confirm that you have started an application for a eVisa.

    ReplyDelete
  40. Nice post, wonderful article. it is very valuable and informative for me. Thanks for sharing these information with all of us. whatsapp mod

    ReplyDelete





  41. I was recommended this blog by my cousin. I’m not sure whether this post is written by him as no one else know such detailed about my difficulty. You’re incredible! Thanks!webdesign rastatt

    ReplyDelete




  42. I was recommended this blog by my cousin. I’m not sure whether this post is written by him as no one else know such detailed about my difficulty. You’re incredible! Thanks!Instagram Follower kaufen günstig


    ReplyDelete



  43. Excellent publish from specialist also it will probably be a fantastic know how to me and thanks very much for posting this useful data with us all.weight loss medicine

    ReplyDelete






  44. There are so many benefits to quitting Weed that I don't know where to start. So I'll just dive right in and get straight to the point.구글상위노출

    ReplyDelete







  45. I am always searching online for articles that can help me. There is obviously a lot to know about this. I think you made some good points in Features also. Keep working, great job.Fitnesshandschoenen

    ReplyDelete




  46. Thanks for a wonderful share. Your article has proved your hard work and experience you have got in this field. Brilliant .i love it reading.
    Datenwiederherstellung Berlin

    ReplyDelete



  47. There is likewise on-line casino Where we've got delivered the world-elegance main camps which can be the maximum popular, along with Sa Gaming, Sexy Gaming, eBet, WM Casino, Venus Casino, Big Gaming and Lucky Streak, which may be referred to as nearly each camp you're looking for. مياه حلوة

    ReplyDelete