Choosing the right image format can make your website faster, your images sharper, and your content look more professional.

Images are stored digitally in two fundamentally different ways: as bitmaps (pixels) or as code (instructions). Understanding this difference explains why some images get blurry when resized while others stay perfectly sharp.

1. Bitmap Images (Pixel-Based)

What they are
A bitmap image is made up of a grid of tiny squares called pixels. Each pixel stores a color value. When you zoom in far enough on a photo, you can actually see these individual squares.

How they’re stored
The image file saves information like:

• How many pixels wide and tall the image is
• The color of each pixel (for example: red, green, blue values)

Think of it like a giant spreadsheet where each cell contains a color.

Common bitmap formats

• JPG / JPEG
• PNG
• GIF
• BMP
• WebP

What bitmap images are good at

• Photographs
• Realistic images with lots of color and detail
• Complex lighting, shadows, and textures

Limitations

• They have a fixed resolution
• If you scale them up, pixels stretch and the image looks blurry or blocky
• Larger dimensions = larger file sizes

Simple example
A 100×100 pixel image contains 10,000 color squares. If you stretch it to 500×500, those same pixels are just enlarged—no new detail is added.

---

2. Code-Based Images (Vector Images)

What they are
Vector images are not made of pixels. Instead, they’re stored as mathematical instructions that tell the computer how to draw the image.

Rather than saying “this pixel is blue”, the file says things like:

• Draw a circle at this position
• Make the line this thick
• Fill the shape with this color

How they’re stored
The file contains:

• Shapes (lines, curves, paths)
• Coordinates
• Colors
• Rules for how everything fits together

Think of it like a recipe instead of a photograph.

Common vector formats

• SVG
• AI
• EPS
• PDF (often)

What vector images are good at

• Logos
• Icons
• Illustrations
• Charts and diagrams
• Anything that needs to scale perfectly

Advantages

• Can be resized infinitely with no loss of quality
• Often very small file sizes for simple graphics
• Easy to edit colors and shapes

Limitations

• Not suitable for photos
• Very complex artwork can become heavy or slow to render

Bitmap vs Code: The Key Difference

Bitmap (pixels)	Vector (code)
Made of pixels	Made of instructions
Fixed resolution	Infinite resolution
Blurry when enlarged	Always sharp
Best for photos	Best for logos & icons
JPG, PNG, GIF	SVG, AI, EPS

Why This Matters

When you choose an image format, you’re really choosing how the image is stored:

• Use bitmap images when realism matters
• Use vector images when flexibility and sharpness matter

That’s why photos are almost always JPGs or PNGs, while logos are often SVGs.

Formats

The four most common image formats you will encounter are:

• JPG
  • Sometimes referred to as JPEG
  • Joint Photographic Experts Group
• PNG
  • Portable Network Graphics
• GIF
  • Graphical Image Format
• SVG
  • Scalable Vector Graphics

Each format is best for different situations, so we’re going to look at the different types of images you might want to show, and what you’ll want to do as a result.

Why JPEG Is So Good at Compressing Photos

JPEG’s superpower is that it throws away information you’re unlikely to notice.

It’s designed specifically for photographs, where tiny changes in color and detail are hard for the human eye to detect.

1. JPEG Compresses How Humans See, Not Just Data

Our eyes:

• Notice brightness more than color
• Struggle to see tiny color differences in detailed areas

JPEG takes advantage of this by:

• Keeping more detail in light/dark information
• Reducing precision in color information

You still see a great-looking photo, but the file stores far less data.

---

2. JPEG Groups Pixels Into Blocks

Instead of saving every pixel individually, JPEG:

• Breaks the image into small blocks (usually 8×8 pixels)
• Analyzes each block as a whole

It looks for patterns like:

• Smooth gradients
• Repeating colors
• Subtle texture

This lets JPEG describe large areas efficiently rather than pixel by pixel.

---

3. JPEG Uses “Lossy” Compression (On Purpose)

When you save a JPEG, you choose a quality level.

Behind the scenes:

• Fine details are simplified
• Tiny variations are removed
• Noise is reduced

This information is permanently discarded, which is why:

• File sizes get much smaller
• Re-saving a JPEG repeatedly lowers quality

That trade-off is exactly why JPEG is so good for photos on the web.

---

4. Why JPEGs Look Bad for Text and Logos

JPEG compression can create:

• Blurry edges
• Color halos around text
• “Blocky” artifacts

That’s because sharp edges and flat colors are very noticeable to our eyes—and JPEG wasn’t designed for them.

Bottom line:
JPEG excels at photos, not graphics.

How PNG Handles Compression (Without Losing Quality)

PNG takes a completely different approach.

Instead of removing data, PNG tries to store the same data more efficiently.

---

1. PNG Uses Lossless Compression

With PNG:

• No image information is thrown away
• Every pixel is preserved exactly

