1. The basics of\u00a0 image files<\/a> 3. Raster image formats<\/a> Every single graphic you see online is an image file in a certain format. Pretty much everything you see printed on paper, plastic, or clothing came originally from an image file. Each format has a specific use or sometimes multiple uses. Choosing the correct format is vital in order to get the perfect image exactly how you wanted it, choosing the wrong format can lead to a serious quality reduction,\u00a0 or even completely missing images.<\/p>\n Fundamentally we have two kinds of image file formats, these are Vector image format files and Raster image format files.<\/p>\n <\/p>\n In very general terms Raster files are made up of individual pixels and every single pixel contains color data. The whole image is an incredibly complex combination of single colored dots. For this reason, the files are larger in size. Photographs are in raster image format. The quality depends on the number of pixels per inch (PPI) and image dimensions. Raster images can not be scaled up without losing definition and quality.<\/p>\n Vector files are much smaller because they don’t contain single-pixel data instead they rely on a series of paths or connections (all done with complicated math that you don’t have to worry about). Because of this system Vector image format files<\/a> can be scaled with no loss of quality, allowing for quick response zoom on websites for example. However, they don’t have the same color definition regarding graduation and blending.<\/p>\n The key to your choice is what you wish to create and how you wish to use the image. a one-off photo image would be perfect in the highly detailed raster image format, whilst a multiuse logo would be ideal in Vector image format. To learn more about the differences between vector and raster, check out\u00a0Vector vs Raster: What\u2019s the difference?<\/a><\/p>\n <\/p>\n The file size is another important discussion point. The\u00a0file size\u00a0is the amount of space your file\u00a0takes up on your storage, such as a computer hard drive. Image files, especially Raster files contain a vast amount of information so it is important to lesson this by using a compression tool such as\u00a0TinyPNG<\/a>. Compression tools can reduce the file size by up to 80%, saving you space, saving you time on data transmission, and allowing you to send the file online. It is also important for browser speed.<\/p>\n It’s worth noting at this stage that there are two types of compression \u201clossy\u201d and \u201clossless\u201d. Both have advantages and disadvantages:<\/p>\n Lossless Compression: <\/b>no information is actually removed. This is often very important when needing to maintain quality. Lossy compression can therefore reduce the file size much more than lossless, but will reduce the quality.<\/p>\n <\/p>\n Whilst some image formats are extremely useful they may not be supported by every browser. If you want to upload some image format to your website, make sure that it is supported by at least the most popular web browsers.<\/p>\n <\/p>\n The internet is a dynamic industry and new image formats are coming out all the time.\u00a0 Here are a few of the most important ones that you’ll be hearing about and seeing soon, if not already.<\/p>\n <\/p>\n Google’s WebP is a modern\u00a0image format\u00a0that is all about providing better lossless and lossy\u00a0compression for images on the web. Smaller images make the web faster, and WebP is working on creating these smaller images but keeping the richness. WebP also supports the growing trend of animated images and won’t stop there. It’s still in development but it’s going to be big.<\/p>\n Check out the Google Developers website to learn more about WebP<\/a>.<\/p>\n\t\t Pros Cons <\/p>\n HEIF stands for High-Efficiency Image File Format and the main focus is on streamlining storage of images. Again it is trying to keep the high quality but in smaller compressed files. HEIF has 10 levels of compression to choose from and has super-fast encoding and decoding, and being lightweight it doesn’t overload the processing system.<\/p>\n You can learn more details about\u00a0HEIF on Wikipedia<\/a>.<\/p>\n\t\t Pros Cons <\/p>\n Considered to be the up-and-coming image file format of the future is AVIF, which stands for “AV1 Image File Format”. This is essentially the specification for storing still and animated images compressed with AV1 in the HEIF file format. AV1 is the royalty-free video coding format that has most tech experts believing it is the next step in media compression.<\/p>\n You can take a look at some great examples of AVIF plus a comparison with WebP, JPG, PNG at Jakearchibald<\/a>.<\/p>\n\t\t Pros Cons *It is expected to be available on all popular browsers soon, as the codecs are open source and it can be easier adopted.<\/em><\/span><\/p>\n\t<\/div>\n\n\t\t\t<\/div>\n\t\n <\/p>\n <\/p>\n As we mentioned above Raster images are constructed by a series of pixels, or individual points, to form an image.\u00a0JPEG,\u00a0GIF, and\u00a0PNG\u00a0are all raster image extensions. Typically Raster image formats are used for photographs and digital artwork but also for web graphics and social media content. Raster files need to be saved at the exact dimensions of their usage as an attempt to scale will affect the quality. Here are the main Raster Image file formats:<\/p>\n <\/p>\n Portable Network Graphics are fantastic for interactive web documents and projects but are not suitable for print projects. The reason why PNG is popular for web sites is that your image can be on a transparent background (built-in), meaning your image doesn’t have to sit on a block of color, you can see everything behind it. It also supports more colors (up to 16 million) and produces a sharp image. It is a “lossless” format (see above) so you can keep the quality even with compression. The idea of PNG is to improve on GIF and it is rapidly becoming a standard web image format.<\/p>\n Perfect for:<\/strong> Web images<\/p>\n\t\t Pros Cons <\/p>\n You’ve heard of JPEG, it’s probably the most frequent type of image format file you find on the web these days. JPEG is Joint Photographic Experts Group after the team that developed it. Commonly used for web projects, especially large images such as banners, Microsoft Office documents, email graphics and high-resolution printing projects it is also a popular format for digital camera images. JPEG has “lossy” compression so the quality will decrease alongside the file size, but you may not even notice it. There is a choice of compression so you do have some control over the size\/quality ratio. As JPEG can be easily compressed they are ideal for emailing, especially if you want to send clients previews of work in progress.<\/p>\n Perfect for:\u00a0<\/strong>Web Images, Non-Professional Printing, E-Mail, Powerpoint<\/p>\n\t\t Pros Cons <\/p>\n Raster Image format GIF is frequently seen in the form of animations on things like Facebook messenger and Tumblr, other social media memes but also on websites in banner ads and email images. GIF stands for Graphic Interchange Format, and they are in”lossless” format, although you can significantly reduce the size with the customizable settings of image information and the number of colors. Gifs are usually pretty small anyway, with quick upload taking precedent over high image quality. GIFs do have a limited color capacity of 256 but this keeps the file size lower than other Raster image formats. However whilst 256 may photos often have thousands of colors, so they can look disappointing dint he GIF format.\u00a0 seem like quite a lot\u00a0 In addition, they have the ability to be transparent. For animation GIF images keep all the frames and timing in one file, which helps.<\/p>\n Perfect for:<\/strong> Animations, small icons<\/p>\n\t\t Pros Cons <\/p>\n Out of the image formats discussed so far, the chances are that RAW is the one you’ve never heard of. Raw is the first or the rawest image from your digital camera or even your scanner.\u00a0 Once you’ve uploaded your photo and edited it, then it is saved using the image extensions such as JPEG. Because they capture every visual element of the original photo they are valuable as you can always return to them but they will need changing before you can transfer and resize the image. Basically, they are the negative of the photographic image. There are many RAW formats, some especially for certain brands of camera, such as NEF for Nikon or CRW for Canon, in fact, each manufacturer has their own format.<\/p>\n Perfect for:<\/strong> Photography<\/p>\n\t\t Pros Cons <\/p>\n The Tagged Image File Format or TIFF is a large raster file that has “lossless compression”, so there is no loss of the original. You can save, copy, resave, or even compress the original form. and has the advantage of being able to recover the original even after playing with it. However with this high quality comes a large file size, not ideal for the web as the loading times will put people off.<\/p>\n Despite TIFF images’ ability to recover their quality after manipulation, you should avoid using this file type on the web — it can take forever to load. TIFF files are generally used when saving photographs for print, in desktop publishing, or archive copies.<\/p>\n Perfect for:<\/strong> Saving Photos, desktop publishing, and archiving<\/p>\n\t\t Pros Cons <\/p>\n BMP (Bitmap Image File) is the standard proprietary format for Microsoft Windows. It is a Raster image format of very high quality (no compressions0) but subsequently large file sizes. It’s good for photographic images and other very detailed images.<\/p>\n Perfect for:<\/strong> High-quality detailed images such as archives, photos, etc<\/p>\n\t\t Pros Cons <\/p>\n Another proprietary format is PSD files that are created and saved in Adobe Photoshop. PSD actually stands for Photoshop Document. PSDs use layered image formats that allow editing and adjustments but can also include vector layers. After Photoshopping PSDs can then be exported to other file image formats before sending, transferring, or printing. PSDs are great for animations and video editing too.<\/p>\n Perfect for:<\/strong> Editing before converting<\/p>\n\t\t Pros Cons <\/p>\n <\/p>\n So we’ve covered a range of Raster image formats, which are generally used for the finer detailed requirements. Vector image formats whilst not as detailed are much more flexible. A master file that can be used for multiple purposes and scaled to fit whatever your requirements are. Used for digital illustrations, fonts, branding, logos, icons, etc Vector image formats work well because they lose none of the detail and remain identical whatever the size.<\/p>\n <\/p>\n Scalable Vector Graphics are right at the top of the popularity stakes for web browsers. Developers often use SVG\u00a0 creation of logos, icons, and illustrations as it is ideal for two-dimensional graphics and can be edited in graphic and text editing programs.\u00a0 It also has significantly smaller file sizes than some of the other options making it a fast uploading choice.<\/p>\n Perfect for:<\/strong>\u00a0All web graphics<\/p>\n\t\t Pros Cons You may be interested in The Best Places Where You Can Find Web Design Inspiration<\/a><\/p>\n <\/p>\n Adobe’s PDFs are pretty common, you’ll have seen them when downloading images, no doubt. PDFs (Portable Document Format) allow you to view the format, with no specific software from any device, although you must have the free Adobe PDF reader. It’s, therefore, a great tool for graphic sharing as it works on all devices, browsers, applications, and operating systems. Adobe Illustrator and Photoshop can export directly to PDF ready for printing. there are editing options but these are additions.<\/p>\n Perfect for:<\/strong>\u00a0Viewing and\/or printing multipage documents with various elements<\/p>\n\t\t Pros Cons <\/p>\n EPS or Encapsulated PostScript is primarily a vector image format, although it can include raster image data. EPS files can be opened and created on almost all design software including CoralDraw and Adobe Illustrator and are perfect for creating very high-resolution graphics for print purposes.<\/p>\n Perfect for:<\/strong>\u00a0Illustration and artwork<\/p>\n\t\t Pros Cons <\/p>\n Ai is the file format used by Adobe Illustrator<\/a> and is very popular with designers as it is a reliable image format for all kinds of projects, be they web or print. Mainly vector-based but can include embedded and linked raster images and exported to other formats for reviewing, printing, editing, and web use. AI isn’t supported on all browsers so it’s with considering converting them.<\/p>\n Perfect for:<\/strong> Adobe Illustrator projects<\/p>\n\t\t Pros Cons <\/p>\n A\u00a0CDR<\/b> file is a CorelDRAW extension for use with all Corel applications like Corel Paintshop Pro and CorelDRAW Graphics Suite It is a vector graphics file that stores an encoded digital image, that is compressed and can be opened and worked on in a vector editing software program. It is widely used in the design industry for artistic work and various graphics data such as brochures, tabloids, and postcards.<\/p>\n Perfect for:<\/strong>\u00a0CorelDRAW projects<\/p>\n\t\t Pros Cons <\/p>\n The main choice of file image format is down to your use of the image. From this basis, you can select Raster or Vector, and from there narrow down your options. There is no need to get overly confused by the Acronyms, make a choice, and stick to it for similarly used images. Key considerations are size and storage which are important for detail, quality, and speed. This brief article covers the main points and is hopefully a good base from which you can jump into the world of file formats or at least understand some of the issues and need for different image formats.<\/p>\n You may also be interested in some of these related articles:<\/p>\n Image formats should be clear cut -you’ve created an image, logo, animation, poster… so you save it, and now you can just use it for anything, right? If, if only that was the case, a one size fits all image format system, would make life much easier. Instead, we are overwhelmed by a series of…<\/p>\n","protected":false},"author":8,"featured_media":35278,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,989],"tags":[686,1117,18,1177,29,683,1169,1173,398,1170,1175,705,384,780,650,1171,1178,1176,688,1172,1174],"yoast_head":"\n
\n1.1.\u00a0Vector and raster image formats<\/a>
\n1.2. File Size of image Formats<\/a>
\n1.3. Support for Image Formats<\/a>
\n2. New image formats to use in 2021<\/a>
\n2.1.\u00a0WebP<\/a>
\n2.2. HEIF<\/a>
\n2.3. AVIF<\/a><\/p>\n\t<\/div>\n\n\t\n\t
\n3.1. PNG<\/a>
\n3.2. JPEG<\/a>
\n3.3. GIF<\/a>
\n3.4. RAW<\/a>
\n3.5. TIFF<\/a>
\n3.6. BMP<\/a>
\n3.7. PSD<\/a>
\n4. Vector image formats<\/a>
\n4.1. SVG<\/a>
\n4.2. PDF<\/a>
\n4.3. EPS<\/a>
\n4.4. AI<\/a>
\n4.5. CDR<\/a><\/p>\n\t<\/div>\n\n\t\t\t<\/div>\n\t\n1. The basics of image files<\/h3>\n
1.1. Vector and raster image formats<\/h5>\n
1.2. File Size of image Formats<\/h5>\n
\nLossy Compression:<\/b>\u00a0deleting unnecessary information, and reducing the complexity of existing information.<\/p>\n1.3. Browser support for Image Formats<\/h5>\n
2. New image formats to use in 2021<\/h3>\n
2.1.\u00a0WebP<\/span><\/h4>\n
![\"WebP](\"https:\/\/i.graphicmama.com\/blog\/wp-content\/uploads\/2020\/09\/29080019\/WebP-new-image-file-format1.png\")
<\/p>\n
\n<\/strong>\u25aa Speed and size
\n\u25aa Supporting transparency
\n\u25aa Support animation<\/p>\n\t<\/div>\n\n\t\n\t
\n<\/strong>\u25aa Poor browser support<\/p>\n\t<\/div>\n\n\t\t\t<\/div>\n\t\n2.2. HEIF<\/span><\/h4>\n
![\"HEIF](\"https:\/\/i.graphicmama.com\/blog\/wp-content\/uploads\/2020\/09\/29081205\/HEIF-new-image-file-format1.png\")
<\/p>\n
\n<\/strong>\u25aa Very light
\n\u25aa Excellent quality
\n\u25aa Support animation
\n\u25aa Supporting transparency<\/p>\n\t<\/div>\n\n\t\n\t
\n<\/strong>\u25aa Poor browser support<\/p>\n\t<\/div>\n\n\t\t\t<\/div>\n\t\n2.3. AVIF<\/span><\/h4>\n
![\"AVIF](\"https:\/\/i.graphicmama.com\/blog\/wp-content\/uploads\/2020\/09\/29081229\/AVIF-new-image-file-format1.png\")
<\/p>\n
\n<\/strong>\u25aa The lightest file format
\n\u25aa Supporting transparency
\n\u25aa Support animation
\n\u25aa High dynamic range
\n\u25aa Wide color gamut<\/p>\n\t<\/div>\n\n\t\n\t
\n<\/strong>\u25aa Supported only by Chrome and Firefox.*<\/p>\n3. Raster image file formats<\/h3>\n
3.1. PNG<\/span><\/h4>\n
![\"PNG](\"https:\/\/i.graphicmama.com\/blog\/wp-content\/uploads\/2020\/09\/29081324\/PNG-popular-image-file-format1.png\")
<\/p>\n
\n<\/strong>\u25aa Inbuilt transparency
\n\u25aa Great browser support
\n\u25aa Compresses without loss of quality
\n\u25aa Grear color choices and depths<\/p>\n\t<\/div>\n\n\t\n\t
\n<\/strong>\u25aa Not suitable for printing projects
\n\u25aa Large files sizes<\/p>\n\t<\/div>\n\n\t\t\t<\/div>\n\t\n3.2. JPEG<\/span><\/h4>\n
![\"JPEG](\"https:\/\/i.graphicmama.com\/blog\/wp-content\/uploads\/2020\/09\/29081901\/JPEG-popular-image-file-format1.png\")
<\/p>\n
\n<\/strong>\u25aa Potential smaller file size including compression choice, excellent for emailing
\n\u25aa Great browser support, compatible with nearly all software
\n\u25aa High resolution perfect for printing
\n\u25aa Quick downloads<\/p>\n\t<\/div>\n\n\t\n\t
\n<\/strong>\u25aa No transparency
\n\u25aa Quite heavy
\n\u25aa Lossy compression, you will lose some information and uneditable once compressed
\n\u25aa Flat image format which means edits can’t be undone<\/p>\n\t<\/div>\n\n\t\t\t<\/div>\n\t\n3.3. GIF<\/span><\/h4>\n
![\"GIF](\"https:\/\/i.graphicmama.com\/blog\/wp-content\/uploads\/2020\/09\/29082040\/GIF-animated-image-file-format1.png\")
<\/p>\n
\n\u25aa <\/strong>Great for small animations
\n\u25aa Great browser support
\n\u25aa Transparency
\n\u25aa Quick loading<\/p>\n\t<\/div>\n\n\t\n\t
\n\u25aa <\/strong>Limited color palette of 256 colors (not great for photos)
\n\u25aa Flat image format, so editing cannot be undone
\n\u25aa Uncompressed file size can be huge<\/p>\n\t<\/div>\n\n\t\t\t<\/div>\n\t\n3.4. RAW<\/span><\/h4>\n
![\"RAW](\"https:\/\/i.graphicmama.com\/blog\/wp-content\/uploads\/2020\/09\/29082212\/RAW-image-formats1.png\")
<\/p>\n
\n<\/strong>\u25aa Has the metadata, the unprocessed, fully informed version
\n\u25aa High Quality<\/p>\n\t<\/div>\n\n\t\n\t
\n\u25aa <\/strong>Hughe file size
\n\u25aa May need converting before editing
\n\u25aa Printers won’t print RAW image formats<\/p>\n\t<\/div>\n\n\t\t\t<\/div>\n\t\n3.5. TIFF<\/span><\/h4>\n
![\"TIFF\u00a0Image](\"https:\/\/i.graphicmama.com\/blog\/wp-content\/uploads\/2020\/09\/29082253\/TIFF-Image-Format1.png\")
<\/p>\n
\n\u25aa <\/strong>Lossless format but has compression options
\n\u25aa Extremely high quality
\n\u25aa Can save with transparency
\n\u25aa Supported by a number of apps<\/p>\n\t<\/div>\n\n\t\n\t
\n\u25aa <\/strong>Enormous file size
\n\u25aa Not all application support multipage TIFFs<\/p>\n\t<\/div>\n\n\t\t\t<\/div>\n\t\n3.6. BMP<\/span><\/h4>\n
![\"BMP\u00a0Image](\"https:\/\/i.graphicmama.com\/blog\/wp-content\/uploads\/2020\/09\/29082310\/BMP-Image-Format1.png\")
<\/p>\n
\n\u25aa <\/strong>High-quality
\n\u25aa Supported by almost every system<\/p>\n\t<\/div>\n\n\t\n\t
\n\u25aa <\/strong>Large file size, no compression
\n\u25aa Does not support CMYK<\/p>\n\t<\/div>\n\n\t\t\t<\/div>\n\t\n3.7. PSD<\/span><\/h4>\n
![\"PSD\u00a0Image](\"https:\/\/i.graphicmama.com\/blog\/wp-content\/uploads\/2020\/09\/29082345\/PSD-Image-Format1.png\")
<\/p>\n
\n\u25aa <\/strong>Can work with Vectos as well as Raster
\n\u25aa Supports layers, transparencies, effects
\n\u25aa Extremely flexible
\n\u25aa Works with video and animations
\n\u25aa Web optimization features and sizing<\/p>\n\t<\/div>\n\n\t\n\t
\n\u25aa <\/strong>Photoshop only use
\n\u25aa Needs to convert before sending or printing
\n\u25aa Can be large sizes<\/p>\n\t<\/div>\n\n\t\t\t<\/div>\n\t\n4. Vector image file formats<\/h3>\n
4.1. SVG<\/span><\/h4>\n
![\"SVG](\"https:\/\/i.graphicmama.com\/blog\/wp-content\/uploads\/2020\/09\/29082406\/SVG-Vector-image-file-Format1.png\")
<\/p>\n
\n\u25aa <\/strong>Very light
\n\u25aa Can be used for animation
\n\u25aa Can be used for interactive graphics, infographics,\u00a0 graphs, and diagrams
\n\u25aa Can be added directly to HTML without an image link<\/p>\n\t<\/div>\n\n\t\n\t
\n\u25aa <\/strong>Not great for high color depth
\n\u25aa Not optimized for printing<\/p>\n\t<\/div>\n\n\t\t\t<\/div>\n\t\n4.2. PDF<\/span><\/h4>\n
![\"PDF](\"https:\/\/i.graphicmama.com\/blog\/wp-content\/uploads\/2020\/09\/29082608\/PDF-vector-raster-image-file-Format1.png\")
<\/p>\n
\n\u25aa <\/strong>Ready to print (prefered delivery format of most printers)
\n\u25aa Great for displaying documents containing text and graphics such as Posters, Brochures, Flyers, and Magazines
\n\u25aa Easy to download and print multiple pages<\/p>\n\t<\/div>\n\n\t\n\t
\n\u25aa <\/strong>Editing is additional
\n\u25aa May need to convert to other formats<\/p>\n\t<\/div>\n\n\t\t\t<\/div>\n\t\n4.3. EPS<\/span><\/h4>\n
![\"EPS](\"https:\/\/i.graphicmama.com\/blog\/wp-content\/uploads\/2020\/09\/29082633\/EPS-vector-image-file-Format1.png\")
<\/p>\n
\n\u25aa <\/strong>Universal format, viewed on many applications
\n\u25aa Can be converted into raster graphics
\n\u25aa Automated resolution<\/p>\n\t<\/div>\n\n\t\n\t
\n\u25aa <\/strong>Editing limited to certain apps
\n\u25aa Some printers don’t like EPS
\n\u25aa Not well supported on browsers<\/p>\n\t<\/div>\n\n\t\t\t<\/div>\n\t\n4.4. AI<\/span><\/h4>\n
![\"Adobe](\"https:\/\/i.graphicmama.com\/blog\/wp-content\/uploads\/2020\/09\/29082653\/Adobe-Illustrator-vector-image-file-format1.png\")
<\/p>\n
\n\u25aa <\/strong>Excellent editing for vector illustrations
\n\u25aa Great for combined vector\/raster projects such as posters, flyers, brochures, etc.<\/p>\n\t<\/div>\n\n\t\n\t
\n\u25aa <\/strong>Not supported by all browsers
\n\u25aa Limited raster editing<\/p>\n\t<\/div>\n\n\t\t\t<\/div>\n\t\n4.5. CDR<\/span><\/h4>\n
![\"CDR](\"https:\/\/i.graphicmama.com\/blog\/wp-content\/uploads\/2020\/09\/29082718\/CDR-editable-image-file-format1.png\")
<\/p>\n
\n\u25aa <\/strong>Convertable
\n\u25aa Popular in the artistic community
\n\u25aa Scalable<\/p>\n\t<\/div>\n\n\t\n\t
\n\u25aa\u00a0<\/strong>Only for use on Corel applications supported by Windows
\n\u25aa Only for two-dimensional images<\/p>\n\t<\/div>\n\n\t\t\t<\/div>\n\t\nFinal Words<\/h5>\n
\n