Chykalophia Docs

How wide and tall your website images should be, in plain English, with common sizes for each image type.

"How big should this image be?" is one of the most common questions clients ask. The answer depends on where the image will be used. This guide gives you practical sizes for every common use case.

Quick summary

Bigger is not always better — oversized images slow your site down. Match the image size to its role on the page. As a general rule: hero images around 1920 × 1080 px, blog featured images around 1200 × 630 px, and profile photos around 400 × 400 px.

Understanding pixels

Images are measured in pixels (px). A pixel is the smallest dot of color a screen can show. More pixels = more detail. The dimensions are written as width × height.

A 1920 × 1080 px image is 1,920 pixels wide and 1,080 pixels tall. That's the size usually labelled "1080p", and the one most people mean by "full HD".

Common image sizes by use

Image type	Recommended size	Notes
Hero / banner (full-width)	1920 × 1080 px	Wider if the design uses very large displays
Blog post featured image	1200 × 630 px	Facebook recommends at least this size for link previews
Team member / profile photo	400 × 400 px or 600 × 400 px	Square usually works best
Product image	800 × 800 px minimum	Square is a common choice for stores
Logo	SVG (any size) or 400 × 200 px PNG	Always prefer SVG — see image formats
Background image	1920 × 1080 px minimum	Needs to look good when stretched
Gallery thumbnail	600 × 450 px	Landscape usually works best
Favicon	Square, larger than 48 × 48 px (PNG or ICO)	Tiny icon in the browser tab; Google can also show it next to your site in search results

Retina screens and 2× images

Many modern screens — especially on laptops, phones, and tablets — are "retina" or "HiDPI" displays. They typically pack about twice as many pixels per inch as older screens. If a 400 × 400 px image is shown at 400 × 400 on the page, it may look slightly soft on a retina screen.

A simple rule: supply images at roughly 2× the size they'll appear. If a team photo displays at 300 × 300 px on screen, upload it at 600 × 600 px.

Your website platform handles the display size — you just need to supply enough resolution.

The two numbers that matter: dimensions and file size

There are two different measures:

Dimensions (px) — how many pixels wide and tall
File size (KB or MB) — how much storage space the file takes

A large image can have a small file size if it's well-compressed. Compression is the process of making the file smaller while keeping the image looking good. See How to compress images for the practical steps.

Target file sizes for web images:

Image type	Target file size
Hero image	Under 300 KB
Blog / article image	Under 150 KB
Profile photo	Under 80 KB
Product image	Under 200 KB

These are guidelines, not strict rules. Small differences don't matter much. But a hero image that's 5 MB will noticeably slow your page.

What happens with wrong-sized images

Too small: The image stretches to fill the space and looks blurry or pixelated.
Too large: The file takes longer to download, slowing your page.
Wrong shape: The image can get cropped in unexpected places by the theme.

If you're unsure what size your theme expects in a specific location, ask us and we'll tell you exactly.

Common questions

Do I need to resize images before uploading?

It's good practice, but not always necessary. WordPress keeps your original file and also makes smaller copies of it, including the thumbnail, medium and large sizes set under Settings → Media; other platforms may do something similar. That said, uploading a 20 MB raw photo from your camera is wasteful. Resize to roughly the dimensions needed before uploading — your site will load faster and your media library will stay manageable.

What tool can I use to resize images for free?

Squoosh (squoosh.app) is free, runs in your browser, and handles both resizing and compression. On a Mac, the built-in Preview app can resize images (Tools → Adjust Size). On Windows, the built-in Paint app can do basic resizing.

What does 'resolution' mean in this context?

On the web, resolution usually means the pixel dimensions — how many pixels wide and tall. Print design talks about DPI (dots per inch), but that setting usually makes no difference to how an image appears on a web page. What matters for the web is pixel size.

Need a hand?

If you're stuck, email support@chykalophia.com and we'll help. Include your website address and a screenshot if you can.

Image sizes for the web