{"id":49022,"date":"2016-06-18T23:08:14","date_gmt":"2016-06-18T23:08:14","guid":{"rendered":"http:\/\/moonpupproductions.com\/?p=49022"},"modified":"2016-07-01T21:12:39","modified_gmt":"2016-07-01T21:12:39","slug":"png-or-jpg","status":"publish","type":"post","link":"https:\/\/moonpupproductions.com\/index.php\/2016\/06\/18\/png-or-jpg\/","title":{"rendered":"PNG or JPG?"},"content":{"rendered":"<p>When should you use pngs and when should you use jpgs? What is a png anyway? Here is a concise, but handy guide to help you decide what type of images are best to use for different types of projects. For now, we are going to\u00a0focus on\u00a0three main\u00a0file types:<\/p>\n<ul>\n<li>JPG &#8211; Joint Photographic Experts Group<\/li>\n<li>PNG (24-bit\u00a0and\u00a08-bit) &#8211; Portable Network Graphic<\/li>\n<li>GIF &#8211; Graphical Interchange Format<\/li>\n<\/ul>\n<p>Before we get to the nitty-gritty on these file types, let&#8217;s go over a few concepts\u00a0so we are all on the same page. Here are some important things to know before we move forward:<\/p>\n<h2>Lossy vs. Lossless<\/h2>\n<p>&#8211; When an image is lossy, it means that as the image is compressed, pixel data is thrown out and the image cannot be re-enlarged without losing some clarity.\u00a0When an images is lossless, you can compress it without losing any data or resolution from the original image.<\/p>\n<h2>24-bit vs. 8-bit<\/h2>\n<p>This refers to the spectrum of colors that are supported on a certain image type. For example, 24-bit images support 8 bits on each channel, which can generate 16.7 million colors\u2014plenty to choose from. On the other hand, 8-bit image files have access to a total of 256 colors. One thing to keep in mind: the more bits on the graphic, the larger it will be as the fourth channel adds more data to the image.<\/p>\n<h2>RGB vs. CMYK<\/h2>\n<p>&#8211; RGB (red, green, blue)\u00a0refers to the primary colors of light. These three colors make up all the colors you see on a computer screen\u00a0in\u00a0an additive process the starts with a dark screen. All images used on screen should be in RGB color mode. CMYK (Cyan, Magenta, Yellow, Key-Black) refers to the four colors used in printing to create a full spectrum of colors. Images or designs set up for\u00a0print purposes\u00a0should be in CMYK mode.<\/p>\n<p>Now, here is the scoop on each file type:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-large wp-image-49173\" src=\"http:\/\/moonpupproductions.com\/wp-content\/uploads\/2016\/06\/PNG-OR-JPG-1-1024x602.png\" alt=\"PNG OR JPG\" width=\"840\" height=\"494\" srcset=\"https:\/\/moonpupproductions.com\/wp-content\/uploads\/2016\/06\/PNG-OR-JPG-1-1024x602.png 1024w, https:\/\/moonpupproductions.com\/wp-content\/uploads\/2016\/06\/PNG-OR-JPG-1-570x335.png 570w, https:\/\/moonpupproductions.com\/wp-content\/uploads\/2016\/06\/PNG-OR-JPG-1-768x452.png 768w, https:\/\/moonpupproductions.com\/wp-content\/uploads\/2016\/06\/PNG-OR-JPG-1.png 1452w\" sizes=\"(max-width: 840px) 100vw, 840px\" \/><\/p>\n<p>When formatting images or graphics for web or print, you need to keep in mind that there is\u00a0a real balance between the quality of the image, and the size of the image. For example, if your website is full of really great photos, but no one has time to wait for them to download, then you&#8217;ve missed the mark.\u00a0Or if your print design uses the wrong color mode, it doesn&#8217;t matter how great the design is if the colors are off. Keep the above graphic handy so you can get it right\u2014every time.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When should you use pngs and when should you use jpgs? What is a png anyway? Here is a concise, [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":49024,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[45,46],"tags":[],"class_list":["post-49022","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-web"],"_links":{"self":[{"href":"https:\/\/moonpupproductions.com\/index.php\/wp-json\/wp\/v2\/posts\/49022","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/moonpupproductions.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/moonpupproductions.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/moonpupproductions.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/moonpupproductions.com\/index.php\/wp-json\/wp\/v2\/comments?post=49022"}],"version-history":[{"count":12,"href":"https:\/\/moonpupproductions.com\/index.php\/wp-json\/wp\/v2\/posts\/49022\/revisions"}],"predecessor-version":[{"id":49175,"href":"https:\/\/moonpupproductions.com\/index.php\/wp-json\/wp\/v2\/posts\/49022\/revisions\/49175"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/moonpupproductions.com\/index.php\/wp-json\/wp\/v2\/media\/49024"}],"wp:attachment":[{"href":"https:\/\/moonpupproductions.com\/index.php\/wp-json\/wp\/v2\/media?parent=49022"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/moonpupproductions.com\/index.php\/wp-json\/wp\/v2\/categories?post=49022"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/moonpupproductions.com\/index.php\/wp-json\/wp\/v2\/tags?post=49022"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}