{"id":3820,"date":"2019-01-27T00:00:00","date_gmt":"2019-01-26T23:00:00","guid":{"rendered":"https:\/\/myn006.staging.360vier.net\/image-format-guide\/"},"modified":"2025-06-04T19:03:40","modified_gmt":"2025-06-04T17:03:40","slug":"image-format-guide","status":"publish","type":"post","link":"https:\/\/www.mynd.com\/en\/blog\/image-format-guide\/","title":{"rendered":"PNG, JPG, EPS &#038; Co \u2013 When to use which format? The Image Format Guide"},"content":{"rendered":"<p><strong>When using image files, you have certainly stumbled across different file extensions before. But what exactly is behind PNG, JPEG, EPS &amp; Co? And which format is suitable for which application? Read all relevant information about the different image formats below.<\/strong> <\/p>\n<p> No desire to read? Listen to the blogcast here: <\/p>\n<p> <script src=\"https:\/\/www.buzzsprout.com\/270568\/1021609-the-perfect-video-length-for-any-application-in-2019.js?player=small\" type=\"text\/javascript\" charset=\"utf-8\"><\/script><\/p>\n<style>\n    .episode .podcast_name, .episode .episode_name, .episode .meta p, .episode .description {\n      color : #000000 !important;\n    }\n  <\/style>\n<link rel=\"stylesheet\" href=\"https:\/\/assets.buzzsprout.com\/assets\/players\/small-player-beta-6b9dd67abe1031871acac5b96c23fcded9e805269947ef5683f4909e140f1892.css\">\n<div id=\"episode_1021609\" class=\"episode\">\n        <iframe src=\"https:\/\/www.buzzsprout.com\/270568\/episodes\/1021609-the-perfect-video-length-for-any-application-in-2019?client_source=small_player&amp;iframe=true&amp;referrer=https:\/\/www.buzzsprout.com\/270568\/1021609-the-perfect-video-length-for-any-application-in-2019.js?player=small\" loading=\"lazy\" width=\"100%\" height=\"70\" frameborder=\"0\" scrolling=\"no\" title=\"Mynd Blogcast USA, The Perfect Video Length for Any Application in 2019\"><\/iframe><\/p>\n<div class=\"buzz_share\">\n<div class=\"buzz_share_item\">\n            <a data-popup=\"[&quot;height=655,width=420,top=100,left=100&quot;]\" class=\"buzz_linkedin\" title=\"Share on LinkedIn\" onclick=\"window.open(&#039;https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=https:\/\/www.buzzsprout.com\/270568\/episodes\/1021609-the-perfect-video-length-for-any-application-in-2019&#039;, &#039;&#039;, &#039;height=655,width=420,top=100,left=100&#039;); return false;\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=https:\/\/www.buzzsprout.com\/270568\/episodes\/1021609-the-perfect-video-length-for-any-application-in-2019\" target=\"_blank\" rel=\"noopener\">Share on LinkedIn<\/a>\n          <\/div>\n<\/p><\/div>\n<div class=\"meta\">\n      <\/div>\n<\/p><\/div>\n<p><\/p>\n<p> Graphics are divided into two basic formats:<\/p>\n<ul>\n<li>Vector graphics.<\/li>\n<li>Pixel graphics.<\/li>\n<\/ul>\n<p><span id=\"vektorgraphics\"><\/span><\/p>\n<h2><a class=\"anchor\" href=\"#vektorgraphics\" title=\"Direct link to Vektorgraphics.\" aria-label=\"Direct link to Vektorgraphics.\"><\/a> Vektorgraphics.<\/h2>\n<p>A <a href=\"https:\/\/techterms.com\/definition\/vectorgraphic\/\" rel=\"noopener\" target=\"_blank\">vector graphic<\/a> contains <strong>line and curve information<\/strong>. These are <strong>defined by vectors<\/strong> that describe the graph based on its geometric properties. Objects are not defined using small pixels, but according to the description of their elements. While a circle in a pixel graphic consists of many individual pixels, the circle in a vector graphic contains information such as the diameter of the circle, the color, and the position of the center.<\/p>\n<p><span id=\"the-most-important-output-formats-of-vector-graphics\"><\/span><\/p>\n<h3><a class=\"anchor\" href=\"#the-most-important-output-formats-of-vector-graphics\" title=\"Direct link to The most important output formats of vector graphics.\" aria-label=\"Direct link to The most important output formats of vector graphics.\"><\/a> The most important output formats of vector graphics.<\/h3>\n<ul style=\"list-style-type: disc;\">\n<li><strong>.Ai<\/strong> (Adobe Illustrator): .Ai is the <strong>vector-based file format of Adobe Illustrator<\/strong>. If the file does not contain pixel images, <strong>scaling is possible with small file sizes<\/strong>. This is a <strong>so-called proprietary file format<\/strong>. This means that the file format depends almost entirely on the software (in this case Adobe Illustrator), and further use outside this software is very difficult.<\/li>\n<\/ul>\n<ul style=\"list-style-type: disc;\">\n<li><strong>.EPS <\/strong>(Encapsulated Postscript): <a href=\"https:\/\/www.adobe.com\/de\/products\/postscript.html\" rel=\"noopener\" target=\"_blank\">PostScript<\/a>, which can contain pixel images and vector graphics. The i<strong>mage quality is high despite the small file size<\/strong>. Additional changes of the file are only possible to a limited extent. Likewise, existing pixel images in the file cannot be scaled without loss of quality.<\/li>\n<li><strong>.SVG<\/strong> (Scalable Vector Graphics): .<strong>SVG is based on XML and displays two-dimensional vector graphics online<\/strong>. Since SVG files can be read by a large number of browsers and software, they have <strong>a higher usage rate on the web<\/strong> than .ai or .eps files, for example.<\/li>\n<\/ul>\n<p><span id=\"advantages-of-vector-graphics\"><\/span><\/p>\n<h3><a class=\"anchor\" href=\"#advantages-of-vector-graphics\" title=\"Direct link to Advantages of vector graphics.\" aria-label=\"Direct link to Advantages of vector graphics.\"><\/a> Advantages of vector graphics.<\/h3>\n<p>Vector graphics <strong>can be scaled with very little loss of quality<\/strong>, i.e. the size can be changed at will without impairing the image quality. The graphics have a <strong>small file size and good compression possibilities<\/strong>. Properties of curves, lines, and areas can be edited. A rasterization from vector to pixel graphics, i.e. a conversion of the file into a pixel format, is much easier than vice versa.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/scaling_difference_in_quality-bd074490.webp\" data-image=\"778398\" alt=\"scaling of vector and pixel graphics difference in quality\" loading=\"lazy\"><\/figure>\n<p style=\"text-align: center\"><span style=\"font-size: 11px\">In contrast to pixel graphics (right image), vector graphics (left image) can be scaled without loss of quality.<\/span><\/p>\n<p><span id=\"disadvantages-of-vector-graphics\"><\/span><\/p>\n<h3><a class=\"anchor\" href=\"#disadvantages-of-vector-graphics\" title=\"Direct link to Disadvantages of vector graphics.\" aria-label=\"Direct link to Disadvantages of vector graphics.\"><\/a> Disadvantages of vector graphics.<\/h3>\n<p>In contrast to pixel graphics, <strong>processing is more complex<\/strong>. In order to reproduce a vector graphic, a rasterization is necessary. Likewise, vector graphics are <strong>supported by fewer programs than pixel graphics<\/strong>.<\/p>\n<p><span id=\"areas-of-application\"><\/span><\/p>\n<h3><a class=\"anchor\" href=\"#areas-of-application\" title=\"Direct link to Areas of application.\" aria-label=\"Direct link to Areas of application.\"><\/a> Areas of application.<\/h3>\n<p>Vector graphics are particularly suitable for <strong>geometric graphics and figures as well as for logos, fonts, and technical drawings<\/strong>.<\/p>\n<p><span id=\"most-popular-program\"><\/span><\/p>\n<h3><a class=\"anchor\" href=\"#most-popular-program\" title=\"Direct link to Most popular program.\" aria-label=\"Direct link to Most popular program.\"><\/a> Most popular program.<\/h3>\n<p><a href=\"https:\/\/www.adobe.com\/de\/products\/illustrator.html\" rel=\"noopener\" target=\"_blank\">Adobe Illustrator is the most popular graphics and drawing program<\/a> for editing vector-based files.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/format_and_Program_vector_pixel-221a0b62.webp\" data-image=\"778397\" alt=\"common format and program vector and pixel graphics\" loading=\"lazy\"><\/figure>\n<p><span style=\"font-size: 11px\"><br \/><\/span><\/p>\n<p><span style=\"font-size: 1.125rem\"> <\/span><span style=\"font-size: 1.125rem\"> <\/span><span style=\"font-size: 11px\">Vector and pixel graphics have different formats that can be edited in different programs.<\/span><\/p>\n<p><span id=\"pixel-graphics\"><\/span><\/p>\n<h2><a class=\"anchor\" href=\"#pixel-graphics\" title=\"Direct link to Pixel graphics.\" aria-label=\"Direct link to Pixel graphics.\"><\/a> Pixel graphics.<\/h2>\n<p>A pixel graphic consists of a <strong>large number of square pixels, each of which is assigned a color<\/strong>. The size of the graphic depends on the number of pixels. The image resolution is therefore determined by the number of pixels that determine the height and width of a graphic.<\/p>\n<p><span id=\"the-most-important-output-formats-of-pixel-graphics\"><\/span><\/p>\n<h3><a class=\"anchor\" href=\"#the-most-important-output-formats-of-pixel-graphics\" title=\"Direct link to The most important output formats of pixel graphics.\" aria-label=\"Direct link to The most important output formats of pixel graphics.\"><\/a> The most important output formats of pixel graphics.<\/h3>\n<ul style=\"list-style-type: disc;\">\n<li><strong>.JPEG:<\/strong> JPEG files contain up to <strong>16.7 million colors<\/strong>. The file size is relatively small, whereby compression is accompanied by data loss. The files are <strong>primarily used when a small file size is more important than maximum image quality<\/strong>, for example to optimize loading times of websites.<\/li>\n<\/ul>\n<ul style=\"list-style-type: disc;\">\n<li><strong>.PNG<\/strong>: PNG files have <strong>16.7 million colors and the 8-bit alpha channel<\/strong>, which ensures the transparency of the individual pixels as well as the color information. <strong>The files allow lossless compression<\/strong>. PNG files are mainly suitable for processing graphics with <strong>transparency<\/strong> and transparency gradients as well as complex, high-quality images where the file size can be neglected.<\/li>\n<\/ul>\n<ul style=\"list-style-type: disc;\">\n<li><strong>.GIF: <\/strong>GIF files have <strong>256 colors and transparency.<\/strong> These are simple animations as image files which allow lossless compression. The application is <strong>exclusively intended for web graphics with few colors<\/strong>, as well as <strong>small GIF animations<\/strong>.<\/li>\n<\/ul>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/giphy_2022-01-30-134339_kmcj-a77e0566.gif\" alt=\"Gif Animation\" width=\"600\" data-image=\"xfqevnf0ck5h\" loading=\"lazy\"><\/figure>\n<p><span style=\"font-size: 11px\">The GIF format is suitable for simple image animations.<\/span><\/p>\n<ul style=\"list-style-type: disc;\">\n<li><strong>TIF<\/strong>: TIF graphics have various compression methods and a <strong>color depth of 32 bits<\/strong>. Color depth is the <strong>number of gradations within a gradient<\/strong>. You will find their application in high-quality image files with unaltered representation and high-color depth.<\/li>\n<\/ul>\n<p><span style=\"font-size: 11px\"><\/span><\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/color_depth_bit_gradations-6b22ef6b.webp\" data-image=\"778396\" alt=\"color depth bit gradations\" loading=\"lazy\"><\/figure>\n<p>The number of gradations determines the color depth.<\/p>\n<p><span id=\"advantages-of-pixel-graphics\"><\/span><\/p>\n<h3><a class=\"anchor\" href=\"#advantages-of-pixel-graphics\" title=\"Direct link to Advantages of pixel graphics.\" aria-label=\"Direct link to Advantages of pixel graphics.\"><\/a> Advantages of pixel graphics.<\/h3>\n<p>Pixel graphics have a <strong>program-independent file format<\/strong> as well as various graphic formats for different areas of application. In addition, they contain a wealth of color gradations. Surfaces can be copied and moved. <strong>Each individual pixel can be edited separately<\/strong>.<\/p>\n<p><span id=\"disadvantages-of-pixel-graphics\"><\/span><\/p>\n<h3><a class=\"anchor\" href=\"#disadvantages-of-pixel-graphics\" title=\"Direct link to Disadvantages of pixel graphics.\" aria-label=\"Direct link to Disadvantages of pixel graphics.\"><\/a> Disadvantages of pixel graphics.<\/h3>\n<p>Pixel graphics <strong>cannot be scaled without loss of quality<\/strong>. The <strong>file size is correspondingly high due to the often-detailed graphics<\/strong>. While a transformation from a vector to a pixel graphic is largely possible without any problems, the reverse process, the vectorization of a pixel graphic, is a complex undertaking.<\/p>\n<p><span id=\"areas-of-application\"><\/span><\/p>\n<h3><a class=\"anchor\" href=\"#areas-of-application\" title=\"Direct link to Areas of application.\" aria-label=\"Direct link to Areas of application.\"><\/a> Areas of application.<\/h3>\n<p>First and foremost, pixel graphics are used for image processing and are <strong>suitable for creating complex, artistic graphics<\/strong>.<\/p>\n<p><span id=\"most-popular-program\"><\/span><\/p>\n<h3><a class=\"anchor\" href=\"#most-popular-program\" title=\"Direct link to Most popular program.\" aria-label=\"Direct link to Most popular program.\"><\/a> Most popular program.<\/h3>\n<p><a href=\"https:\/\/www.adobe.com\/products\/photoshop.html\" rel=\"noopener\" target=\"_blank\">Adobe Photoshop<\/a> is the <strong>most popular image editing program<\/strong> for pixel graphics.<\/p>\n<p><span id=\"ppi-and-dpi\"><\/span><\/p>\n<h2><a class=\"anchor\" href=\"#ppi-and-dpi\" title=\"Direct link to Ppi and dpi.\" aria-label=\"Direct link to Ppi and dpi.\"><\/a> <span style=\"font-size: 2.2rem\">Ppi and dpi.<\/span><\/h2>\n<p><a href=\"https:\/\/en.99designs.de\/blog\/tips\/ppi-vs-dpi-whats-the-difference\/\" rel=\"noopener\" target=\"_blank\">The specifications in ppi and dpi refer only to pixel-based raster graphics.<\/a> A subsequent change of the sizes is not possible, therefore graphics must be created in the correct size in advance.<\/p>\n<p><span id=\"pixel-per-inch\"><\/span><\/p>\n<h3><a class=\"anchor\" href=\"#pixel-per-inch\" title=\"Direct link to Pixel per Inch (ppi).\" aria-label=\"Direct link to Pixel per Inch (ppi).\"><\/a> Pixel per Inch (ppi).<\/h3>\n<p>Ppi indicates the resolution, i.e. <strong>how many pixels are output per inch<\/strong>. Ppi is r<strong>esponsible for the image size and quality<\/strong>.<\/p>\n<p><span id=\"dots-per-inch\"><\/span><\/p>\n<h3><a class=\"anchor\" href=\"#dots-per-inch\" title=\"Direct link to Dots per Inch (dpi).\" aria-label=\"Direct link to Dots per Inch (dpi).\"><\/a> Dots per Inch (dpi).<\/h3>\n<p>Dpi indicates <strong>how many pressure points lie on one inch<\/strong>. This specification is not relevant for the image size, but only for the print quality.<\/p>\n<figure><img decoding=\"async\" src=\"\/wp-content\/uploads\/graphic_file_formats_advantages_disadvantages-b84cd43a.webp\" data-image=\"778395\" alt=\"graphic file formats advantages and disadvantages\" loading=\"lazy\"><\/figure>\n<p><span style=\"font-size: 11px\"><\/span><\/p>\n<p>All advantages and disadvantages of vector and pixel graphics at a glance.<\/p>\n<p><span id=\"correct-use-is-crucial\"><\/span><\/p>\n<h2><a class=\"anchor\" href=\"#correct-use-is-crucial\" title=\"Direct link to Correct use is crucial.\" aria-label=\"Direct link to Correct use is crucial.\"><\/a> Correct use is crucial.<\/h2>\n<p>A large amount of information plays a decisive role in the correct and target-oriented use of graphics. <a href=\"\/en\/contact\/\">Professional agencies<\/a> have the necessary knowledge needed to handle graphics accordingly.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When using image files, you have certainly stumbled across different file extensions before. But what exactly is behind PNG, JPEG, EPS &amp; Co? And which format is suitable for which application? Read all relevant information about the different image formats below. No desire to read? Listen to the blogcast here: Share on LinkedIn Graphics are &hellip; <a href=\"https:\/\/www.mynd.com\/en\/blog\/image-format-guide\/\">Continued<\/a><\/p>\n","protected":false},"author":34,"featured_media":3822,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[143],"tags":[177,174],"class_list":["post-3820","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-en-video","tag-en-video","tag-en-video-in-general"],"acf":{"minutes":""},"tags_data":[{"id":177,"name":"Video"},{"id":174,"name":"Video in general"}],"featured_image_url":"https:\/\/www.mynd.com\/wp-content\/uploads\/059_bg.webp","minutes_read":"","_links":{"self":[{"href":"https:\/\/www.mynd.com\/en\/wp-json\/wp\/v2\/posts\/3820","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mynd.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mynd.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mynd.com\/en\/wp-json\/wp\/v2\/users\/34"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mynd.com\/en\/wp-json\/wp\/v2\/comments?post=3820"}],"version-history":[{"count":2,"href":"https:\/\/www.mynd.com\/en\/wp-json\/wp\/v2\/posts\/3820\/revisions"}],"predecessor-version":[{"id":14067,"href":"https:\/\/www.mynd.com\/en\/wp-json\/wp\/v2\/posts\/3820\/revisions\/14067"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mynd.com\/en\/wp-json\/wp\/v2\/media\/3822"}],"wp:attachment":[{"href":"https:\/\/www.mynd.com\/en\/wp-json\/wp\/v2\/media?parent=3820"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mynd.com\/en\/wp-json\/wp\/v2\/categories?post=3820"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mynd.com\/en\/wp-json\/wp\/v2\/tags?post=3820"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}