Working with files › Where it goes and in what format · 9 min read
The table that settles 95% of the decisions.
| If you have… | Use | Why |
|---|---|---|
| A photo | .jpg | It compresses photos very well and nobody notices the loss. A .png of the same photo weighs several times more without looking better. |
| A screenshot | .png | Here it does matter: .jpg dirties the edges of letters and the screenshot ends up with junk around the text. |
| A logo, an icon, a flat drawing | .svg | Scales to any size, weighs almost nothing, and is text — which means editable. |
| Something that needs a transparent background | .png | A .jpg cannot store transparency: it fills it in with white. |
| Something for print | Keeps vectors and text without degrading. If there are photos inside, they should be 300 dpi at final size. | |
| Something to upload to a website | .webp | Weighs considerably less than .jpg at the same quality. If the site does not accept it, .jpg. |
| Something you will want to edit in a month | the source | Always keep the file you built it with — the .html, the .svg — as well as the export. Without it, editing means rebuilding. |
Pixels and dpi, in two paragraphs. For when the print shop tells you to "send it in high res".
Pixels is how many cells the image has in total: 1748 × 2480, for example. It is a fixed number, stored in the file. Dpi (dots per inch) is not a property of the image but of how you are going to show it: how many of those cells you will fit into each inch of paper.
The same image at more dpi comes out smaller and sharper; at less dpi, bigger and blurrier.
The practical rule: for screen, anything reasonable will do; for print you want 300 dpi at final size. An A5 flyer in print needs about 1748 × 2480 pixels.
The classic mistake, but with money on the line: the logo downloaded from the web lives at 200 pixels because that is all a screen needs, and on a two-meter banner it shows.
Always ask for the vector original of the logo — an .svg, a .pdf or an
.ai. With that, size stops being a problem forever, and it is the reason
agencies send it to you that way.
How a flyer gets made, then. The temptation is to open Canva or Photoshop and start drawing. The problem shows up on change number seven, when the client asks to move the price, change the green and cut a line of text: on an image, every change is made by hand again, and the seventh costs the same as the first.
The path that uses everything above: build the flyer in text — an .html
with its .css — and export it to an image only at the end.
Iterating on text costs nothing. Exporting happens once. The original is the
.html, not the .png: lose the PNG and you re-export in ten seconds; lose
the .html and you lost the flyer.
You are making a flyer the client will revise several times. Where do you start?
Always keep the file you built the thing with, not just the exported thing.
snack 6 of 6
Powered by KlugerByte