How to Get Images to Look Right on Your Website (Or at Least, Less Wrong)

I’ll admit there are few things in life duller than file formats. If you manage a website or are a content editor, you’ve probably uploaded an image or two, expecting it to appear exactly as you intended. But WordPress has other ideas. Images are resized, compressed, and sometimes mangled beyond recognition. Understanding how this process works can save you time, and the frustration of a pixelated hero image front and centre on your homepage.

How WordPress Processes Images

Multiple Sizes, One Upload

Imagine ordering a single pizza and finding out that, rather wonderfully, your kitchen has automatically divided it into different slice sizes for kids, adults, and your very hungry mate Dave. That’s essentially what WordPress does with your images.

When you upload a single image, WordPress doesn’t just leave it be. It automatically generates multiple versions at different sizes. Something along these lines:

• 320px (for tiny phone screens)
• 640px (for regular mobile use)
• 900px (for tablets)
• 1200px (laptops)
• 1800px, 2400px, 2800px (bigger screens, fancier displays)

The result? Your website loads the right image size based on the visitor’s device, meaning your site doesn’t grind to a halt under the weight of enormous photos. Clever stuff. The original image you uploaded? It’s just sitting in your media library, never actually used unless explicitly requested.

Compression — The Art of Making Your Images Worse for Their Own Good

WordPress does its best to shrink image file sizes down to keep things snappy. This is useful, but let’s not pretend it’s perfect. Sometimes the compression is barely noticeable, like the difference between full-fat and semi-skimmed milk. Other times, it’s as if someone’s taken a blurry photocopy of the Mona Lisa.

If you want to ensure your images stay crisp while being lightweight, tools like Squoosh are a lifesaver. They let you tweak the quality so you don’t end up with a Picasso-esque version of your CEO on the About Us page.

Why Images Seem to Shrink Online

Here’s something that confuses many: We have changed WordPress to follow a 2:1 pixel density ratio. This means an image at 1200px wide will display in a 600px-wide box—it uses double the amount of pixels to ensure images look sharp on high-resolution screens. If you’re wondering why, well, blame Apple and their Retina displays for setting that expectation.

Which Image File Type Should You Use?

Right, let’s break it down in plain English.

SVG—The Magic Format

✅ Best for: Logos, icons, and anything made of simple shapes and colours.

🚫 Avoid for: Anything with a photograph in it. You cannot, despite what some believe, convert a blurry photo of important stakeholders gathering around a foamex cutout into a razor-sharp SVG masterpiece.

WEBP—The Newish Kid on the Block

✅ Best for: Most images, especially photographs. It’s like JPEG but smaller and better.

🚫 Avoid for: Super simple graphics (SVG is better).

AVIF – The Next-Gen Image Format

✅ Best for: High-quality images with even better compression than WEBP, reducing file sizes while maintaining crisp detail.

🚫 Not for: If you’re still using Internet Explorer AVIF images won’t display properly.

PNG—The Transparency King

✅ Best for: Images that need a transparent background, like logos.

🚫 Avoid for: Huge photos unless you want your site to load at the speed of a dial-up connection.

JPEG—Old Reliable

✅ Best for: Detailed images and photographs. Decent quality, decent file size.

🚫 Avoid for: Anything needing transparency. JPEG doesn’t do see-through.

How Big Should Your Images Be?

Let’s be blunt: never upload a 5000px-wide image unless you enjoy making your visitors wait while their internet groans under the weight. WordPress will resize it anyway, so stick to sensible limits:

• Banner images: No wider than 2800px
• Main content images: Typically displayed at 970px, so upload at 1800px to match WordPress’s 2:1 pixel density.

If your image is already smaller than 2800px, don’t try to enlarge it like a dodgy CSI ‘enhance’ scene. It won’t end well.

Making Sure Your Images Look Right Everywhere

Ever uploaded an image that looked perfect on your laptop, only to find it’s been cropped weirdly on mobile? That’s because different screen sizes can change the way images appear.

• Hero images (big banners at the top of pages) might crop differently to keep text visible.
• Centred focus points help prevent key parts of the image from being chopped off.
• Test on different devices — resize your browser window and see how things shift.

Optimising Images for Faster Loading

Why bother?

• Faster pages mean happier visitors.
• Google loves fast-loading sites, so it’s good for SEO.
• Bloated images clog up your media library. Do you really need a 10MB file of people standing around a pop up stand?

How to Keep File Sizes in Check

✅ Keep images under 200KB where possible.

✅ Use Squoosh or other compression tools before uploading.

✅ Avoid using WordPress to resize images — do it beforehand.

✅ If compression destroys quality and you’re getting pixelisation, upload a sensible-sized image (under 1MB) and let WordPress do its thing.

Naming, Captions, and Alt Text—The Overlooked Heroes

Most people ignore these, but they matter.

• File Names: Name your images properly. new-graphic-team-2025.jpg is better than IMG_938473.jpg.
  
• Captions: Use them if they add useful context. Not every image needs one.
• Alt Text: This is for accessibility. Describe the image so screen reader users know what’s there. This makes content more inclusive for visually impaired users

What Have We Learned? Hopefully, Something Useful

Look, uploading images isn’t the most thrilling task in the world, but do it properly and your website will thank you. Get the right file type, size them correctly, compress them sensibly, and always check how they look across different devices. Otherwise, you might just end up with a homepage full of blurry, stretched-out disasters — and nobody wants that.