How compression works

A file format is a way to pack an image. Some algorithms pack carefully and hand everything back unchanged. Others throw part of the information away so the file weighs less. That is where the whole difference between extensions comes from.

A graphics tablet and stylus

Lossless compression

This kind of algorithm looks for repeats and writes them shorter. Instead of "two hundred blue pixels in a row," it writes "blue, two hundred times." Unpacking returns the original picture down to the last pixel. PNG works this way, and so does WEBP in lossless mode. That is ideal for lines, flat color shapes, and text.

Lossy compression and artifacts

Here the algorithm reasons differently: it removes detail the eye barely notices. The picture is cut into 8 × 8 pixel blocks, and inside each block the small color shifts are averaged. On a photograph that is invisible. On a sharp black line against a white background, a dirty halo appears around the outline. Those are compression artifacts.

Check

Zoom your JPG to 400% and look at the boundary between dark and light. See muddy squares and color noise around the line? The quality was set too low when you saved.

PNG: transparency and clean lines

PNG is a digital artist's workhorse. It compresses without loss and supports an alpha channel, which means transparency.

A designer's tools

When PNG is required

There are jobs where there simply is no alternative:

In all of these cases, JPG will visibly damage the edges.

Why the file is large

PNG throws nothing away, so it weighs more. Painting with a million smooth shades is especially hard on it: a picture like that has almost no repeats, and there is nothing to compress. A 4000 × 4000 canvas with soft gradients easily produces a file of tens of megabytes. Two moves cut the weight: export to PNG-8 for images with few colors, and shrink the size to what the screen actually needs.

JPG: photos and painting

JPG was made for images with smooth transitions. Where PNG balloons, it produces a file several times lighter at almost the same look.

Quality at 80–90%

The quality slider at export is the main JPG setting. Use this as a guide: 90% is practically impossible to tell from the original, 80% is a good balance of weight and look, and below 70% the blocks start to show. Setting 100% is rarely worth it. The file gets noticeably heavier, and the eye cannot see the difference. And remember: JPG does not support transparency at all. Any transparent background becomes white.

Why you should not resave

Every save to JPG is a fresh round of loss. You open the file, tweak it a little, save again, and artifacts stack on artifacts. After a dozen cycles like that, the picture visibly drifts, and you cannot get it back. The rule is simple: always edit the source file with layers, and make the JPG in one final export. A checklist for saving safely is collected in the article on how to save a drawing without losing quality.

WEBP and modern formats

WEBP showed up as a replacement for both PNG and JPG. It can do both kinds of compression, and it supports transparency.

Less weight at the same quality

At a picture that looks the same, WEBP usually weighs noticeably less than JPG. For a website that is a direct gain: the page loads faster, and the drawing looks the same. Transparency works as it does in PNG, but the file comes out lighter. If you post a portfolio on your own site, WEBP is a sensible default. How to put a selection of work together is covered in the guide on an artist portfolio.

Browser support

Every current browser reads WEBP with no trouble. The trouble starts outside the web: some older graphics programs and some print shops will not accept it. So keep a PNG or JPG copy just in case. AVIF compresses even harder, but support for it is still less even, and it is early to treat it as the main option.

SVG: for vector only

SVG stands apart from the other three. It does not store pixels at all. It stores only a description of lines, points, and fills.

Logos and icons

An SVG file is text with coordinates and commands such as "draw a curve from here to there." The browser reads it and redraws the picture at the size you need. That is why a logo stays perfectly sharp on a 24 × 24 icon and on a banner the size of a wall. The weight stays tiny, and you can change the fill color right in the code. The logic of vector curves is covered in the article on raster and vector graphics.

Why painting in SVG does not work

Try describing a texture-brush stroke with a hundred shades as formulas. Formally it is possible: the program will turn the drawing into tens of thousands of tiny shapes. In practice the file becomes unmanageable, the browser starts to lag, and the soft transitions still turn into blotches. You can place a raster picture inside an SVG, but it stays raster, with all of raster's limits.

A cheat sheet by job

Keep a short choosing routine. It covers almost every situation you will run into.

Social media and a portfolio

The order of steps is:

  1. Save the source with layers separately. That is your working file.
  2. Shrink a copy to 2000 pixels on the long side.
  3. Export painting and work with gradients to JPG at 90%.
  4. Line art, pixel art, and anything with transparency go to PNG.
  5. For your own site, also make a WEBP version.

Social networks will recompress the picture their own way anyway, but a good source makes the result noticeably cleaner.

Print and stickers

For a print shop, prepare PNG or TIFF with no lossy compression. JPG will save weight here, but it will hand you artifacts on the outlines. Stickers and decals absolutely need PNG with a transparent background, or a white frame will stay around the drawing. Logos, and anything printed at different sizes, should go out as SVG. And check the resolution before you send it: the numbers you need are in the guide on resolution and DPI.

Time to draw, not just read

Theory fades in a couple of days if you never use it. Open the editor and spend 15 minutes on what you just read. That is enough for the skill to stick.

Try it now

A free online editor: brushes, layers, a palette, and a shared canvas. No install and no sign-up.

Start drawing

Topics in this guide

← Artist Keyboard Shortcuts: 12 Shortcuts That Save Hours Resolution and DPI: which canvas size to choose →