{"id":2309,"date":"2017-06-12T10:34:45","date_gmt":"2017-06-12T10:34:45","guid":{"rendered":"https:\/\/shortpixel.com/blog\/?p=2309"},"modified":"2018-01-08T13:43:43","modified_gmt":"2018-01-08T13:43:43","slug":"png-jpeg-dilemma","status":"publish","type":"post","link":"https:\/\/shortpixel.com\/blog\/png-jpeg-dilemma\/","title":{"rendered":"A simple rule for the PNG or JPEG dilemma"},"content":{"rendered":"

\"PNGPNG or JPEG? Some bloggers know the answer to this question, and some don\u2019t. The former are not necessarily better than the later, but knowing how to choose the correct image format gives you a competitive advantage.<\/p>\n

This article could have been one sentence long: PNG is for text, JPEG is for the rest, but let’s get into some details.<\/p>\n

<\/p>\n

Pictures with text<\/strong><\/p>\n

We recommend you to use PNG format for pictures containing text or graphics\/drawings with fine details. Usually, JPEG images are blurrier, and the contours of the letters appear less sharp. The fine lines from graphics could be also altered.<\/p>\n

Let\u2019s see two examples of the same image in both formats:<\/p>\n

 <\/p>\n

\"PNG
Image 1 size: 22.4 kB<\/figcaption><\/figure>\n
\"PNG
Image 1 size: 70.2 kB<\/figcaption><\/figure>\n

 <\/p>\n

The first image is clearer, but the text from the second image is also readable. If you decide that the JPEG format is good enough for displaying images containing text, please check their sizes. You will be surprised to find that in these cases the JPEG images are bigger.\u00a0 Check the bellow table to see the size comparison for all images.<\/p>\n

Important: Use PNG for logos and technical drawings too! This advice is specially true for the logos with gradients.
\n<\/span><\/span><\/p>\n

 <\/p>\n

Regular images<\/strong><\/p>\n

On the other hand, JPEG images are usually smaller and better for the web. In other cases than banners or images with a lot of text, using PNG images slows your website, and in the most of the situations there are not visible differences between these formats. We recommend you to use PNG only if the text within an image is not readable.<\/p>\n

 <\/p>\n

PNG (351.4 kB)
\n<\/strong><\/p>\n

\"PNG<\/p>\n

 <\/p>\n

JPEG (153.2 kB)
\n<\/strong><\/p>\n

\"PNG<\/p>\n

As you could see, there are not obvious reasons to use PNG in this case. JPEG format is just fine and it is smaller as you could see bellow.<\/p>\n

 <\/p>\n

PNG vs JPEG size comparison <\/strong><\/h4>\n

We like tables,<\/a> and we made a new one with the sizes for all above images and their optimized versions.<\/p>\n\n\n\n\n\t\n\n\t\n\t\n\t\n\t
<\/td>PNG<\/strong><\/th>JPEG<\/strong><\/th>\n<\/tr>\n<\/thead>\n
Image 1
\n(with text)<\/td>		22.4 kB<\/span><\/strong><\/td>70.2 kB<\/td>\n<\/tr>\n
ShortPixel
\nOptimized<\/i><\/td>		6 kB<\/span><\/strong><\/td>25 kB<\/td>\n<\/tr>\n
Image 2
\n(without text)<\/td>		351.4 kB<\/td>153.2 kB<\/span><\/strong><\/td>\n<\/tr>\n
ShortPixel
\nOptimized<\/i><\/td>		103 kB<\/td>44 kB<\/span><\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n

As you could see, PNG is the best format for images with text not only because it has a better picture quality, but it also produces files with smaller sizes. If your images don’t contain mostly text, then go with JPEG format.<\/p>\n

If you are interested in image optimization tips and tools, give a try to ShortPixel image optimizer<\/a>.<\/p>\n

 <\/p>\n

Image credits: Artur Rutkowski<\/a>, and Patrick Tomasso<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

PNG or JPEG? Some bloggers know the answer to this question, and some don\u2019t. The former are not necessarily better than the later, but knowing how to choose the correct image format gives you a competitive advantage. This article could have been one sentence long: PNG is for text, JPEG is for the rest, but […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-2309","post","type-post","status-publish","format-standard","hentry","category-image-optimization"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/2309","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/comments?post=2309"}],"version-history":[{"count":28,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/2309\/revisions"}],"predecessor-version":[{"id":2555,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/2309\/revisions\/2555"}],"wp:attachment":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/media?parent=2309"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/categories?post=2309"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/tags?post=2309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}