1"use strict";(self.webpackChunkpixelpoint_website=self.webpackChunkpixelpoint_website||[]).push([[1130],{1766:function(e,a,t){t.r(a),t.d(a,{Head:function(){return w},default:function(){return u}});var n=t(8453),i=t(6540);function s(e){const a=Object.assign({p:"p",a:"a",h2:"h2",span:"span",h3:"h3",ul:"ul",li:"li"},(0,n.RP)(),e.components);return i.createElement(i.Fragment,null,i.createElement(a.p,null,"Iâve had the opportunity to collaborate with many UI/UX designers throughout my career, and Iâve noticed one very interesting thing about how they work: They donât use established guides to complete projects. If you are a new developer at a company, team members can send you links to a GitFlow or GitHubFlow, and you will learn everything you need to know about repository management in 10 minutes. As developers, we can add to a project linters and everyone will follow that codeâs style guide. But what can you give your designer to ensure that they deliver everything you want? We at Pixel Point wrote this handoffs guide for just that purpose."),"\n",i.createElement(a.p,null,"Donât forget to read other parts too:"),"\n",i.createElement(a.p,null,i.createElement(a.a,{href:"/blog/handoffs-guide-for-pixel-perfect-design-part-ii"},"Part 2 â Grid, Responsive design, Animations, Prototypes")),"\n",i.createElement(a.p,null,i.createElement(a.a,{href:"/blog/handoffs-guide-for-pixel-perfect-design-part-iii"},"Part 3 â UI kits,Export, Element states, Line-height, Fonts, Developers and designers")),"\n",i.createElement(a.h2,{id:"software"},i.createElement(a.a,{"aria-hidden":"true",tabIndex:"-1",href:"#software"},i.createElement(a.span,{className:"icon icon-link"})),"Software"),"\n",i.createElement(a.p,null,"Photoshop has a lot of useful plugins to expedite your work process, but we recommend Sketch or Adobe XD. These tools combine the advantages of using vector graphics with the easily adjustable properties of raster images. They are especially useful when designing for mobile applications on devices with big pixel densities. In these cases, you will not need to worry about color profile, the size of your project files will be smaller, and you will get to utilize a lot of functions that help you work more effectively."),"\n",i.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="">\n <span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 696px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 54.02298850574713%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB0klEQVR42mVSbYsTQQzenyn6QY7z/oCfFPSXnOAfEOmp+PJVQVQsKl7bO0pfr7vb7fa6ezu7M5PJZGKmVTgwhCET5nmSPJlku92WZWmMsdYeYgm01lm6Wi6XREGu/pa5aOAQrYVEXs/mq6Ioi2KTZbl4nq+zfD0vmrJSzCy88/l8MplMp9PxeLzb7bxH69kCJlKk0xoxEuLehDgmgTxxIBKwtHB+/vtiNBRwVVUe/4HbtmtUR4EPHpjRk9amMcFTCEFiDWBrZYpam70BgCOW1pP+yp/0+OgFP++zRd52bJBrwzeWcV9ZEM4aAa9rC9YIV+zyAG46t6zCouaiZQ0BXHA+AIbOInpPRCKYQ9ooWtUks0S5AKSAZBMhllTnuAWutK1BAZJFajoreBGsa9WvweXH/uXnn+MvPy7SNJVhIlhmFiIECMEz0QbLb813mVu70IFwk4Bns9nJg+Pjo/vi9+7eOT09jSsAH9v+NFUvB+rVSPWG6vVI9a86Oc9G7dkwJpUW0VFUFO1kGQKTQdxh1wDJs6/lwzfpkw/5o7fZ0/d5b3Aj8eN3mbgEVQse5U/8XaS7ZRHsVO3TBeVXcuL1Wr4QblKfLeK1KgVm95/vfzPG/AH+ZGHzN4SPKQAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/df0a133f6e9427ff6dbc4d43af47a947/09400/pp1.webp 174w,\n/static/df0a133f6e9427ff6dbc4d43af47a947/3266f/pp1.webp 348w,\n/static/df0a133f6e9427ff6dbc4d43af47a947/657d2/pp1.webp 696w,\n/static/df0a133f6e9427ff6dbc4d43af47a947/e644e/pp1.webp 1044w,\n/static/df0a133f6e9427ff6dbc4d43af47a947/8daba/pp1.webp 1392w,\n/static/df0a133f6e9427ff6dbc4d43af47a947/aa619/pp1.webp 1400w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/webp"\n />\n <source\n srcset="/static/df0a133f6e9427ff6dbc4d43af47a947/88093/pp1.png 174w,\n/static/df0a133f6e9427ff6dbc4d43af47a947/91d18/pp1.png 348w,\n/static/df0a133f6e9427ff6dbc4d43af47a947/871fd/pp1.png 696w,\n/static/df0a133f6e9427ff6dbc4d43af47a947/4e07d/pp1.png 1044w,\n/static/df0a133f6e9427ff6dbc4d43af47a947/aeb15/pp1.png 1392w,\n/static/df0a133f6e9427ff6dbc4d43af47a947/4af54/pp1.png 1400w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/df0a133f6e9427ff6dbc4d43af47a947/871fd/pp1.png"\n alt="iOS Human Interface Guidelines file size for Photoshop and Sketch"\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>\n <figcaption class="gatsby-resp-image-figcaption">iOS Human Interface Guidelines file size for Photoshop and Sketch</figcaption>\n </figure>'}}),"\n","\n",i.createElement(a.h2,{id:"naming-of-assets"},i.createElement(a.a,{"aria-hidden":"true",tabIndex:"-1",href:"#naming-of-assets"},i.createElement(a.span,{className:"icon icon-link"})),"Naming of assets"),"\n",i.createElement(a.h3,{id:"use-a-dash-notation-for-your-assets"},i.createElement(a.a,{"aria-hidden":"true",tabIndex:"-1",href:"#use-a-dash-notation-for-your-assets"},i.createElement(a.span,{className:"icon icon-link"})),"Use a dash notation for your assets"),"\n",i.createElement(a.p,null,"Google recommends this for all files, including HTML, PDF, and .jpg. Here is a Google WebMasters ",i.createElement(a.a,{href:"https://youtu.be/AQcSFsQyct8"},"video about it"),". While itâs possible to rename everything on backend side, itâs best to keep names consistent."),"\n",i.createElement(a.ul,null,"\n",i.createElement(a.li,null,"Use only Latin characters."),"\n",i.createElement(a.li,null,"Donât use spaces."),"\n",i.createElement(a.li,null,"Use only lowercase."),"\n",i.createElement(a.li,null,"Use @2x or @3x postfix to prepare images for devices with different pixel densities."),"\n",i.createElement(a.li,null,"Use the same rules for your folder names."),"\n"),"\n",i.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 696px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 40.229885057471265%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAIAAAB2/0i6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAsUlEQVR42o2Ryw6DIBBF/f+/6Ue4M3Fnuu2qiLwKShEH6BQ3oOnjrC7hnswQmhBCLNiP6QOHZlNWXfSXZyeMmuiEcM4ZY5RSQsgeyjLmSo4A8na1y/LIzPNsjNEZa+26rt/k5LfU9VZrxrngHH0ppRAY3/n8hFrettT3i9ZCSqUUbo4yaujj5D/kYbDGoIoLo2YzmJ1zv2TvU9tqIe6E4LRxHM9OJQNAKMl/sHO8qgGAFxcM0o4oBGIgAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/af5427ea6dba974f6fca56e8c92a4b7d/09400/pp2.webp 174w,\n/static/af5427ea6dba974f6fca56e8c92a4b7d/3266f/pp2.webp 348w,\n/static/af5427ea6dba974f6fca56e8c92a4b7d/657d2/pp2.webp 696w,\n/static/af5427ea6dba974f6fca56e8c92a4b7d/e644e/pp2.webp 1044w,\n/static/af5427ea6dba974f6fca56e8c92a4b7d/8daba/pp2.webp 1392w,\n/static/af5427ea6dba974f6fca56e8c92a4b7d/aa619/pp2.webp 1400w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/webp"\n />\n <source\n srcset="/static/af5427ea6dba974f6fca56e8c92a4b7d/88093/pp2.png 174w,\n/static/af5427ea6dba974f6fca56e8c92a4b7d/91d18/pp2.png 348w,\n/static/af5427ea6dba974f6fca56e8c92a4b7d/871fd/pp2.png 696w,\n/static/af5427ea6dba974f6fca56e8c92a4b7d/4e07d/pp2.png 1044w,\n/static/af5427ea6dba974f6fca56e8c92a4b7d/aeb15/pp2.png 1392w,\n/static/af5427ea6dba974f6fca56e8c92a4b7d/4af54/pp2.png 1400w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/af5427ea6dba974f6fca56e8c92a4b7d/871fd/pp2.png"\n alt=""\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>'}}),"\n",i.createElement(a.h2,{id:"image-optimization"},i.createElement(a.a,{"aria-hidden":"true",tabIndex:"-1",href:"#image-optimization"},i.createElement(a.span,{className:"icon icon-link"})),"Image optimization"),"\n",i.createElement(a.p,null,"Some might say that this is a task for the developer. From my perspective, however, if you want to see the design realized exactly as youâve built it, be sure that the developer will not make decisions related to the visual aspects, like picture quality and compression levels."),"\n",i.createElement(a.h3,{id:"try-to-use-svg"},i.createElement(a.a,{"aria-hidden":"true",tabIndex:"-1",href:"#try-to-use-svg"},i.createElement(a.span,{className:"icon icon-link"})),"Try to use SVG"),"\n",i.createElement(a.p,null,"When you use SVG for your icons or illustrations, you donât need to worry about devices with different pixel densities, or preparing versions like @2x and @3x. Another advantage is that SVG graphics use up less space, and can be compressed effectively by ",i.createElement(a.a,{href:"https://en.wikipedia.org/wiki/HTTP_compression"},"gzip")," on the server side."),"\n",i.createElement(a.h3,{id:"think-twice-before-you-send-an-asset-larger-than-1mb-to-a-developer"},i.createElement(a.a,{"aria-hidden":"true",tabIndex:"-1",href:"#think-twice-before-you-send-an-asset-larger-than-1mb-to-a-developer"},i.createElement(a.span,{className:"icon icon-link"})),"Think twice before you send an asset larger than 1MB to a developer"),"\n",i.createElement(a.p,null,"Here are two likely scenarios if you do: First, the developer will not consider image sizes, and this will cause excessive site loading times. Second, the developer will compress your image too much, resulting in artifacts, reduced quality, or changes in your color profile. Donât be lazy and send the job off to a developer; you are responsible for visual quality of the project. Check out this ",i.createElement(a.a,{href:"https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization#selecting-the-right-image-format"},"image optimization guide by Google"),", and keep the following in mind:"),"\n",i.createElement(a.ul,null,"\n",i.createElement(a.li,null,"Use .jpg for pictures without transparency, and when you can sacrifice quality in favor of size."),"\n",i.createElement(a.li,null,"For the best quality and transparency supp
1ort, use .png."),"\n",i.createElement(a.li,null,"For animations, use video formats or GIF. Keep in mind that GIFs are a very old format, so your video file will be higher in quality but smaller in size."),"\n"),"\n",i.createElement(a.h3,{id:"optimization-tools"},i.createElement(a.a,{"aria-hidden":"true",tabIndex:"-1",href:"#optimization-tools"},i.createElement(a.span,{className:"icon icon-link"})),"Optimization tools"),"\n",i.createElement(a.p,null,"Use optimization tools like ",i.createElement(a.a,{href:"https://kraken.io/web-interface"},"Kraken"),", ",i.createElement(a.a,{href:"https://imageoptim.com/mac"},"ImageOptim"),", or ",i.createElement(a.a,{href:"http://getoptimage.com/"},"Optimage"),". Tools like Photoshop and Sketch save picture metadata by default, and donât use optimal algorithms to make your picture look the same but take up less space."),"\n",i.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="">\n <span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 696px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 41.379310344827594%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAIAAAB2/0i6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAB80lEQVR42gHoARf+AMPM0pGtvKC4xrbEzrzHz73Hzri/xMnKy8LJzaG2wZKnsoeWnpWwvZO0xKjBzLjK1brM183X3ufo7Ozr8AC+w8ehrbV4i5Z1ho9obnJYX2NLUVN0cW6+trLHx8h9hIaFh4ixt7qovsuqv8vBztfP193d4OXo5ejp5eYAhIODQjs5MSglQTUvQzcvNzArRD86VU5IenFqvLWwvbizmZmYqqusydDWw9LbvczX3t7hwsTHnaOmnKSmAEpCPT8xJ0EzKzwxKks6LlNEOFtQRVNOR2dcUoh+dq6ppKmloZ+fnaitsJCboIOMkJGUloyOkE9fZGZ1fABZTURHOS9MPTNKOCpINypdSjhuWUZRRjxUS0N0Z1x8d3Oal5WUlJNiaGpaX2BTXF1kbnJdZmhJV1x0fH8AbWJZiYF7jIB3TzoqSDUnUT0sY0o1jHFcY1hRUUY+aGFbenh2amZiUFZVTVNUTFdZeXh3mJWRnpuXjYyMAMC7uL23sL63r7u2sMe+tcvAuMO6tNHKxcG9u7ezsdfT0NrW0r/Hz7S7wLW4t8XGxbbBypmxx5SswbO8xAD69vb26erz5+j47O378/T////////////////////9/v/////N5/7e6/f6+Pb79/TP5vud0f6i0//a7f6MNR+/8sDbUAAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/9f98bf4fd311235be8c571cd8439e6b0/09400/pp3.webp 174w,\n/static/9f98bf4fd311235be8c571cd8439e6b0/3266f/pp3.webp 348w,\n/static/9f98bf4fd311235be8c571cd8439e6b0/657d2/pp3.webp 696w,\n/static/9f98bf4fd311235be8c571cd8439e6b0/e644e/pp3.webp 1044w,\n/static/9f98bf4fd311235be8c571cd8439e6b0/8daba/pp3.webp 1392w,\n/static/9f98bf4fd311235be8c571cd8439e6b0/aa619/pp3.webp 1400w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/webp"\n />\n <source\n srcset="/static/9f98bf4fd311235be8c571cd8439e6b0/88093/pp3.png 174w,\n/static/9f98bf4fd311235be8c571cd8439e6b0/91d18/pp3.png 348w,\n/static/9f98bf4fd311235be8c571cd8439e6b0/871fd/pp3.png 696w,\n/static/9f98bf4fd311235be8c571cd8439e6b0/4e07d/pp3.png 1044w,\n/static/9f98bf4fd311235be8c571cd8439e6b0/aeb15/pp3.png 1392w,\n/static/9f98bf4fd311235be8c571cd8439e6b0/4af54/pp3.png 1400w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/9f98bf4fd311235be8c571cd8439e6b0/871fd/pp3.png"\n alt="How well does Kraken.io perform?"\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>\n <figcaption class="gatsby-resp-image-figcaption">How well does Kraken.io perform?</figcaption>\n </figure>'}}),"\n",i.createElement(a.p,null,"Kraken has a few different options in Expert Mode for optimizing your picture."),"\n",i.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="">\n <span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 696px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 53.448275862068975%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABRklEQVR42m1SPU/DMBDNf2dFzIys/AFGGFAlWBjKxACIClVFtE1SJ76z78Oc7ZR2yOlkne+9dx9xmhACACAisaSkT6tw+ThcP4/fHTFziBIiY2RDRdVozrneDYCmCw0RxWKiyWy5oZsXuH3FjcvsSNkDaUWN7D0cgCKr6Ror5i0BwAVffMWLh+FqMX623AOPUV0QhzxERSoFjmb9GlWVagV63/HdG95/hBaEWANrLCdJbq460SfxqTNzVqsS07qXVSecBcp52xQ5WfER47YfQ0DT2wqNMQzlUs5IdrU+UIYs0MlzIUk10Nq5DDO5/J8p+zlU83IWlJ3TvBm8Pkh+vjkzVZgV28A9Zv9xYp96CHmRefHe63bU31G3XjtQOU5VvaKW3/nMseu+BC0Usb145ye39zw3+8V6oN7TgGRB68nIle+AEfEPaP+BzervgkcAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/74d195486e0db042f082007bd7611fcc/09400/pp4.webp 174w,\n/static/74d195486e0db042f082007bd7611fcc/3266f/pp4.webp 348w,\n/static/74d195486e0db042f082007bd7611fcc/657d2/pp4.webp 696w,\n/static/74d195486e0db042f082007bd7611fcc/e644e/pp4.webp 1044w,\n/static/74d195486e0db042f082007bd7611fcc/8daba/pp4.webp 1392w,\n/static/74d195486e0db042f082007bd7611fcc/aa619/pp4.webp 1400w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/webp"\n />\n <source\n srcset="/static/74d195486e0db042f082007bd7611fcc/88093/pp4.png 174w,\n/static/74d195486e0db042f082007bd7611fcc/91d18/pp4.png 348w,\n/static/74d195486e0db042f082007bd7611fcc/871fd/pp4.png 696w,\n/static/74d195486e0db042f082007bd7611fcc/4e07d/pp4.png 1044w,\n/static/74d195486e0db042f082007bd7611fcc/aeb15/pp4.png 1392w,\n/static/74d195486e0db042f082007bd7611fcc/4af54/pp4.png 1400w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/74d195486e0db042f082007bd7611fcc/871fd/pp4.png"\n alt="Kraken options"\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>\n <figcaption class="gatsby-resp-image-figcaption">Kraken options</figcaption>\n </figure>'}}),"\n",i.createElement(a.h3,{id:"establish-what-compression-level-is-acceptable-for-non-static-pictures"},i.createElement(a.a,{"aria-hidden":"true",tabIndex:"-1",href:"#establish-what-compression-level-is-acceptable-for-non-static-pictures"},i.createElement(a.span,{className:"icon icon-link"})),"Establish what compression level is acceptable for non-static pictures"),"\n",i.createElement(a.p,null,"Test different compression levels in Photoshop, or ask your developer to demonstrate how s/he will process images to define what relation between quality and size you can accept. Below, you will see a reference table of sizes that are acceptable for different kinds of pictures.\n",i.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 696px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 82.75862068965519%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAIAAABSJhvpAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA20lEQVR42p2S2xKDIAxE/f8/1Y5XasXiQ09dpTTKOOM+OHHJISRQjBk9d+USnHPFmNdr1R2467q2bfnegYdhqKoKPlf84tjXPb/uin2L96oQQgyWZZnnOezCxFGQppHzrewSTdOEy67RISYbP5oEUBvMz2MVgWBa6vu+LEsGRowjuK5rpgj/g8VrP+89dXTJJCnAwdfYRarG1nOq2BitGifN2SrnnpSOEJfM4/uDdaXpxaaweeoW5iUys6ZpTmFWNT/lW1gT1pCOsFazlY+NGdhknk/7OPbTJe/9B8q+01qeEPU1AAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/e3fc3bbacb5343e849c296d1903de88b/09400/pp5.webp 174w,\n/static/e3fc3bbacb5343e849c296d1903de88b/3266f/pp5.webp 348w,\n/static/e3fc3bbacb5343e849c296d1903de88b/657d2/pp5.webp 696w,\n/static/e3fc3bbacb5343e849c296d1903de88b/e644e/pp5.webp 1044w,\n/static/e3fc3bbacb5343e849c296d1903de88b/8daba/pp5.webp 1392w,\n/static/e3fc3bbacb5343e849c296d1903de88b/aa619/pp5.webp 1400w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/webp"\n />\n <source\n srcset="/static/e3fc3bbacb5343e849c296d1903de88b/88093/pp5.png 174w,\n/static/e3fc3bbacb5343e849c296d1903de88b/91d18/pp5.png 348w,\n/static/e3fc3bbacb5343e849c296d1903de88b/871fd/pp5.png 696w,\n/static/e3fc3bbacb5343e849c296d1903de88b/4e07d/pp5.png 1044w,\n/static/e3fc3bbacb5343e849c296d1903de88b/aeb15/pp5.png 1392w,\n/static/e3fc3bbacb5343e849c296d1903de88b/4af54/pp5.png 1400w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/e3fc3bbacb5343e849c296d1903de88b/871fd/pp5.png"\n alt=""\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>'}})),"\n",i.createElement(a.h2,{id:"dont-make-sprites"},i.createElement(a.a,{"aria-hidden":"true",tabIndex:"-1",href:"#dont-make-sprites"},i.createElement(a.span,{className:"icon icon-link"})),"Donât make sprites"),"\n",i.createElement(a.p,null,"A sprite is a .jpg, SVG, or .png file that contains all the necessary graphics of your site, and helps prevent additional server requests for retrieving assets. Itâs a useful optimization trick, but donât try to make sprites on your own. A developer will make one automatically, as s/he will need not only sprites, but also the position and sizes of every element in the sprite. You will pain the developer greatly if you request that s/he measure every element manually. Automatic sprite generation helps keep icons in their actual state, and prevents you from creating @2x or @3x versions. Even if you are not using SVG sprites, this will save you from the pain of adding new pictures to an existing sprite."),"\n",i.createElement(a.h2,{id:"svg"},i.createElement(a.a,{"aria-hidden":"true",tabIndex:"-1",href:"#svg"},i.createElement(a.span,{className:"icon icon-link"})),"SVG"),"\n",i.createElement(a.p,null,"Convert SVG text to curves; otherwise, you will get text objects in the default font (create outline options in Adobe Illustrator)."),"\n",i.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 696px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 72.41379310344827%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAIAAACgpqunAAAACXBIWXMAAAsTAAALEwEAmpwYAAABjklEQVR42nVRXU8CMRDk/8dnE3+AiS8maoQYMQSjoMEYNSECKgg5Pg4PsAa8Xrfbrb32KKA4adLddmdn28kppciD90kuSGui9FBbZFdaKwCMJr7WEHOOnNU979CsbqMNsrJxYzQoXexqzZU9z8gmShKOqBTEKAEVptKG1umodhuXDQQhA6bJcS0ZMb19a7+fFs5L5crxSeHm9t511GFIo1E6MGIQBK8vL71Ot9lsDYdDc2mImbKJPqJJzJPpdJYIcGJ+bKcTxzEAcM6d3urN9gcIRCKl9J/kqS5OLHzB6s1ewQv+Bdm1SolyG1bBlDAxdG8PrVlFEtXX/B+rDKexoz+3WOXi1mhwWdwz4/+26puDRIKYSRCAhK6aB2aZpqYTSrmQMOFjnbm+ZtVDvXdwdH1SfNw/LJ+Vn4RMO/bEuJuEqRdK1e5q1etK5aqaz+f7/WDDqkUMr+9hNJt3euMZ+1b02yrGWBRNGPsch6HTW5HtGGY0cE5s/V5TKYRYq1c5k4OF25YZpG2WgG0QQvwATeYqbRYUxKsAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/9a73b9b78c092c608a1c9e7bfd193bba/09400/pp6.webp 174w,\n/static/9a73b9b78c092c608a1c9e7bfd193bba/3266f/pp6.webp 348w,\n/static/9a73b9b78c092c608a1c9e7bfd193bba/657d2/pp6.webp 696w,\n/static/9a73b9b78c092c608a1c9e7bfd193bba/e644e/pp6.webp 1044w,\n/static/9a73b9b78c092c608a1c9e7bfd193bba/8daba/pp6.webp 1392w,\n/static/9a73b9b78c092c608a1c9e7bfd193bba/aa619/pp6.webp 1400w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/webp"\n />\n <source\n srcset="/static/9a73b9b78c092c608a1c9e7bfd193bba/88093/pp6.png 174w,\n/static/9a73b9b78c092c608a1c9e7bfd193bba/91d18/pp6.png 348w,\n/static/9a73b9b78c092c608a1c9e7bfd193bba/871fd/pp6.png 696w,\n/static/9a73b9b78c092c608a1c9e7bfd193bba/4e07d/pp6.png 1044w,\n/static/9a73b9b78c092c608a1c9e7bfd193bba/aeb15/pp6.png 1392w,\n/static/9a73b9b78c092c608a1c9e7bfd193bba/4af54/pp6.png 1400w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/9a73b9b78c092c608a1c9e7bfd193bba/871fd/pp6.png"\n alt=""\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>'}}),"\n",i.createElement(a.p,null,"Check that you donât have a base64 image inserted into your SVG. It can appear when you try to export as an SVG rasterized picture."),"\n",i.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="">\n <span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 696px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 42.5287356321839%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAIAAAC9o5sfAAAACXBIWXMAAAsTAAALEwEAmpwYAAABk0lEQVR42l2QyY6cMBCG+/0fJI8QKYcccojUyvQKzdI0i2kGBjB4weCVoWNLc4jyuw6lKn9Vv2pHOa8wHscRjWMPnfquayFElBLqBNmElnn7/F/GmN0T46Cuk7Ismw+MMUKIItwSgghdhTRc2E/arBZ+bdvLvS9Zfgcpa9pxqTozEDKyAbGNzp+LkO+9ymvzqAxhaOIST7b++kcOXhaZ1/CaligGi/cQDVQ9AmW3P2UZaEXR6BoaOgs6S8oUnRGZ+4FuA12tbTujHVlYwbEd1ml5Ka0RVTE4/jh+//br/PNinh8GT7ZlyLxOs8JMErYRtirtYAZaeIjt9mXvy7eIH0KVlOp0538CeU5EkPO3QO595aW2q46ROifyEOsOOXitexPkJgbyFKsgV2EhykbGhc5rGRX8DpSfunqQSy/VyVOnlY4KDbGDjb1NDNQtV3H5lVwePMjFHYggU37mgLDQEdB2hJfa6fqWaUh29vQyfxfXxHqzDuXjKfxUXBJhPV8SectkWNj94voQngt+il38vsoe/QV69fA7A6GEQwAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/22de9ba15c9b724dbbeab9af917a9f9e/09400/pp7.webp 174w,\n/static/22de9ba15c9b724dbbeab9af917a9f9e/3266f/pp7.webp 348w,\n/static/22de9ba15c9b724dbbeab9af917a9f9e/657d2/pp7.webp 696w,\n/static/22de9ba15c9b724dbbeab9af917a9f9e/e644e/pp7.webp 1044w,\n/static/22de9ba15c9b724dbbeab9af917a9f9e/8daba/pp7.webp 1392w,\n/static/22de9ba15c9b724dbbeab9af917a9f9e/aa619/pp7.webp 1400w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/webp"\n />\n <source\n srcset="/static/22de9ba15c9b724dbbeab9af917a9f9e/88093/pp7.png 174w,\n/static/22de9ba15c9b724dbbeab9af917a9f9e/91d18/pp7.png 348w,\n/static/22de9ba15c9b724dbbeab9af917a9f9e/871fd/pp7.png 696w,\n/static/22de9ba15c9b724dbbeab9af917a9f9e/4e07d/pp7.png 1044w,\n/static/22de9ba15c9b724dbbeab9af917a9f9e/aeb15/pp7.png 1392w,\n/static/22de9ba15c9b724dbbeab9af917a9f9e/4af54/pp7.png 1400w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/22de9ba15c9b724dbbeab9af917a9f9e/871fd/pp7.png"\n alt="Example of base64 image inserted into your SVG"\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>\n <figcaption class="gatsby-resp-image-figcaption">Example of base64 image inserted into your SVG</figcaption>\n </figure>'}}),"\n",i.createElement(a.p,null,"Optimize the SVG by removing all unnecessary information with SVGOMG. Usually, your SVG file will contain some meta information (like title and description) by default. It will have prettify code instead of inline minimized, unused groups, or empty containers. You can remove all of that without losing quality if you use ",i.createElement(a.a,{href:"https://jakearchibald.github.io/svgomg/"},"SVGOMG"),"."),"\n",i.createElement(a.p,null,"Check the SVG in a browser before adding it to your assets. This lets you ensure that you exported it right, and that the SVG rendered like you planned. You will be able to catch some bugs, like unset height or width, or rendered problems before the developer does. Use only integer values for width, height, and the position of various elements."),"\n",i.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="">\n <span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 696px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 37.356321839080465%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAIAAACHqfpvAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA0klEQVR42m1Q2wqCQBT0/z8oqJdeCyzKXrIgkiC1NK/Jbp5LZ9cUhYbd5dyGmT0OAtQKlALCCUggrw26CjPJ6TPhgdMCno9ZGmlpSXOATI0DecK0PVz1M2sZzaTwHbk6B1Bjop1lruNIJ1FXSEtYedXWyzd+QwWxJnFlyIPioG1N8txdBP7MNkABR5dXszuFD83AhL0y/wXxh5EYfvaJXwmEN3xXaLOeTBZSWFb7tC2NMuH4z2ZtEuQFr91uad3eJuRAxw0q455ougGTk1IU3sfkL53wmbIYMLh7AAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/43f72467e0becf1d6131ee27aa6228fb/09400/pp8.webp 174w,\n/static/43f72467e0becf1d6131ee27aa6228fb/3266f/pp8.webp 348w,\n/static/43f72467e0becf1d6131ee27aa6228fb/657d2/pp8.webp 696w,\n/static/43f72467e0becf1d6131ee27aa6228fb/e644e/pp8.webp 1044w,\n/static/43f72467e0becf1d6131ee27aa6228fb/8daba/pp8.webp 1392w,\n/static/43f72467e0becf1d6131ee27aa6228fb/aa619/pp8.webp 1400w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/webp"\n />\n <source\n srcset="/static/43f72467e0becf1d6131ee27aa6228fb/88093/pp8.png 174w,\n/static/43f72467e0becf1d6131ee27aa6228fb/91d18/pp8.png 348w,\n/static/43f72467e0becf1d6131ee27aa6228fb/871fd/pp8.png 696w,\n/static/43f72467e0becf1d6131ee27aa6228fb/4e07d/pp8.png 1044w,\n/static/43f72467e0becf1d6131ee27aa6228fb/aeb15/pp8.png 1392w,\n/static/43f72467e0becf1d6131ee27aa6228fb/4af54/pp8.png 1400w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/43f72467e0becf1d6131ee27aa6228fb/871fd/pp8.png"\n alt="From left to right: SVG export with fixed height and width, SVG export with 100% height and width"\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>\n <figcaption class="gatsby-resp-image-figcaption">From left to right: SVG export with fixed height and width, SVG export with 100% height and width</figcaption>\n </figure>'}}),"\n",i.createElement(a.h2,{id:"favicon"},i.createElement(a.a,{"aria-hidden":"true",tabIndex:"-1",href:"#favicon"},i.createElement(a.span,{className:"icon icon-link"})),"Favicon"),"\n",i.createElement(a.ul,null,"\n",i.createElement(a.li,null,"Prepare two files with different dimensions."),"\n",i.createElement(a.li,null,"Name the first favicon.png, and set the size to 32x32. All modern browsers support .png for favicons, and you donât need to convert them to ico format."),"\n",i.createElement(a.li,null,"Name the second file favicon-180x180.png, and set the size to 180x180 for mobile icons."),"\n"),"\n",i.createElement(a.p,null,"Many articles online claim that you need to prepare a lot of favicons with different sizes, like 16x16, 24x24, or 48x48. You donât need to worry about that, because 32x32 and 180x180 work fine in most cases. Browsers will also resize your existing icon if it is necessary to do so. Donât forget to use image optimization tools for favicons, too."),"\n",i.createElement(a.p,null,i.createElement(a.a,{href:"/blog/handoffs-guide-for-pixel-perfect-design-part-ii"},"Part 2 â Grid, Responsive design, Animations, Prototypes")),"\n",i.createElement(a.p,null,i.createElement(a.a,{href:"/blog/handoffs-guide-for-pixel-perfect-design-part-iii"},"Part 3 â UI kits,Export, Element states, Line-height, Fonts, Developers and designers")))}var o=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,n.RP)(),e.components);return a?i.createElement(a,e,i.createElement(s,e)):s(e)},p=t(2532),r=t(1021),c=t(545),l=t(9072),d=t(3669),b=t(9063),f=t(352),g=t(84);const m=e=>{let{data:{mdx:{author:a,frontmatter:t,fields:{slug:n}},allMdx:{nodes:s}},location:o,pageContext:{videoCovers:p},children:f}=e;return i.createElement(b.A,{headerTheme:"black",headerShowThemeButton:!0},i.createElement("article",{className:"safe-paddings pt-32 sm:pt-24"},i.createElement("div",{className:"container"},i.createElement("div",{className:"relative mx-auto max-w-[696px] xl:mx-0 xl:flex xl:max-w-none xl:justify-center xl:space-x-20 lg:space-x-8 md:block md:space-x-0"},i.createElement("div",{className:"xl:max-w-[696px] lg:max-w-[626px] md:max-w-none"},i.createElement(c.A,Object.assign({},t,{slug:n})),i.createElement(r.A,{content:f,videoCovers:p})),i.createElement(l.A,{author:a,readMorePosts:s,socialShareUrl:o.href})))),i.createElement(d.A,{withTopMargin:!0}))};function u(e){return i.createElement(m,e,i.createElement(o,e))}const w=e=>{let{data:{mdx:{frontmatter:{title:a,summary:t,ogImage:n}}}}=e;const s=(0,p.d)(n);return i.createElement(f.A,g.A.blogPost({title:a,description:t,ogImage:s}))}}}]); 2//# sourceMappingURL=component---src-templates-blog-post-jsx-content-file-path-content-posts-2017-01-26-handoffs-guide-for-pixel-perfect-design-part-i-index-md-425e60a4bfc897037475.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.