{
    "componentChunkName": "component---src-components-blog-post-jsx",
    "path": "/blog/image-types-pixel-vs-vector/",
    "result": {"data":{"site":{"siteMetadata":{"author":"Monica Powell","siteUrl":"https://www.aboutmonica.com"}},"mdx":{"id":"092fae88-4745-5567-a600-bb4baf579ed4","timeToRead":1,"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Image Types: Pixel vs. Vector\",\n  \"date\": \"2016-11-27T14:28:02.293Z\",\n  \"template\": \"post\",\n  \"draft\": false,\n  \"slug\": \"image-types-pixel-vs-vector\",\n  \"category\": [\"visual\"],\n  \"tags\": [\"Design\"],\n  \"description\": \"Great! You are headed to Photoshop to start designing your dream logo *pause* your logo should be designed as a vector file. Basic shapes and text in Photoshop can easily be converted to paths…\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h3\", {\n    \"id\": \"image-types-pixel-vsvector\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#image-types-pixel-vsvector\",\n    \"aria-label\": \"image types pixel vsvector permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Image Types: Pixel vs.\\xA0Vector\"), mdx(\"p\", null, \"Great! You are headed to Photoshop to start designing your dream logo \", \"*\", \"pause\", \"*\", \" your logo should be designed as a vector file. Basic shapes and text in Photoshop can easily be converted to paths (vectors) whereas more complex design elements will require you to manually create a path.\"), mdx(\"p\", null, \"If you plan on designing anything digitally its important to understand the difference between TWO different image types: vectors and bitmaps/pixel-based images.\"), mdx(\"p\", null, \"Bitmap (or pixel-based) images are complex and appear more photographic than vector images. Vector images store a lot less information than bitmap images and therefore are able to load faster.\"), mdx(\"h3\", {\n    \"id\": \"vector-images\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#vector-images\",\n    \"aria-label\": \"vector images permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Vector Images\"), mdx(\"p\", null, \"Vector images are objects created by mathematical calculations. You can scale vector images to any size and the image will preserve its integrity.\"), mdx(\"p\", null, \"Uses: Logos, Cartoons/Illustrations, Icons\"), mdx(\"p\", null, \"Tools: Adobe Illustrator\"), mdx(\"p\", null, \"Example File Types:\\xA0. EPSs,\\xA0.AIs,\\xA0.SVGs and\\xA0.PDFs.\"), mdx(\"h3\", {\n    \"id\": \"bitmap-images-aka-rasterimages\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#bitmap-images-aka-rasterimages\",\n    \"aria-label\": \"bitmap images aka rasterimages permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Bitmap Images (a.k.a Raster\\xA0images)\"), mdx(\"p\", null, \"Bitmaps are pixel-based images. They are made up of thousands of itty-bitty pixels or dots. Each pixel can store a different color and the overall pattern of pixels will make up an image (think of each pixel as a piece of the puzzle that contribute to the overall image). If you try to enlarge a photograph you will see that it becomes blurry.\"), mdx(\"p\", null, \"Uses: photos, printed design material\"), mdx(\"p\", null, \"Tools: Adobe PhotoShop\"), mdx(\"p\", null, \"Example File Types:\\xA0. JPEGs, GIFs,\\xA0.TIFs and\\xA0.PNGs\"), mdx(\"p\", null, \"Example of zoomed-in Vector logo vs. Bitmap logo\"), mdx(\"figure\", null, mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/image-types-pixel-vs-vector-0.png\",\n    \"alt\": null\n  })), mdx(\"figcaption\", null, \"Raster file (.jpg) of logo zoomed in becomes\\xA0blurry\")), mdx(\"figure\", null, mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/image-types-pixel-vs-vector-1.png\",\n    \"alt\": null\n  })), mdx(\"figcaption\", null, \"Vector Image of Logo Zoomed in Still Appears\\xA0Crisp\")), mdx(\"p\", null, \"This post was originally published on \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://www.blacktechdiva.com\"\n  }, \"Black Tech Diva\"), \".\"));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#image-types-pixel-vsvector","title":"Image Types: Pixel vs. Vector"},{"url":"#vector-images","title":"Vector Images"},{"url":"#bitmap-images-aka-rasterimages","title":"Bitmap Images (a.k.a Raster images)"}]},"frontmatter":{"title":"Image Types: Pixel vs. Vector","date":"November 27, 2016","description":"Great! You are headed to Photoshop to start designing your dream logo *pause* your logo should be designed as a vector file. Basic shapes and text in Photoshop can easily be converted to paths…","tags":["Design"]}},"allWebMentionEntry":{"edges":[]}},"pageContext":{"permalink":"https://www.aboutmonica.com/blog/image-types-pixel-vs-vector/","slug":"/blog/image-types-pixel-vs-vector/","prev":{"id":"4476e2d2-86bd-5155-8766-3f543e8e90c8","frontmatter":{"title":"Font Awesome is Awesome!","category":["resources"],"date":"2016-11-27T14:35:58.810Z","slug":"font-awesome-is-awesome","tags":["Design","Font Awesome"],"redirects":null},"fields":{"slug":"/blog/font-awesome-is-awesome/"}},"next":{"id":"a6fad244-7c88-505d-a3e5-973710c7add5","frontmatter":{"title":"Graduation Reflections: “I was clearly a web developer in the making”","category":["reflection"],"date":"2016-11-27T14:24:32.876Z","slug":"graduation-reflections-i-was-clearly-a-web-developer-in-the-making","tags":["Education","Reflection","Graduation"],"redirects":null},"fields":{"slug":"/blog/graduation-reflections-i-was-clearly-a-web-developer-in-the-making/"}}}},
    "staticQueryHashes": ["1977783444","764694655"]}