Skip to content
Article / Digital Media ± 4 MIN READ
Clear images, lighter pages
Why format, size, transparency, and alternative text all matter.
Start with the available space
A raster image consists of pixels. A very large file does not always improve a small display. Choose dimensions that suit the display, then consider sharpness across devices.
Image width and height also help the browser reserve space before loading finishes. The paragraph being read then does not suddenly shift when an illustration appears.
Format is a choice, rather than a race
Compression reduces the size of a data representation. Lossless methods retain recoverable image data; lossy methods discard some information. Inspect edges, small text, and detailed areas before assuming a smaller file is always better.
PNG supports lossless compression and transparency. JPEG is commonly used for photos with lossy compression. WebP supports both modes and an alpha channel. The best choice depends on the image and its use.
Let the background join the composition
Transparency lets the page background show through an image. This allows Lucia illustrations to sit on dark or light themes without a white box. Soft alpha areas can also create blended edges.
Do not judge a transparent image on one background color alone. Edges that look clean on white may show a halo on black. Previewing both themes is part of choosing an asset.
Convey meaning beyond pixels
In HTML, the alternative text attribute explains an image’s function or meaning. An important diagram needs an adequate explanation; pure decoration usually uses empty alt to avoid interrupting screen reader users.
Before adding an illustration, ask what it helps explain. If it carries information absent from the text, provide an equivalent. If it only sets a mood, avoid making readers listen to a long description of decoration.
TRY TO UNDERSTAND