Raster Graphics
Definition
A raster image, sometimes called a bitmap, has fixed dimensions measured in pixels — 1920 by 1080 is 2,073,600 of them. Stored raw at 24 bits per pixel that would be about 6.2 MB, which is why every practical raster format compresses: PNG, JPEG, WebP, AVIF, GIF, HEIC, TIFF and BMP are all raster, differing only in how they pack the grid. Resolution is intrinsic to the file. Displaying an image smaller than its native size simply discards information, but displaying it larger forces the renderer to invent pixels by interpolation, which is why an upscaled logo looks blurred rather than bigger. Everything a camera or a screen produces is raster.
Why It Matters
Two decisions follow from this and both cost real bytes. The first is dimensions: serving a 3000-pixel-wide photograph into a 600-pixel slot means about 96 percent of the pixels are thrown away by the browser, roughly twenty-five times more data than the page needed. The second is the choice of format for the content type, since a photograph and a screenshot compress in completely different ways. And some images should not be raster at all — the same mark drawn as vector graphics is one file that is sharp at every size, where a raster logo needs separate exports at 1x, 2x and 3x and still softens on the next generation of display.
How It Works
Pixels are stored row by row, and the format decides colour depth, whether there is an alpha channel, and how the rows are compressed. What matters on a page is that the browser decodes the file into uncompressed memory before it can draw it: a 4000 by 3000 photograph occupies roughly 48 MB of decoded RGBA regardless of the 2 MB it took on disk, and several of those on one page is what makes scrolling stutter on a mid-range phone. So the fix is always to shrink the pixel grid before uploading, not just to compress harder. Giving the img tag width and height attributes lets the browser reserve the right space before the bytes arrive, and a srcset listing two or three widths lets each device pull only the grid it can actually use.
Real-World Example
A photographer publishes thirty camera JPEGs to a gallery on 99helpers at portfolio-2026.99helpers.site, each 6000 pixels wide and around 4.7 MB, making a 140 MB page. Resized to 1600 pixels — still more than any laptop displays them at — the same thirty images come to 11 MB, and the difference is invisible on screen. The originals stay on the photographer's drive, since resizing is something to do before the upload rather than something the host does on request.
Common Mistakes
- ✕Scaling a small raster image up to fill a space — interpolation cannot add detail that was never captured, so the result is just a blurry version of the same picture
- ✕Uploading camera or screenshot originals unchanged — the page ends up carrying ten or twenty times the pixels anyone will see
- ✕Drawing a logo or icon set as raster — every new screen density means another round of exports
- ✕Leaving off width and height attributes — the layout jumps as each image arrives, which counts against the page as a layout shift
Related Terms
Vector Graphics
Vector graphics describe a picture as shapes — points, lines, curves and fills — rather than as pixels. One file renders sharply at any size, because the shapes are drawn fresh at whatever resolution the device has.
PNG File
A PNG file is a raster image that compresses without discarding any pixel data and supports a full alpha channel for transparency. It suits screenshots, logos and line art, and is the wrong choice for a photograph.
Image Optimization
Image optimisation is the work of making the pictures on a page as small as they can be without a visible drop in quality. In practice it means resizing, choosing a format, setting a compression level and serving the right file to each device.
Responsive Images
Responsive images means publishing the same picture at several sizes and letting the browser pick the one that fits. The srcset and sizes attributes are how you describe that choice in HTML.
Image Hosting
Storing image files somewhere on the web and serving them at addresses that can be dropped straight into an img tag, an email or a marketplace listing. The useful output is the address, not the upload.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →