A photograph displayed on a screen appears continuous: a sky forms a smooth gradient, a face contains subtle shades, and edges look clean. Yet a raster digital image contains no concept of a “sky,” a “face,” or an “edge.” At its core, it contains a grid of numerical values that a browser, display, or application turns into visible colors.
Understanding this anatomy is useful far beyond theory. It explains why an image becomes blurry when enlarged, why PNG can preserve transparency, why two images with identical dimensions can have very different file sizes, and why simply renaming .jpg to .png does not convert a file.
A digital image is a representation, not the scene itself
When a camera captures a scene, it does not literally store “a tree in front of a house.” Its sensor measures light. Those measurements are processed, interpreted, and recorded digitally.
For a raster image—also called a bitmap—the final result can be imagined as a table made of rows and columns. Each position contains information that determines how that part of the image should appear.
A 1,200 × 800 image contains:
1,200 × 800 = 960,000 pixels.
A 4,000 × 3,000 image contains 12 million pixels. That is the origin of the term “12 megapixels”: one megapixel is approximately one million pixels.
More pixels, however, do not automatically mean a better image. Pixel count mainly describes how many samples are available. Final sharpness also depends on capture quality, optics, focus, noise, compression, resizing, and the size at which the image is displayed.
You can inspect dimensions and other file properties with the image metadata reader.
What exactly is a pixel?
The word pixel comes from picture element. It is commonly represented as a tiny square, especially when an image editor is zoomed in.
That representation is useful, but slightly misleading.
Inside a file, a pixel is not literally a physical square. It is better understood as a sample at a given position in a grid, associated with one or more numerical values.
When you zoom a photograph to 800% and see large colored blocks, the software is not revealing hidden squares. It is enlarging the display area assigned to each sample so that the grid becomes visible.
This leads to an essential point: a pixel has no universal physical size.
The same 1,200-pixel-wide file can be displayed at 300 CSS pixels on one page, 600 CSS pixels elsewhere, printed across several centimeters, or shown at native size in an editor.
An RGB photograph can be viewed as three intensity images superimposed: one red, one green, and one blue.
A bright area in the red channel means that red contributes strongly there. A dark area means that it contributes little.
This separation is fundamental to image processing. Many operations work on channels before recombining them: color correction, white balance, color extraction, filters, contrast detection, or conversions between color spaces.
The image color extractor works on decoded image data. The browser first converts the file into usable pixels, then the tool analyzes their colors.
This distinction matters: once a JPEG, PNG, or WebP file has been decoded, pixel colors can be analyzed through a common representation.
Bit depth determines the available precision
Saying that a channel uses 8 bits means that eight binary digits are available to represent its value.
With 8 bits:
2⁸ = 256 levels.
With 16 bits:
2¹⁶ = 65,536 levels.
Greater bit depth therefore allows more intermediate values. This can be valuable during substantial editing, particularly in gradients, shadows, and exposure corrections.
Imagine a gradient from dark blue to light blue. If too few levels are available, transitions can become visible as distinct bands. This artifact is known as banding.
Higher precision can reduce that risk during editing, but it also increases the amount of data being handled. A working file may therefore preserve more information than its final Web-optimized derivative.
Do not confuse:
bit depth, which determines how many values can be represented;
color space, which determines what real colors those values refer to;
file format, which determines how data is organized and compressed.
They interact, but they describe different properties.
The alpha channel adds opacity
RGB describes color. RGBA adds a fourth channel: alpha.
Alpha is not a fourth color. It represents pixel opacity.
In an 8-bit representation:
alpha 0 means fully transparent;
alpha 255 means fully opaque;
intermediate values create partial transparency.
This is why transparent does not mean white.
A red logo on a transparent background lets whatever lies behind the image remain visible. Replacing transparent areas with white might look correct on a white page but immediately create a white rectangle on a dark background.
Transparency allows the image to be composited with different backgrounds.
Why can a fully transparent pixel still have a color?
A pixel may store RGB values even when its alpha makes it invisible.
For example:
red: 255;
green: 0;
blue: 0;
alpha: 0.
Visually it is transparent, yet its underlying color is red.
Those hidden values can matter when software resizes an image or interpolates edges. Poor handling can create light or dark halos around a cut-out object.
Alpha handling is therefore subtler than a simple “transparency” switch.
You may also encounter premultiplied alpha and straight alpha. With premultiplied alpha, color components are already multiplied by opacity; with straight alpha, color and alpha remain independent. Rendering engines can convert between these representations internally.
For most Web authors, the important practical rule is simpler: when a graphic needs transparency, preserve it through every stage of the workflow and inspect the final result against the backgrounds on which it will appear.
Raster and vector images describe graphics differently
A raster image stores a finite grid of samples. A vector image instead describes shapes mathematically: paths, points, curves, fills, and strokes.
That is why an SVG logo can remain sharp when enlarged while a small PNG eventually reveals its pixel structure.
Neither approach is universally better.
Raster is naturally suited to photographs and complex continuous imagery. Vector graphics are excellent for many logos, icons, diagrams, and illustrations.
The choice of representation should follow the content.
Dimensions do not tell you the file size
Two images can both be 1,920 × 1,080 pixels and still have radically different file sizes.
Why?
Because file size depends on much more than dimensions:
format;
compression method;
compression level;
image complexity;
bit depth;
alpha;
metadata;
color profile.
A flat graphic can compress very differently from a detailed photograph even at the same dimensions.
This is why “1,920 × 1,080” describes pixel dimensions, not storage weight.
File size does not tell you the dimensions either
The inverse is equally important.
A 500 KB image could be:
a large, heavily compressed photograph;
a smaller lossless image;
a complex PNG with transparency;
another format with different encoding choices.
Do not infer dimensions from megabytes alone.
Inspect the file.
File format is a container and encoding choice
JPEG, PNG, WebP, and AVIF do not change the basic fact that a raster image eventually becomes pixels for display.
They differ in how they represent and compress information and in the features they support.
This explains why changing the filename extension cannot perform a conversion. The internal representation must actually be decoded and encoded in the target format.
Use the image converter when a genuine format conversion is required.
Lossless and lossy representations
Compression can preserve all decoded information or deliberately discard some information to reduce file size.
Lossless compression allows the original represented data to be reconstructed exactly.
Lossy compression accepts controlled changes to obtain a smaller file.
For photographs, lossy compression can often produce major savings with little visible difference at normal viewing sizes.
For graphics containing sharp text, line art, or transparency, a different strategy may be preferable.
Why enlarging a raster image does not create original detail
Suppose you have a 400 × 300 image and enlarge it to 1,600 × 1,200.
The software must create new samples between existing ones.
It can interpolate intelligently, but it cannot recover details that were never present in the source.
This is why resizing upward may make an image smoother than nearest-neighbor enlargement while still not restoring genuine captured information.
AI upscaling can infer plausible detail, but inferred content is not the same as recovering the original scene.
For ordinary Web production, the safest strategy is to keep a sufficiently large master and generate smaller derivatives from it.
Why reducing dimensions can save so much data
A 4,000 × 3,000 image contains 12 million pixels.
A 1,000 × 750 version contains 750,000.
That is sixteen times fewer pixels.
Compressed file size will not necessarily fall by exactly the same factor, but the amount of visual data to encode has changed dramatically.
This is why resizing oversized photographs before aggressive compression is often one of the most effective Web optimizations.
Use the image resizer while preserving the intended aspect ratio.
Resampling changes the pixel grid
When dimensions change, software must calculate a new grid.
This process is called resampling.
Downsampling combines information from multiple source pixels. Upsampling estimates additional samples.
Different interpolation filters can produce different results around:
fine details;
text;
sharp edges;
high-frequency patterns.
For most Web workflows, the practical priority is to start from a good source and avoid repeated resampling.
Generate each final size from the master rather than repeatedly resizing an already resized derivative.
Aspect ratio describes shape, not resolution
An image can be:
1600 × 900
and another:
800 × 450
Both have a 16:9 aspect ratio.
The second contains fewer pixels, but their shape is identical.
Aspect ratio matters when resizing because changing width and height independently can distort the content.
Use the aspect ratio calculator when one dimension is known and the other must preserve the original proportions.
Cropping is different from resizing
Resizing changes the number of pixels representing the same overall composition.
Cropping removes part of the image.
A 1,600 × 900 photograph can be resized to 800 × 450 without changing its framing.
Cropping it to a square changes what is included in the frame.
This distinction becomes important for responsive art direction, where mobile and desktop may intentionally use different crops rather than simply different resolutions.
What happens when a browser displays an image?
A simplified rendering path looks like this:
file downloaded→ file decoded→ pixel representation obtained→ color/transparency interpreted→ image scaled if necessary→ image composited with page→ pixels sent to display pipeline
The exact browser and GPU pipeline is more sophisticated, but this model is useful.
It shows that transfer size, decoded dimensions, and displayed dimensions are related yet distinct.
A highly compressed 5,000 × 5,000 image may be relatively small on the network while still requiring substantial memory once decoded.
Compressed size and decoded memory are different
Imagine an RGBA image of 4,000 × 3,000 pixels.
That is 12 million pixels.
A simple 8-bit RGBA representation uses four bytes per pixel:
12,000,000 × 4 ≈ 48 MB.
The source file might be only a few megabytes—or less—because compression reduces storage and transfer size.
But the decoded image can still occupy much more memory.
This is another reason not to serve unnecessarily huge dimensions.
Metadata lives alongside visual content
An image file can contain information that is not directly visible in the pixels:
camera model;
capture date;
GPS location;
orientation;
copyright;
software information;
color profiles.
These are broadly referred to as metadata.
They can be useful, unnecessary, or sensitive depending on context.
Orientation demonstrates why metadata can affect appearance
Some photographs store pixel data in one orientation and include metadata telling software how to rotate it for display.
If that information is removed incorrectly, the image may appear sideways.
This illustrates an important rule: not every byte outside the visible pixel array is automatically useless.
Optimization should be informed rather than destructive.
Color profiles affect interpretation
Numerical RGB values only become fully meaningful when their color interpretation is known.
Color profiles can help applications understand how values map to actual colors.
For ordinary Web work, sRGB remains a common reference, while modern CSS and displays can support wider gamuts in appropriate contexts.
The key idea is that the numbers 255, 0, 0 describe coordinates within a color model; the exact displayed color also depends on how that model and color space are interpreted.
A pixel is not the same thing as a screen subpixel
Displays often produce a pixel using several physical light-emitting components or subpixels.
The arrangement varies by display technology.
This hardware detail should not be confused with the logical pixel samples in an image file.
A file pixel is data. A display pixel is part of physical rendering hardware. CSS pixels are a layout abstraction.
They interact, but they are not interchangeable concepts.
CSS pixels add another layer
A browser lays out pages using CSS pixels.
An image might contain 1,200 source pixels while being displayed at 600 CSS pixels.
On a high-density display, those 600 CSS pixels may correspond to more than 600 physical display pixels.
That is why image resolution for the Web cannot be understood only by looking at the file.
Thinking about images as data helps connect many apparently separate Web topics.
A color picker reads numerical channels.
A palette extractor groups pixel values.
A resizer creates a new sample grid.
A compressor changes how information is encoded.
A metadata reader inspects auxiliary fields.
A responsive image system chooses among multiple encoded representations.
These tools operate at different layers of the same object.
A practical example: preparing a photograph for a website
Suppose your camera produces:
4032 × 3024 JPEG5.8 MB
The image will appear in an article column no wider than 800 CSS pixels.
A sensible workflow might be:
keep the original as a master;
inspect dimensions and metadata;
determine the largest useful source dimensions;
create smaller variants;
choose an appropriate format;
compress to a visually acceptable level;
remove unnecessary public metadata if appropriate;
declare responsive candidates in HTML.
Every step becomes easier to reason about once you distinguish pixels, dimensions, format, compression, and metadata.
Common misconceptions
“A pixel is always a square of a fixed physical size”
No. A file pixel is a sample. Its physical display size depends on the rendering context.
“More megapixels always means a better image”
No. More samples can provide more detail, but capture quality and intended display size matter.
“A PNG is sharper than a JPEG because PNG has more pixels”
Not necessarily. Format and dimensions are different properties.
“Transparency means white”
No. Transparency allows the background to show through.
“Changing the extension converts the image”
No. The file must be decoded and re-encoded.
“A 300 DPI image is automatically better on the Web”
No. For Web display, actual pixel dimensions and display context matter far more than a DPI metadata value.
“A small compressed file uses little memory”
Not necessarily. A large-dimension image can expand substantially when decoded.
“Metadata never affects rendering”
False. Orientation and color-related information are examples where auxiliary data can matter.
A useful mental model
When you encounter an image, separate these questions:
What does it contain?→ pixels / vector shapesHow much pixel information?→ dimensions and bit depthHow are colors represented?→ channels and color spaceCan it be transparent?→ alpha / format capabilitiesHow is it stored?→ file format and compressionWhat else travels with it?→ metadataHow large is it displayed?→ CSS layoutHow many source pixels are useful?→ resolution strategy
This model prevents many common optimization mistakes.
What to remember
A raster digital image is fundamentally a grid of numerical samples.
Each pixel can contain several channels, usually red, green, and blue, with alpha added when transparency is needed. Bit depth determines how many values each channel can represent.
Pixel dimensions describe how many samples the image contains. They do not directly describe physical size, file size, or visual quality.
The file format determines how the information is stored and compressed. Metadata can add context beyond the visible image. The browser eventually decodes all of this into something it can render.
Once these layers are separated, the rest of Web image work becomes much clearer.
