{"id":6915,"date":"2019-10-14T22:16:30","date_gmt":"2019-10-14T21:16:30","guid":{"rendered":"https:\/\/designbro.com\/blog\/?p=6915"},"modified":"2019-10-14T22:16:30","modified_gmt":"2019-10-14T21:16:30","slug":"differences-between-image-file-types","status":"publish","type":"post","link":"https:\/\/designbro.com\/blog\/guides\/differences-between-image-file-types\/","title":{"rendered":"Differences Between Image File Types"},"content":{"rendered":"<h2><a id=\"post-6915-_29m7tl3lcuhm\"><\/a><strong>Different types of image file formats<\/strong><\/h2>\n<p>You\u2019ve probably come across different image formats online, such as PNG, JPEG and GIF. Although these graphic file formats do differ in size, function, and appearance, they ultimately belong to one of two categories: raster or vector.<\/p>\n<p>In this article, we\u2019ll be covering all the things you need to know about the two image file types and the differences between them. Additionally, we\u2019ll also be listing all of the specific file formats that belong to each category.<\/p>\n<p>First of, let\u2019s get started with raster images.<\/p>\n<h3><a id=\"post-6915-_uvk8wcjgxn9m\"><\/a><strong>What is a raster image?<\/strong><\/h3>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone wp-image-6920\" src=\"https:\/\/designbro.com\/blog\/wp-content\/uploads\/word-image-94.png\" alt=\"What is a raster image\" width=\"792\" height=\"375\" \/><\/p>\n<p>A raster image is any image that is captured with a camera or created using a pixel-based program. Raster graphic file formats allow for a subtle and complex transition in color and are often used for painting. For example, if the image were to have a lot of shadows, a raster image file format should then be used.<\/p>\n<p>Furthermore, raster images are also popularly used in order to share images online.Although normally detailed and photorealistic, raster images can become blurry or develop jagged edges when enlarged. This is because each raster image contains only a limited number of pixels. Enlarging a raster image will require the program in which we view it in to add in extra pixels, resulting in a blurry picture.<\/p>\n<p>Another downside of raster images would be their large file size. To offset that, raster images often use a \u201cquality\u201d setting that allows you to lower the quality through compression. By doing this, you\u2019ll be able to get a smaller file. However, today, that is typically not a problem, unless you\u2019re handling literally millions of files.<\/p>\n<h3><a id=\"post-6915-_gp7cnvtuntzd\"><\/a><strong>Raster file formats<\/strong><\/h3>\n<h4><strong>JPEG (or JPG) &#8211; Joint Photographic Experts Group<\/strong><\/h4>\n<p>Initially developed in 1992 by a consortium of large tech companies, JPEG is the most popular image file format online. This is due to it being the default way in which digital cameras save images. JPEG images use what is known as a \u201clossy compression\u201d to approximate image details and reduce the file size by up to 90%. However, image quality may suffer tremendously as a result.<\/p>\n<h4><strong>PNG &#8211; Portable Network Graphics<\/strong><\/h4>\n<p>Originally envisioned by a group of graphic enthusiasts in 1997, PNG wasn\u2019t widely used as file format until 2004. PNG has the feature of \u201clossless compression\u201d that perfectly preserves the details but may shrink, enlarge, or maintain the file size depending on what\u2019s shown in the image. The main upside of PNG files is the ability to have transparency channels, giving it great flexibility for layered images.<\/p>\n<h4><strong>GIF &#8211; Graphics Interchange Format<\/strong><\/h4>\n<p>Pronounced with a hard \u2018G\u2019 and not a \u2018J\u2019, this animated image file format was created way back in 1987 by CompuServe, the first US-based ISP. It excels in portraying low-quality animated slideshows, which serve as extremely portable video files. Yet, GIF is a fairly limited format in terms of color as it is only able to display at most, 256 different colors at a time. Similar to PNG, GIF files also use lossless compression, resulting in varying file sizes depending on the image content.<\/p>\n<h4><strong>TIF (or TIFF) &#8211; Tagged Image File Format<\/strong><\/h4>\n<p>This well-established graphics format was created in 1986 and is now widely used by professionals for everything, all the way from printing to faxing. Compared to the other file formats, TIFF is more akin to an image archive. It is capable of storing both raster and vector image data in a single file using lossless compression.<\/p>\n<h4><strong>PSD &#8211; Photoshop Document<\/strong><\/h4>\n<p>PSD is a proprietary image file format that belongs to and is maintained by Adobe since 1988. PSD allows for nuanced color, layer, text, transparency and other types of editing. While it is still considered as a raster file format, it is perhaps the richest of them all, allowing resolutions up to 30,000&#215;30,000 pixels and files of up to 2 GB in size.<\/p>\n<h3><a id=\"post-6915-_v2y2vbr3gvya\"><\/a><strong>What are vector file formats?<\/strong><\/h3>\n<p>Vector image files are those that are created using drawing or graphic design programs. Essentially, a vector is a line that connects two points. In graphic design, vectors are used for drawing clear outlines that do not become blurry when magnified.<\/p>\n<p>Compared to raster file formats, vector file formats do not have the same amount of richness in terms of colors and shadows. For this reason, they are mostly used for simple shapes that don\u2019t require much photorealism, such as logos. Vector images do not have the jagged edges that raster images tend to have when displaying spirals and rounded edges. Additionally, they greatly support gradients, which are overlapping areas of color that allow for a smooth color transition.<\/p>\n<p>What\u2019s good to take note of is that it is actually possible to transform a raster image into a vector image and vice versa. However, some quality loss will be inevitable either way.<\/p>\n<h3><a id=\"post-6915-_b54ndn1d8hyd\"><\/a><strong>Vector file formats<\/strong><\/h3>\n<p><img decoding=\"async\" class=\"alignnone wp-image-6921\" src=\"https:\/\/designbro.com\/blog\/wp-content\/uploads\/word-image-95.png\" alt=\"Vector file formats\" width=\"1024\" height=\"301\" \/><\/p>\n<h4><strong>PDF &#8211; Portable Document Format<\/strong><\/h4>\n<p>Most commonly used for text documents, PDF was created as an open format in 1993 by Adobe. PDF is a versatile format that is capable of holding both raster and vector data, as well as fonts and text. Today, PDF can also feature form fields, hyperlinks, JavaScript, video content and much more.<\/p>\n<h4><strong>EPS &#8211; Encapsulated Postscript<\/strong><\/h4>\n<p>This file format combines vector graphics and text into a single file. It\u2019s most commonly used by Adobe Illustrator, AutoDesk, CorelDRAW and other vector-based graphics programs. The file itself is designed to be used along with printers, hence why it contains printing commands. Today, the EPS file format is considered to be well beyond outdated.<\/p>\n<h4><strong>AI &#8211; Adobe Illustrator Document<\/strong><\/h4>\n<p>Here\u2019s another proprietary file format made by Adobe. However, this time, it was created specifically for Adobe Illustrator in 1985 from EPS. Over time, Adobe added graphics improvements that EPS inherently didn\u2019t have, and this was how AI file format came about. The AI file format actually contains proprietary versions of data that can be worked on in Adobe Illustrator and another in PDF, which can be turned off to reduce file size. However, if this is done, the file will lose its compatibility with other graphics programs.<\/p>\n<h4><strong>INDD &#8211; Adobe Indesign Document<\/strong><\/h4>\n<p>Adobe\u2019s INDD file format is used for mainly used for brochures, e-books, and other publications. Yet at the same time, it also supports coding through XML and markup. The idea behind INDD was to create a universal standard for both PC and Mac. This way, publishers are able to use these files across all devices. Similar to AI, INDD file format is in essence a PDF file with improvements. However, in this case, they are more used for texts rather than images.<\/p>\n<h4><a id=\"post-6915-_fu0z5g666ml0\"><\/a><strong>RAW &#8211; Raw Image Formats<\/strong><\/h4>\n<p>JPG, GIF, PNG and other file formats try to represent an image using a bunch of data. However, they still take advantage of how the human eye works to cut down on colors shown and reduce file size. On the other hand, RAW image formats are actual (raw) data captured by a camera or some similar device, without any processing or approximation.<\/p>\n<p>There are up to a hundred RAW image file formats, with each hardware company having its own. The idea behind using a RAW format is that the hardware creating the image removes some defective pixels before storing the image as JPG, PNG or any other common format. By working with RAW file formats, we get the chance to work with those \u201cdefective\u201d pixels and are able to get much richer image editing options.<\/p>\n<h2><a id=\"post-6915-_c4qfwg9bsbmb\"><\/a><strong>When to Use each File Type?<\/strong><\/h2>\n<p>Each file format has its own strengths and weaknesses that only come into play when you want to start editing images. For a regular user that snaps 1-2 pictures a week and shares them online, image file formats make very little practical difference. However, for a professional who edits hundreds of images a day for a living, using a particular format matters a whole lot.<\/p>\n<p>Choosing the right file format will depend on the kind of effect you are most interested in. For example, PNG excels in transparency, so if you want to create 2D images that appear layered as if they\u2019re 3D, you should definitely use PNG. If you\u2019re working with photos, then you can use JPG, but if you\u2019re the ones taking the photo, you should consider using RAW formats so that whoever works with them later on has the full range of editing options.<\/p>\n<p>Finally, the hardware you\u2019re using will matter too. If it happens that you cannot afford Adobe Creative Suite, you can use whatever that works for you across all devices. In short, the file format you choose to use should be whichever one that makes your life and work the easiest.<\/p>\n<h2><a id=\"post-6915-_bews75hxdt3i\"><\/a><strong>PNGs or JPGs?<\/strong><\/h2>\n<p>JPG images work best when there\u2019s a rich color and object variety in the scene. This way, any blurriness and jagged lines are easily overlooked by the average observer. However, if you want to make the image larger, resizing it will diminish its quality. In this case, you would have to go back to the initial steps and use a better camera. However, this will not be necessary if you\u2019re trying to decrease the size of the image.<\/p>\n<p>In contrast, PNG file format is best used when cropping photos and layering them on top of one another, which is commonly termed as \u201cphotoshopping\u201d. All JPG images have a solid white background but PNG images have a transparent background, which allows for a much nicer fit of different elements.<\/p>\n<h3><a id=\"post-6915-_ce918repf9dw\"><\/a><strong>When to use JPG<\/strong><\/h3>\n<p>JPG can present an image with some compression, which offers you a lot of flexibility when uploading thousands of them to a website. 1% compression on a JPG will result in a negligible quality loss but may reduce the file size by 4-5%. When you\u2019ve got millions of images, using JPG can save you a lot of money and bandwidth. Of course, if you\u2019ve got the budget, that might not matter. However, it is still an important factor to consider when working with these image files.<\/p>\n<h3><a id=\"post-6915-_lmsvah7st7pv\"><\/a><strong>When to use PNG<\/strong><\/h3>\n<p>The main advantage of PNG is in its transparency, however this might not be fully supported by all browsers. Keep in mind that outdated software and hardware are common, meaning that a fancy PNG image might not appear as you expect it to be to all users.<\/p>\n<p>A PNG file can get quite big, especially while you\u2019re still working on it. If size and compatibility isn\u2019t a concern to you, PNG files should always be your first choice, but only until the editing process is finished. Once the image is completed, you should probably use some other format that\u2019s more suited to whatever it is you want to accomplish.<\/p>\n<h3><a id=\"post-6915-_joapmoemk3d7\"><\/a><strong>When to use GIF<\/strong><\/h3>\n<p>The GIF file format is great for simple, quickly consumed animated content that doesn\u2019t require any user input to play around with. GIF was originally a static image format but was soon adapted to behave like a video file in the early days of dialup internet that was both slow and expensive.<\/p>\n<p>Granted, GIF files have poor image quality but the format is extremely well supported by both hardware and software. Nonetheless, be careful not to combine text and GIFs on the same page. Either go with just text or with GIFs but avoid the combination since the two together can be too distracting.<\/p>\n<h3><a id=\"post-6915-_penwtgqfbeav\"><\/a><strong>When to use TIFF<\/strong><\/h3>\n<p>Whenever you have high-quality raster images for printing, TIFF is often the most suitable file format. It\u2019s also the best format for storing HD images without taking up too much space. TIFF file format\u2019s compatibility with various software and hardware is superb and the flexibility in terms of editing options is astounding. Only graphics professionals and experts who deal with HD images on a daily basis should only ever concern themselves with TIFF.<\/p>\n<h3><a id=\"post-6915-_8oli39rm37ld\"><\/a><strong>When to use PSD<\/strong><\/h3>\n<p>Photoshop is a part of Adobe Creative Cloud\u2019s group of programs that are meant to work together. This means that you\u2019ll most likely be using it alongside all the other Adobe graphic design programs, such as Illustrator. Although the PSD file format does have an admirable level of compatibility with programs outside the Adobe suite, you should still only try to use it with Photoshop. In other words, use PSD only when you\u2019re using the Adobe Creative Cloud suite of programs.<\/p>\n<h3><a id=\"post-6915-_ptotv7i5lvl2\"><\/a><strong>When to use RAW<\/strong><\/h3>\n<p>RAW file formats typically require proprietary software for editing, but it will provide you with complete control over every pixel in the image. Everything from sharpness to contrast and saturation can be altered in any way that you want without the loss of image quality. However, unless you are a professional photographer or a designer that deals directly with them, it\u2019s unlikely you\u2019ll ever have to deal with RAW file formats.<\/p>\n<h3><a id=\"post-6915-_ckrdazammwc8\"><\/a><strong>When to use PDF<\/strong><\/h3>\n<p>PDF file format is best known for text documents but the format actually allows for all sorts of rich multimedia additions, such as hyperlinks and images. If you want to create a detailed presentation or a fancy report with graphs, texts, images and hyperlinks, consider using PDF.<\/p>\n<h3><a id=\"post-6915-_5yjnk1p8nos3\"><\/a><strong>When to use EPS<\/strong><\/h3>\n<p>EPS file format is largely outdated and there\u2019s no need to ever use it unless absolutely needed. However, plenty of big companies has at least one department with outdated hardware and software where the only image file format that makes sense to use is EPS. Simply put, it\u2019s only used in situations where no other file format works.<\/p>\n<p><strong>When to use AI<\/strong><\/p>\n<p>Being another file format from the Adobe Creative Cloud, AI is best used when you\u2019re searching for the highest degree of cross-compatibility (a.k.a when you\u2019re already using the rest of Adobe products). Although it is still possible to use a third-party program for AI files, simply opening and editing an AI file across the Adobe suite will make it much easier for you. This will help cut down all the time needed to work on your project.<\/p>\n<p><strong>Conclusion<\/strong><\/p>\n<p>All in all, we hope that this article has been helpful in understanding the differences between all the raster and vector image file formats as well as figuring out when to and when not to use a certain file type. Some file types will be better for specific purposes, hence be sure to take note of all the information given. If you are a professional designer, this can save you a lot of time and hassle when working on your next design project!<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Different types of image file formats You\u2019ve probably come across different image formats online, such as PNG, JPEG and GIF. Although these graphic file formats do differ in size, function,&hellip;<\/p>\n","protected":false},"author":2,"featured_media":6926,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[8],"tags":[],"class_list":["post-6915","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guides"],"uagb_featured_image_src":{"full":["https:\/\/designbro.com\/blog\/wp-content\/uploads\/word-image-100-1.png",792,375,false],"thumbnail":["https:\/\/designbro.com\/blog\/wp-content\/uploads\/word-image-100-1-150x150.png",150,150,true],"medium":["https:\/\/designbro.com\/blog\/wp-content\/uploads\/word-image-100-1-300x142.png",300,142,true],"medium_large":["https:\/\/designbro.com\/blog\/wp-content\/uploads\/word-image-100-1-768x364.png",768,364,true],"large":["https:\/\/designbro.com\/blog\/wp-content\/uploads\/word-image-100-1.png",792,375,true],"1536x1536":["https:\/\/designbro.com\/blog\/wp-content\/uploads\/word-image-100-1.png",792,375,true],"2048x2048":["https:\/\/designbro.com\/blog\/wp-content\/uploads\/word-image-100-1.png",792,375,true],"penci-single-full":["https:\/\/designbro.com\/blog\/wp-content\/uploads\/word-image-100-1.png",792,375,false],"penci-slider-full-thumb":["https:\/\/designbro.com\/blog\/wp-content\/uploads\/word-image-100-1.png",792,375,false],"penci-full-thumb":["https:\/\/designbro.com\/blog\/wp-content\/uploads\/word-image-100-1.png",792,375,false],"penci-slider-thumb":["https:\/\/designbro.com\/blog\/wp-content\/uploads\/word-image-100-1.png",792,375,false],"penci-magazine-slider":["https:\/\/designbro.com\/blog\/wp-content\/uploads\/word-image-100-1.png",780,369,false],"penci-thumb":["https:\/\/designbro.com\/blog\/wp-content\/uploads\/word-image-100-1.png",585,277,false],"penci-masonry-thumb":["https:\/\/designbro.com\/blog\/wp-content\/uploads\/word-image-100-1.png",585,277,false],"penci-thumb-square":["https:\/\/designbro.com\/blog\/wp-content\/uploads\/word-image-100-1.png",585,277,false],"penci-thumb-vertical":["https:\/\/designbro.com\/blog\/wp-content\/uploads\/word-image-100-1.png",480,227,false],"penci-thumb-small":["https:\/\/designbro.com\/blog\/wp-content\/uploads\/word-image-100-1.png",263,125,false]},"uagb_author_info":{"display_name":"Christiaan","author_link":"https:\/\/designbro.com\/blog\/author\/chris\/"},"uagb_comment_info":0,"uagb_excerpt":"Different types of image file formats You\u2019ve probably come across different image formats online, such as PNG, JPEG and GIF. Although these graphic file formats do differ in size, function,&hellip;","_links":{"self":[{"href":"https:\/\/designbro.com\/blog\/wp-json\/wp\/v2\/posts\/6915","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/designbro.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/designbro.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/designbro.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/designbro.com\/blog\/wp-json\/wp\/v2\/comments?post=6915"}],"version-history":[{"count":0,"href":"https:\/\/designbro.com\/blog\/wp-json\/wp\/v2\/posts\/6915\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/designbro.com\/blog\/wp-json\/wp\/v2\/media\/6926"}],"wp:attachment":[{"href":"https:\/\/designbro.com\/blog\/wp-json\/wp\/v2\/media?parent=6915"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/designbro.com\/blog\/wp-json\/wp\/v2\/categories?post=6915"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/designbro.com\/blog\/wp-json\/wp\/v2\/tags?post=6915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}