Image optimization

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.

Try to use SVG

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 gzip on the server side.

Think twice before you send an asset larger than 1MB to a developer

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 image optimization guide by Google, and keep the following in mind:

Use .jpg for pictures without transparency, and when you can sacrifice quality in favor of size.

For the best quality and transparency support, use .png.

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.

Optimization tools

Use optimization tools like Kraken, ImageOptim, or 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.

How well does Kraken.io perform?

Kraken has a few different options in Expert Mode for optimizing your picture.

Kraken options

Establish what compression level is acceptable for non-static pictures

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.