{"id":2785,"date":"2015-03-21T17:01:09","date_gmt":"2015-03-21T17:01:09","guid":{"rendered":"http:\/\/www.theswitch.us\/blog\/?p=2785"},"modified":"2015-04-01T21:37:06","modified_gmt":"2015-04-01T21:37:06","slug":"image-concept-raster-vector","status":"publish","type":"post","link":"https:\/\/switch.us\/blog\/image-concept-raster-vector\/","title":{"rendered":"Image Concept #2: Raster vs. Vector"},"content":{"rendered":"
In Part Two of his series, Steve calls on his favorite color palette \u2013 red, white and blue \u2013 to show the differences between vector and raster image formats. Let’s do this, America!<\/address>\n

 
\nContinuing our Image Concept series<\/a>, this post explores the difference between raster and vector. Have you ever wondered how some images can be beautifully scaled to enormous dimensions (like giant cereal boxes, for instance<\/a>), while others appear blurry or blotchy when resized? This is a classic Raster vs. Vector situation. Put simply,\u00a0raster graphics<\/a>\u00a0consist of pixels, whereas\u00a0vector graphics<\/a>\u00a0are made up of points and lines. But let’s take it further and put the example of Old Glory back to work.<\/p>\n

In the examples of the previous post, we discussed how the individuals wearing red, white or blue represent individual pixels that make up the image of an American flag. The more people packed into the space (or the more pixels per inch \u2013 PPI), the clearer the image.<\/p>\n

So imagine you needed to make a “living” flag the size of a football field, but you only have 150 people available. Impossible, you say? Scattered across an area that size, 150 participants will hardly make a dent.<\/p>\n

But what if instead of the participants dressing in red, white or blue shirts, they can hold onto the edges of red, white and blue fabric?<\/p>\n

\"Flag-Pieces.jpg\"<\/p>\n

\"Holding-Flag.jpg\"<\/p>\n

Amazing, right? The point is, with vector graphics, instead of filling an area with a finite number of pixels, all you need are anchor points and paths to create shapes that can be filled with color, like a few people holding big pieces of fabric. The photo below shows how the lines and points are filled in with pools of color \u2013 not pixels. (And no, that\u2019s not the Texas flag \u2013 just an enlarged sample of a vector-based flag image.)<\/span><\/p>\n

\"Screen<\/p>\n

\u00a0Why would you choose vector over raster? There are a couple benefits to using the vector format:<\/p>\n

    \n
  1. Scalability – Because you\u2019re not using pixels, you don\u2019t have to worry about resolution. And since you don\u2019t have to worry about resolution, you can scale the image up as big as you want (you know, in case you want to\u00a0enlarge your cereal box artwork<\/a>). The number of points and paths remain the same, and the lines and edges stay crisp and clean.<\/li>\n
  2. File size – Because there aren\u2019t millions of individual pixels, there\u2019s not as much information to cram into the file, which keeps the file sizes down. Think about it as an expense: Imagine feeding all the troops holding that fabric flag, versus the 10,000 people in that living flag we looked at earlier<\/a>. What\u2019s the cost comparison going to be?<\/li>\n<\/ol>\n

    The obvious limitation is that vectors really only work for illustrations (i.e. Adobe Illustrator), not inherently pixel-based photographic imagery. But if you\u2019re creating a logo, typography, or any sort of shape-based illustration, vectors are likely the way to go.<\/p>\n

    Once you understand the difference, it is pretty easy to tell whether an image is raster or vector \u2013 just look at the file extension. File formats like JPEGs, GIFs or PNGs are pixel-based rasters that are limited in scalability (at least if you want to maintain resolution). But EPS, SVG (XML-based) <\/a>\u00a0AI and sometimes PDF files are vector \u2013 also known as source files. They contain much more flexibility. Logos and other branding elements are typically designed as vectors so they can be recolored, resized and reformatted without losing quality.<\/p>\n

    Files created as vectors can be saved to a raster format (.jpg, .png, etc.), thereby losing flexibility. That can be confusing for novices.\u00a0So when someone calls for the “native” or “source” file, they are referring to the original vector file (.ai, .eps, etc.)<\/p>\n

    If you’re not a graphic designer or printing pro who bleeds CMYK, you may not apply this lesson to your daily life…but in today’s digital-heavy world, it’s certainly worth knowing. Oh, and if you aren’t familiar with the significance of CMYK, stay tuned for Part 3 of this star-spangled series.<\/p>\n

    For more from Steve, send a note to\u00a0SteveK@TheSwitch.us<\/a>.<\/h2>\n","protected":false},"excerpt":{"rendered":"

    In Part Two of his series, Steve calls on his favorite color palette \u2013 red, white and blue \u2013 to show the differences between vector and raster image formats. Let’s do this, America!<\/p>\n","protected":false},"author":19,"featured_media":2798,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,2,1],"tags":[],"class_list":["post-2785","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-digital","category-featured","category-featured-home"],"yoast_head":"\nImage Concept #2: Raster vs. Vector<\/title>\n<meta name=\"description\" content=\"In Part Two of his series, Steve calls on his favorite color palette \u2013 red, white and blue \u2013 to show the differences between vector and raster image formats. Let's do this America!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/switch.us\/blog\/image-concept-raster-vector\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Image Concept #2: Raster vs. Vector\" \/>\n<meta property=\"og:description\" content=\"In Part Two of his series, Steve calls on his favorite color palette \u2013 red, white and blue \u2013 to show the differences between vector and raster image formats. Let's do this America!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/switch.us\/blog\/image-concept-raster-vector\/\" \/>\n<meta property=\"og:site_name\" content=\"sw:tch blog\" \/>\n<meta property=\"article:published_time\" content=\"2015-03-21T17:01:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-04-01T21:37:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/switch.us\/blog\/wp-content\/uploads\/2015\/04\/vector-raster-difference.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"575\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Switch Marketing Team\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Switch Marketing Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/switch.us\\\/blog\\\/image-concept-raster-vector\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/switch.us\\\/blog\\\/image-concept-raster-vector\\\/\"},\"author\":{\"name\":\"Switch Marketing Team\",\"@id\":\"https:\\\/\\\/switch.us\\\/blog\\\/#\\\/schema\\\/person\\\/3faa6a5ff850b9c26f73be6015a7367c\"},\"headline\":\"Image Concept #2: Raster vs. Vector\",\"datePublished\":\"2015-03-21T17:01:09+00:00\",\"dateModified\":\"2015-04-01T21:37:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/switch.us\\\/blog\\\/image-concept-raster-vector\\\/\"},\"wordCount\":695,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/switch.us\\\/blog\\\/image-concept-raster-vector\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/switch.us\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/04\\\/vector-raster-difference.jpg\",\"articleSection\":[\"Digital\",\"Featured\",\"Featured Home\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/switch.us\\\/blog\\\/image-concept-raster-vector\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/switch.us\\\/blog\\\/image-concept-raster-vector\\\/\",\"url\":\"https:\\\/\\\/switch.us\\\/blog\\\/image-concept-raster-vector\\\/\",\"name\":\"Image Concept #2: Raster vs. Vector\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/switch.us\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/switch.us\\\/blog\\\/image-concept-raster-vector\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/switch.us\\\/blog\\\/image-concept-raster-vector\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/switch.us\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/04\\\/vector-raster-difference.jpg\",\"datePublished\":\"2015-03-21T17:01:09+00:00\",\"dateModified\":\"2015-04-01T21:37:06+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/switch.us\\\/blog\\\/#\\\/schema\\\/person\\\/3faa6a5ff850b9c26f73be6015a7367c\"},\"description\":\"In Part Two of his series, Steve calls on his favorite color palette \u2013 red, white and blue \u2013 to show the differences between vector and raster image formats. Let's do this America!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/switch.us\\\/blog\\\/image-concept-raster-vector\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/switch.us\\\/blog\\\/image-concept-raster-vector\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/switch.us\\\/blog\\\/image-concept-raster-vector\\\/#primaryimage\",\"url\":\"https:\\\/\\\/switch.us\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/04\\\/vector-raster-difference.jpg\",\"contentUrl\":\"https:\\\/\\\/switch.us\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/04\\\/vector-raster-difference.jpg\",\"width\":1280,\"height\":575},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/switch.us\\\/blog\\\/image-concept-raster-vector\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/switch.us\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Digital\",\"item\":\"https:\\\/\\\/switch.us\\\/blog\\\/category\\\/digital\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Image Concept #2: Raster vs. Vector\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/switch.us\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/switch.us\\\/blog\\\/\",\"name\":\"sw:tch blog\",\"description\":\"sw:tch board\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/switch.us\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/switch.us\\\/blog\\\/#\\\/schema\\\/person\\\/3faa6a5ff850b9c26f73be6015a7367c\",\"name\":\"Switch Marketing Team\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c4ce5dddb626bbcc8dec5cc96b438437ae47f1530f70a3fe6cb428480a662909?s=96&d=https%3A%2F%2Fswitch.us%2Fblog%2Fwp-content%2Fuploads%2F2025%2F07%2Fcropped-dots-150x150.jpg&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c4ce5dddb626bbcc8dec5cc96b438437ae47f1530f70a3fe6cb428480a662909?s=96&d=https%3A%2F%2Fswitch.us%2Fblog%2Fwp-content%2Fuploads%2F2025%2F07%2Fcropped-dots-150x150.jpg&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c4ce5dddb626bbcc8dec5cc96b438437ae47f1530f70a3fe6cb428480a662909?s=96&d=https%3A%2F%2Fswitch.us%2Fblog%2Fwp-content%2Fuploads%2F2025%2F07%2Fcropped-dots-150x150.jpg&r=g\",\"caption\":\"Switch Marketing Team\"},\"url\":\"https:\\\/\\\/switch.us\\\/blog\\\/author\\\/switch\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Image Concept #2: Raster vs. Vector","description":"In Part Two of his series, Steve calls on his favorite color palette \u2013 red, white and blue \u2013 to show the differences between vector and raster image formats. Let's do this America!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/switch.us\/blog\/image-concept-raster-vector\/","og_locale":"en_US","og_type":"article","og_title":"Image Concept #2: Raster vs. Vector","og_description":"In Part Two of his series, Steve calls on his favorite color palette \u2013 red, white and blue \u2013 to show the differences between vector and raster image formats. Let's do this America!","og_url":"https:\/\/switch.us\/blog\/image-concept-raster-vector\/","og_site_name":"sw:tch blog","article_published_time":"2015-03-21T17:01:09+00:00","article_modified_time":"2015-04-01T21:37:06+00:00","og_image":[{"width":1280,"height":575,"url":"https:\/\/switch.us\/blog\/wp-content\/uploads\/2015\/04\/vector-raster-difference.jpg","type":"image\/jpeg"}],"author":"Switch Marketing Team","twitter_misc":{"Written by":"Switch Marketing Team","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/switch.us\/blog\/image-concept-raster-vector\/#article","isPartOf":{"@id":"https:\/\/switch.us\/blog\/image-concept-raster-vector\/"},"author":{"name":"Switch Marketing Team","@id":"https:\/\/switch.us\/blog\/#\/schema\/person\/3faa6a5ff850b9c26f73be6015a7367c"},"headline":"Image Concept #2: Raster vs. Vector","datePublished":"2015-03-21T17:01:09+00:00","dateModified":"2015-04-01T21:37:06+00:00","mainEntityOfPage":{"@id":"https:\/\/switch.us\/blog\/image-concept-raster-vector\/"},"wordCount":695,"commentCount":0,"image":{"@id":"https:\/\/switch.us\/blog\/image-concept-raster-vector\/#primaryimage"},"thumbnailUrl":"https:\/\/switch.us\/blog\/wp-content\/uploads\/2015\/04\/vector-raster-difference.jpg","articleSection":["Digital","Featured","Featured Home"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/switch.us\/blog\/image-concept-raster-vector\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/switch.us\/blog\/image-concept-raster-vector\/","url":"https:\/\/switch.us\/blog\/image-concept-raster-vector\/","name":"Image Concept #2: Raster vs. Vector","isPartOf":{"@id":"https:\/\/switch.us\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/switch.us\/blog\/image-concept-raster-vector\/#primaryimage"},"image":{"@id":"https:\/\/switch.us\/blog\/image-concept-raster-vector\/#primaryimage"},"thumbnailUrl":"https:\/\/switch.us\/blog\/wp-content\/uploads\/2015\/04\/vector-raster-difference.jpg","datePublished":"2015-03-21T17:01:09+00:00","dateModified":"2015-04-01T21:37:06+00:00","author":{"@id":"https:\/\/switch.us\/blog\/#\/schema\/person\/3faa6a5ff850b9c26f73be6015a7367c"},"description":"In Part Two of his series, Steve calls on his favorite color palette \u2013 red, white and blue \u2013 to show the differences between vector and raster image formats. Let's do this America!","breadcrumb":{"@id":"https:\/\/switch.us\/blog\/image-concept-raster-vector\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/switch.us\/blog\/image-concept-raster-vector\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/switch.us\/blog\/image-concept-raster-vector\/#primaryimage","url":"https:\/\/switch.us\/blog\/wp-content\/uploads\/2015\/04\/vector-raster-difference.jpg","contentUrl":"https:\/\/switch.us\/blog\/wp-content\/uploads\/2015\/04\/vector-raster-difference.jpg","width":1280,"height":575},{"@type":"BreadcrumbList","@id":"https:\/\/switch.us\/blog\/image-concept-raster-vector\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/switch.us\/blog\/"},{"@type":"ListItem","position":2,"name":"Digital","item":"https:\/\/switch.us\/blog\/category\/digital\/"},{"@type":"ListItem","position":3,"name":"Image Concept #2: Raster vs. Vector"}]},{"@type":"WebSite","@id":"https:\/\/switch.us\/blog\/#website","url":"https:\/\/switch.us\/blog\/","name":"sw:tch blog","description":"sw:tch board","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/switch.us\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/switch.us\/blog\/#\/schema\/person\/3faa6a5ff850b9c26f73be6015a7367c","name":"Switch Marketing Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c4ce5dddb626bbcc8dec5cc96b438437ae47f1530f70a3fe6cb428480a662909?s=96&d=https%3A%2F%2Fswitch.us%2Fblog%2Fwp-content%2Fuploads%2F2025%2F07%2Fcropped-dots-150x150.jpg&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c4ce5dddb626bbcc8dec5cc96b438437ae47f1530f70a3fe6cb428480a662909?s=96&d=https%3A%2F%2Fswitch.us%2Fblog%2Fwp-content%2Fuploads%2F2025%2F07%2Fcropped-dots-150x150.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c4ce5dddb626bbcc8dec5cc96b438437ae47f1530f70a3fe6cb428480a662909?s=96&d=https%3A%2F%2Fswitch.us%2Fblog%2Fwp-content%2Fuploads%2F2025%2F07%2Fcropped-dots-150x150.jpg&r=g","caption":"Switch Marketing Team"},"url":"https:\/\/switch.us\/blog\/author\/switch\/"}]}},"_links":{"self":[{"href":"https:\/\/switch.us\/blog\/wp-json\/wp\/v2\/posts\/2785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/switch.us\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/switch.us\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/switch.us\/blog\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/switch.us\/blog\/wp-json\/wp\/v2\/comments?post=2785"}],"version-history":[{"count":16,"href":"https:\/\/switch.us\/blog\/wp-json\/wp\/v2\/posts\/2785\/revisions"}],"predecessor-version":[{"id":2833,"href":"https:\/\/switch.us\/blog\/wp-json\/wp\/v2\/posts\/2785\/revisions\/2833"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/switch.us\/blog\/wp-json\/wp\/v2\/media\/2798"}],"wp:attachment":[{"href":"https:\/\/switch.us\/blog\/wp-json\/wp\/v2\/media?parent=2785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/switch.us\/blog\/wp-json\/wp\/v2\/categories?post=2785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/switch.us\/blog\/wp-json\/wp\/v2\/tags?post=2785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}