The key difference between vector and raster graphics is how the image is stored. Raster images are a fixed grid of pixels, so they lose quality when enlarged; vector images are mathematical paths, so they scale to any size without blurring. Use vector for logos, icons and simple illustrations, and raster for photographs and richly textured artwork.
How do raster graphics work?
A raster image, sometimes called a bitmap, is a grid of tiny squares called pixels. Each pixel stores a colour value, and together they form the picture. Photographs from a camera or phone, screenshots and scanned documents are all raster images.
Because the grid is fixed, a raster image has a native resolution, such as 1600 × 900 pixels. Displayed at or below that size, it looks sharp. Enlarged beyond it, software has to invent pixels that were never captured, which produces the soft, blocky or blurred look everyone has seen on a stretched logo.
Common raster formats
- JPEG (JPG): lossy compression that keeps file sizes small; ideal for photographs, poor for sharp edges and text.
- PNG: lossless compression with support for transparency; good for screenshots, interface graphics and images with text.
- GIF: limited to 256 colours; today mostly used for simple animations, and often better replaced by video or modern formats.
- WebP and AVIF: modern web formats that support both lossy and lossless compression and transparency, and usually produce much smaller files than JPEG or PNG at similar visual quality. All current major browsers support them.
- TIFF and PSD: large working formats used in print and photo editing rather than on websites.
How do vector graphics work?
A vector image does not store pixels at all. It stores instructions: points, lines, curves and shapes, along with their fills, strokes and colours. When the image is displayed, the software calculates the shapes at whatever size is needed, so a vector logo looks equally crisp on a business card and a billboard.
Vector files are also easy to edit. Changing a brand colour, adjusting a line weight or separating a symbol from its wordmark is a matter of selecting shapes, rather than repainting pixels.
Common vector formats
- SVG: the standard vector format for the web. It is text-based (XML), can be styled with CSS and animated, and is supported by every modern browser.
- AI: Adobe Illustrator’s native working file.
- EPS: an older format still requested by some printers and sign makers.
- PDF: can contain vector artwork and is a common way to send print-ready logos.
What is the difference at a glance?
| Aspect | Raster | Vector |
|---|---|---|
| Built from | A grid of pixels | Mathematical paths and shapes |
| Scaling | Loses quality when enlarged | Scales to any size without quality loss |
| Best for | Photos, textured art, complex shading | Logos, icons, illustrations, diagrams |
| File size | Grows with dimensions and detail | Grows with the number of shapes |
| Editing | Pixel-level editing (for example Photoshop) | Shape-level editing (for example Illustrator, Figma) |
| Web formats | JPEG, PNG, WebP, AVIF | SVG |
When should you use vector, and when raster?
The practical rule is simple: if the image is made of flat shapes and needs to appear at more than one size, use vector. If it captures real-world detail, use raster.
- Logos and brand marks: vector, always. They appear everywhere from a browser tab icon to vehicle graphics.
- Icons and interface symbols: vector (SVG), so they stay sharp on high-density screens and can change colour with CSS.
- Photography: raster. Photos have no meaningful vector equivalent.
- Illustrations: usually vector for flat or line styles; raster for painterly or heavily textured work.
- Charts, diagrams and maps: vector where possible, so labels stay readable at any zoom level.
- Photo composites and hero images: raster, exported in WebP or AVIF with a JPEG fallback if needed.
Converting between the two
Turning vector into raster is easy: you export at the size you need. Going the other way is not. Automatic “image trace” tools can convert a simple raster logo into paths, but the result usually needs careful manual clean-up to look professional. If a business only has a small JPEG of its logo, redrawing it properly as a vector is often the fastest route to a usable brand asset.
Why does this choice matter on a website?
On the web, the vector-versus-raster decision affects both quality and speed.
SVG logos and icons stay crisp on high-resolution screens without needing multiple versions, and a simple SVG is often only a few kilobytes. That helps page speed, including Largest Contentful Paint (LCP), one of Google’s Core Web Vitals, where a good score is 2.5 seconds or less.
Raster images, on the other hand, are frequently the heaviest part of a page. A few habits make a large difference:
- Export photos at the largest size they will actually be displayed, not the camera’s original resolution.
- Use modern formats (WebP or AVIF) and sensible compression.
- Serve responsive images with
srcsetso phones download smaller files than desktops. - Always set width and height attributes, so the browser reserves space and the layout does not jump, which protects your Cumulative Layout Shift (CLS) score.
- Lazy-load images below the fold, but not the main hero image.
A note on SVG security
Because SVG files are code, they can contain scripts. WordPress blocks SVG uploads by default for this reason. If you enable SVG uploads, use a method that sanitises files, and only accept SVGs from trusted sources.
What about resolution, DPI and print?
Resolution only applies to raster images, and it causes a lot of confusion. On screens, what matters is the pixel dimensions of the image compared with the space it fills. A 72 or 300 “DPI” label inside a file makes no difference to how it looks on a website; the number of pixels does.
High-density displays, such as most modern phones and laptops, pack two or three device pixels into each CSS pixel. A photo displayed 800 pixels wide may therefore need a 1600-pixel version to look sharp on those screens. Responsive images let the browser pick the right version for each device, so you get sharpness without sending oversized files to everyone.
Print is different. Printers work in physical inches or millimetres, and a common guideline for sharp printed photos is around 300 pixels per inch at the final printed size. That is why a web-sized image that looks fine on screen can print noticeably soft on a brochure or banner. Vector artwork avoids the problem entirely, which is one more reason printers and sign makers ask for vector logos.
A quick check before you send a file
Ask where the image will be used and at what size. For screens, check the pixel dimensions. For print, check the pixel dimensions against the printed size, or send vector artwork. For both, keep the original master file so you can export a fresh version rather than resizing an old export.
What files should you ask your designer for?
Many businesses discover they are missing proper brand files only when a printer or developer asks for them. When a logo or brand identity is delivered, ask for:
- A master vector file (AI, EPS or PDF) and an SVG for the web.
- Full-colour, single-colour (black) and reversed (white) versions.
- Horizontal and stacked layouts if the logo has both.
- High-resolution PNG exports with transparent backgrounds for everyday use in documents and social media.
- The exact colour values (HEX for screen, and CMYK or Pantone references for print).
Keep these files somewhere the whole team can find them. It saves a surprising amount of time, and it means no one ever has to rebuild a logo from a blurry screenshot.
Frequently asked questions
Is PNG a vector format?
No. PNG is a raster format. It supports transparency and lossless compression, which makes it useful for logos in documents, but it still has a fixed pixel size and will blur when enlarged beyond it.
Can I make a photo into a vector?
You can trace a photo into vector shapes, but the result is a stylised illustration, not a photograph. Real photographic detail such as skin texture, gradients of light and fine foliage is best kept as a raster image.
Which format is best for a website logo?
SVG is usually the best choice for a website logo: it is sharp on every screen, small in file size and can be styled with CSS. Keep a PNG version for places that do not accept SVG, such as some email clients and social platforms.
If your brand assets need tidying up, or you want a site where every graphic is crisp and fast, our UI/UX design services and front-end development services can help. You may also find our comparison of Photoshop and Illustrator useful, or you can get in touch with our team.
