Chykalophia Docs

Why images are the most common cause of slow websites, how to optimize them, and what to do before uploading photos to your site.

Images are beautiful — and often the main reason a website loads slowly. A single unoptimized photo can be many times larger than it needs to be. The good news: image optimization is one of the easiest speed improvements you can make.

Quick summary

Resize images to the dimensions they will actually display at, compress them before uploading, and use modern formats like WebP. Doing these three things can dramatically speed up most sites.

Why images cause speed problems

A photo straight off a modern phone or camera is usually several thousand pixels wide and several megabytes in size. Your website might display that image at 800 pixels wide — but if you upload the original, visitors still have to download the entire large file. As Google's own performance guide puts it, an image shown in a 500-pixel-wide space is optimally sized at 500 pixels; a 1,000-pixel version is "twice as large as needed."

This is the core of the image speed problem:

The file is too large (too many bytes to download)
The dimensions are too big (more pixels than the browser needs to show)
The format is outdated (JPEG and PNG are larger than modern alternatives)

Fix those three things, and images stop being a speed problem.

Step 1: Resize before uploading

Resize your image to roughly the maximum width it will appear on your site. Common sizes:

Full-width banner or hero image: 1,600–2,000 pixels wide
Half-width image or sidebar: 800–1,000 pixels wide
Blog post thumbnail: 600–800 pixels wide
Team member photo: 400–600 pixels wide

You do not need to be precise. The goal is to avoid uploading a 5,000-pixel image when it will display at 600 pixels.

Tools you can use to resize: the Preview app on a Mac, Microsoft Paint or Photos on Windows, or a free web tool like Squoosh.

Step 2: Compress the image

Compression reduces file size without noticeably reducing quality. A well-compressed image at the right dimensions should be:

Photos (JPEG/WebP): under 200 KB for most uses
Illustrations or logos (PNG/SVG): varies, but aim for under 100 KB

Free tools for compression

Squoosh (by Google) is free, works in your browser, and lets you compare the original and compressed versions side by side before downloading. TinyPNG is another popular option.

Step 3: Use the right format

Format	Best for	Notes
WebP	Photos and most web images	Modern, better compression than JPEG or PNG, works on all modern browsers
JPEG	Photos (if WebP is not available)	Good for photographs, not for logos
PNG	Images with transparency	Usually a larger file than WebP; use only when needed
SVG	Logos, icons, simple graphics	Scales to any size with no quality loss
GIF	Avoid for most uses	Very large; a video file is usually far smaller

WebP is supported by Chrome, Safari, Firefox, Edge and Opera. If you can use it, do — Google's own figure is that a lossy WebP is 25–34% smaller than a comparable JPEG at equivalent quality. AVIF is newer and can be smaller still, but browser support is not as broad.

What WordPress does automatically

If your site runs WordPress with a modern theme and an image optimization plugin (like Smush, Imagify, or ShortPixel), some of this may happen automatically after you upload. These plugins can:

Convert images to WebP, and in some cases AVIF
Compress images as they are uploaded, and in bulk for images already in the library
Resize uploads that are bigger than they need to be

Check which of those your plugin does on its free tier before you rely on it. Smush, for example, marks serving WebP and AVIF, its image CDN and its automatic resizing as Pro features, and says full-size image compression is Pro only.

They also work best when you upload reasonably-sized images to begin with. They cannot work miracles with a 20 MB raw photo.

Lazy loading

"Lazy loading" means images are not downloaded until the visitor scrolls close to them. Images below the fold (the part of the page you cannot see without scrolling) do not need to load right away.

It works through a small instruction in the page code — loading="lazy" on the image — which tells the browser not to download that image until it is in or near the visible area. WordPress has added that instruction to images by itself since version 5.5, so on a WordPress site this usually happens without anyone switching it on. You generally do not need to do anything, but it is worth knowing it is happening behind the scenes.

The tradeoff: quality vs. speed

Aggressive compression reduces file size but can reduce visible quality. Find the balance that looks good to you. Most visitors will not notice moderate compression — but they will notice a page that takes five seconds to load.

We recommend compressing to the point where the image still looks clean and sharp on a desktop screen, then accepting that file size.

Common questions

Do I need to optimize every image on the site?

The images with the biggest impact are the ones above the fold — your hero banner, your logo, the first image a visitor sees. Start there. Then work through the rest of the site over time. Your hosting plan may also include tools that optimize images automatically.

What about retina / high-DPI screens?

High-DPI screens (like those on MacBooks and iPhones) draw two or three device pixels for every one the page asks for. For the crispest result you would supply an image that many times the display width: an image shown at 400 pixels wide would ideally be 800 pixels wide on a 2x screen. The tradeoff is a bigger file. Google's own guidance is that most people cannot see the benefit of the 3x version, so an image smaller than the theoretical ideal is usually fine.

Can I fix the images that are already on my site?

Yes. An image optimization plugin can re-process images already in your WordPress media library. Or we can run a bulk optimization during a maintenance visit. Talk to us if you want this done.

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.

Images & page speed