If you save and re-save a PNG:

• It will always look the same
• No quality degradation occurs

This makes PNG ideal for images where precision matters.

---

2. PNG Looks for Repetition, Not Perception

PNG compression focuses on patterns like:

• Large areas of the same color
• Straight lines
• Repeating pixels

It says, essentially:

“This next pixel is the same as the previous one.”

This works incredibly well for:

• Logos
• UI elements
• Screenshots
• Icons
• Images with text

---

3. PNG Predicts Pixel Values

PNG uses a clever trick:

• It predicts what a pixel should be based on nearby pixels
• Then it stores only the difference

When images have clean edges and flat colors, those differences are tiny—so the file compresses very well.

Photos, however, have constant variation, so PNG files for photos can get very large.

---

4. Transparency Is Built In

PNG supports:

• Full alpha transparency (smooth fades and shadows)

This transparency data is also compressed losslessly, which is why PNG is preferred over JPEG whenever transparency is needed.

GIF: Simple Animation and Compatibility

What GIF is
GIF is a bitmap (pixel-based) image format best known for short looping animations. It’s one of the oldest web image formats and is supported almost everywhere.

How GIF works (at a high level)

• Stores images as pixels, like JPG and PNG
• Limited to 256 colors per frame
• Can store multiple frames to create animation

Because of the color limit, GIF files are not very detailed, but they’re lightweight enough for simple motion.

What GIF is good at

• Short looping animations
• Simple visual reactions or memes
• Icons or graphics with flat colors
• Situations where maximum compatibility matters

Limitations

• Poor image quality for photos
• Large file sizes compared to modern animation formats
• Very limited color depth
• No smooth transparency (only on/off)

In short:
GIF is about motion, not image quality. It also used to be commonly used for graphical elements with solid blocks of colour, but that is now mostly handled by the PNG format which uses a much better compression algorithm.

---

SVG: Images Stored as Code

What SVG is
SVG (Scalable Vector Graphics) is a vector format, meaning images are stored as instructions and shapes, not pixels.

How SVG works (at a high level)
Instead of saving color for each pixel, SVG files describe:

• Lines, curves, and shapes
• Positions and sizes
• Colors, strokes, and fills

The browser draws the image on the fly using this information.

What SVG is good at

• Logos
• Icons
• Illustrations
• Charts and diagrams
• UI elements

Why SVG is special

• Scales to any size with perfect sharpness
• Very small file sizes for simple graphics
• Looks great on all screen resolutions
• Can be styled or animated with CSS and JavaScript

Limitations

• Not suitable for photographs
• Very complex artwork can become heavy
• Requires modern browsers (which are now universal)

In short:
SVG is about precision, scalability, and flexibility.

Image Format Cheat Sheet

If you need to…	Use this image format
Show a photograph	JPG
Display a logo with transparency	PNG or SVG
Create scalable icons or logos	SVG
Solid blocks of similar colours	PNG or GIF
Share a short animation	GIF
Multiple graphical gradients	PNG or SVG
Keep text and edges super sharp	PNG or SVG

JPG: Best for Photos

Use JPG for:

• Photos
• Images with lots of colours or gradients
• Website banners and hero images
• Social media photos

Why it’s good:

• JPG files are small, so they load quickly
• Great at handling complex images like photos

Trade-offs:

• Uses lossy compression (some quality is lost when saved)
• Not good for sharp text, logos, or images with transparency

In short:
If it’s a photo, JPG is usually the right choice.

PNG: Best for Graphics and Transparency

Use PNG for:

• Logos
• Icons
• Screenshots
• Images with text
• Images that need a transparent background

Why it’s good:

• Lossless quality (no detail is lost)
• Supports transparent backgrounds
• Keeps text and edges crisp

Trade-offs:

• Larger file sizes than JPG
• Not ideal for large photos

In short:
Use PNG when clarity and transparency matter more than file size.

SVG: Best for Logos, Icons, and Illustrations

Use SVG for:

• Logos
• Icons
• Simple illustrations
• Charts and diagrams

Why it’s good:

• Scales perfectly to any size (no pixelation)
• Very small file sizes for simple graphics
• Looks sharp on all screens, including retina displays
• Can be styled or animated with CSS

Trade-offs:

• Not suitable for photographs
• More complex to edit than JPG or PNG

In short:
👉 If it’s a logo or icon, SVG is often the best possible choice.

GIF: Best for Simple Animations

Use GIF for:

• Short looping animations
• Simple motion graphics
• Emojis or reaction images

Why it’s good:

• Supports animation
• Works everywhere without special players

Trade-offs:

• Limited to 256 colors (lower quality)
• Large file sizes compared to modern alternatives
• No transparency like PNG (only basic on/off transparency)

In short:
👉 Use GIF for short, simple animations—but not for photos or high quality visuals.