![\"jpg](\"\/wp-content\/uploads\/2014\/09\/jpg-vs-png-jpg-example.jpg\")
<\/p>\nIn terms of content, images are king. Don\u2019t get me wrong, text is great. Well written copy has the ability to engage readers and provoke meaningful discussions. However, for the more visual among us, a picture is truly worth a thousand words. This adds some unique problems for web content. Images are often the first impression that a potential viewer has to your content; it can be the difference between a conversion and a bounce. This can be especially important for mobile content where connections are generally slower and users are loathe to waste precious data.<\/p>\n
Beyond style and composition, correct use of format in images is critical to reducing page load times and promoting site engagement. But with all of the file formats available, how do you choose which one to use in a given context? The goal here will be to give the best possible image quality in the least possible space. But how do you decide which format to use? Here are 2 of some of the most common image formats used in web and the best cases for each:
\n<\/p>\n
One of the most common formats that everyone should know. JPG\u2019s are commonly used in print and photography media as well as web. With up to 16 million colors available, JPG\u2019s are ideally suited for photographs, gradients, and complex colors. JPG\u2019s are a lossy compression format, meaning that the level of compression can be adjusted depending on use case. Many times you can add significant compression before you see any meaningful image quality degradation achieving a significantly smaller image.<\/p>\n
Below are a few examples of images that are well suited to be JPG’s:<\/p>\n
<\/p>\n
![\"jpg](\"\/wp-content\/uploads\/2014\/09\/jpg-vs-png-jpg-example-2.jpg\")
<\/p>\n
Quick recap, you’ll want to use JPG’s for:<\/p>\n
PNG files, unlike JPG\u2019s, are a lossless image compression format. This means that image quality in PNG files are accurately preserved without any degradation or loss of detail. This quality comes at the cost of significantly larger files when compared with JPG\u2019s, in many cases without a perceivable difference in quality. These traits make PNG\u2019s acceptable for image masters, but not for publishing on the web. However, for sharp transitions and large areas of the same color, PNG files are superior. They lack the compression artifacts that occur many times using the JPG format of images for images such as these. PNG\u2019s also have the advantage of supporting transparency (PNG-24, PNG-32) making them great for adding images over a background on a website.<\/p>\n
Here are a few examples of images that are best suited to the PNG format:<\/p>\n
![\"jpg](\"\/wp-content\/uploads\/2014\/09\/jpg-vs-png-png-example.png\")
<\/p>\n
![\"jpg](\"\/wp-content\/uploads\/2014\/09\/jpg-vs-png-png-example-2.png\")
<\/p>\n
To sum up, use PNG files for images that have:<\/p>\n
These are generally the best practices and not solidly the rule. When in doubt: Take your image, format it in PNG and JPG and see which one is the smaller file and if there\u2019s any degradation of quality. Additionally, if you want to squeeze every last kb out of your images, you can use a file optimizer like FileOptimizerx64<\/a>\u00a0which is great for optimizing files by batches.<\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" In terms of content, images are king. Don\u2019t get me wrong, text…<\/p>\n","protected":false},"author":1,"featured_media":7015,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,58],"tags":[],"jetpack_featured_media_url":"https:\/\/xwaretech.com\/wp-content\/uploads\/2014\/09\/JPG-vs-PNG-featured.jpg","_links":{"self":[{"href":"https:\/\/xwaretech.com\/wp-json\/wp\/v2\/posts\/7005"}],"collection":[{"href":"https:\/\/xwaretech.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xwaretech.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xwaretech.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xwaretech.com\/wp-json\/wp\/v2\/comments?post=7005"}],"version-history":[{"count":0,"href":"https:\/\/xwaretech.com\/wp-json\/wp\/v2\/posts\/7005\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/xwaretech.com\/wp-json\/wp\/v2\/media\/7015"}],"wp:attachment":[{"href":"https:\/\/xwaretech.com\/wp-json\/wp\/v2\/media?parent=7005"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xwaretech.com\/wp-json\/wp\/v2\/categories?post=7005"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xwaretech.com\/wp-json\/wp\/v2\/tags?post=7005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}