DesignSeptember 15, 2025

Handoff guide for pixel-perfect design. Part I

Throughout my career I've had the chance to collaborate with many UI/UX designers, and I've noticed something quite curious about the way they work: they don't follow established guides to complete projects. If you join a company as a new developer, your colleagues can point you to a link about GitFlow or GitHub Flow and in 10 minutes you'll know everything you need about managing the repository. As developers, we can add linters to a project and everyone will follow the same code style guide. But what can you give your designer to make sure they deliver everything you need? That's exactly what this handoff guide is for.

Don't miss the other parts:

Part 2: grid, responsive design, animations, and prototypes

Part 3: UI kits, exporting, element states, line height, fonts, developers, and designers

Software

Photoshop has many useful plugins to speed up the work, but we recommend Sketch or Adobe XD. These tools combine the advantages of vector graphics with the ease of adjusting raster image properties. They're especially useful when designing mobile apps for high pixel-density devices. In these cases you won't have to worry about the color profile, your project files will be smaller, and you'll be able to take advantage of many features that help you work more efficiently.

File size of the iOS Human Interface Guidelines in Photoshop and in Sketch

Asset naming

Use hyphens in your asset names

Google recommends this for all files, including HTML, PDF, and .jpg. Here's a Google Webmasters video on the topic. Even though everything can be renamed on the backend, it's best to keep names consistent.

Use only Latin characters.
Don't use spaces.
Use only lowercase letters.
Use the @2x or @3x suffixes to prepare images for devices with different pixel densities.
Apply the same rules to folder names.

Image optimization

Some will say this is the developer's job. However, from my point of view, if you want the design to be implemented exactly as you created it, make sure the developer doesn't make decisions about visual aspects like image quality or compression level.

Try to use SVG

If you use SVG for icons or illustrations, you don't have to worry about devices with different pixel densities or about preparing @2x and @3x versions. Another advantage is that SVG graphics take up less space and compress very well with gzip on the server.

Think twice before sending a developer an asset over 1 MB

If you do, one of two things will most likely happen. Either the developer won't take the image weight into account and the site will take too long to load, or they'll compress the image too much and you'll get artifacts, quality loss, or color profile shifts. Don't dodge the work by handing it to the developer: the visual quality of the project is your responsibility. Take a look at this image optimization guide from Google and keep the following in mind:

Use .jpg for images without transparency and when you can trade quality for a smaller file size.
For the best quality and transparency support, use .png.
For animations, use video formats or GIF. Keep in mind that GIF is a very old format, so a video file will have better quality and a smaller size.

Optimization tools

Use optimization tools like Kraken, ImageOptim, or Optimage. Tools like Photoshop and Sketch save image metadata by default and don't use the best algorithms to keep the image looking the same while taking up less space.

Kraken offers several options in its expert mode to optimize your images.

Define what compression level is acceptable for non-static images

Try different compression levels in Photoshop, or ask your developer to show you how they're going to process the images, so you can decide what quality-to-weight ratio is acceptable. Below is a reference table with acceptable file sizes for different types of images.

Don't make sprites

A sprite is a .jpg, SVG, or .png file that contains all the graphics needed on the site and helps avoid extra server requests to load assets. It's a useful optimization trick, but don't try to make the sprites yourself. The developer will generate them automatically, because they need not just the sprite itself but also the position and size of each element within it. If you ask them to measure each element by hand, you'll make them suffer. Automatic sprite generation keeps the icons up to date and saves you from creating @2x or @3x versions. Even if you don't use SVG sprites, it will save you the hassle of adding new images to an existing sprite.

SVG

Convert the text in SVGs to outlines; otherwise you'll get text objects with the default font (the "create outlines" option in Adobe Illustrator).

Check that there's no base64-embedded image inside the SVG. This can show up when you try to export a rasterized image as SVG.

Example of a base64 image embedded in an SVG

Optimize the SVG by removing all unnecessary information with SVGOMG. An SVG file typically includes metadata by default (such as title and description), formatted rather than inline-minified code, unused groups, or empty containers. You can remove all of that without losing quality with SVGOMG.

Check the SVG in a browser before adding it to your assets. This way you make sure you exported it correctly and that it renders as expected. You'll be able to catch some issues, like an undefined height or width, or rendering problems, before the developer does. Use only integer values for the width, height, and position of elements.

Left to right: SVG exported with fixed height and width, SVG exported with height and width at 100%

Favicon

Prepare two files with different dimensions.
Name the first one favicon.png and give it a size of 32x32. All modern browsers support .png for favicons, so there's no need to convert them to ico format.
Name the second one favicon-180x180.png and give it a size of 180x180 for mobile icons.

Many articles online say you need to prepare a bunch of favicons in different sizes, like 16x16, 24x24, or 48x48. Don't worry about that: 32x32 and 180x180 work fine in most cases. Also, browsers resize the existing icon if needed. And don't forget to run the favicons through image optimization tools too.