On a typical article page, images account for more bytes than everything else combined. A single photo straight from a phone can outweigh the rest of the page ten times over. Nothing you do on the server makes up for that; the fix is in how the images are prepared and how the page asks for them.
1. Resize before you upload
A phone photo is around 4,000 pixels wide. An article column is around 800. Uploading the original means every visitor downloads sixteen to twenty-five times more pixels than their screen can show. Resize first:
- Photos inside an article: about 1,600 pixels on the long side is plenty, including for sharp phone screens.
- A full-width banner: about 2,000 pixels wide.
- Thumbnails and logos: at most twice the size they are displayed at.
Every computer and phone has a built-in way to do this: Preview on a Mac, Photos on Windows, and the "resize" or "export" option in a phone's gallery.
2. Choose the right format
| Format | Best for | Notes |
|---|---|---|
| JPEG | Photographs | Quality around 75 to 85 is visually the same as 100 at a fraction of the size. |
| PNG | Logos, screenshots, anything with sharp edges or transparency | Very large for photographs. Do not use it for those. |
| WebP | Either of the above | Noticeably smaller than JPEG or PNG at the same quality. Works in all current browsers. |
| AVIF | Photographs | Smaller again. Slower to create; supported by current browsers. |
| SVG | Icons, simple logos, diagrams | Tiny and sharp at any size. Not for photos. |
If you change only one thing, stop saving photographs as PNG. That single mistake is behind many of the heaviest pages.
3. Always give the width and height
<img src="scene.jpg" width="1600" height="900" alt="Fire engines outside the station">With the two numbers present, the browser reserves the right space before the image arrives. Without them, the text is laid out first and then jumps down when the picture loads, which is the "page shifted just as I tapped" effect. Styles can still scale the image to fit the column; the numbers only need to be in the right proportion.
4. Lazy-load everything below the first screen
<img src="later.jpg" width="1600" height="900" alt="…" loading="lazy">Images marked this way are fetched only as the reader scrolls toward them. On a long article, most visitors never download the pictures near the end.
One exception: do not lazy-load the main image at the top of the page. It is the first thing the reader looks at, and delaying it makes the whole page feel slow. WordPress adds loading="lazy" by itself and leaves the first image alone.
5. Offer more than one size
A phone on mobile data does not need the same file as a desktop monitor. The srcset attribute lists several widths and lets the browser pick:
<img src="scene-800.jpg"
srcset="scene-800.jpg 800w, scene-1600.jpg 1600w"
sizes="(max-width: 700px) 100vw, 800px"
width="1600" height="900" alt="…">Content systems generate these sizes automatically when you upload through their media library, which is one more reason to upload there instead of linking to a file you placed by hand.
Compress what you already have
For images already on the site, an optimization plugin can recompress the library and serve WebP versions without changing any posts. On a hand-built site, free desktop and online tools do the same in bulk. Keep your originals somewhere off the server; compression cannot be undone.
Write the alt text
The alt attribute is read aloud by screen readers and shown when an image fails to load. Describe what the picture shows in a short sentence. Decorative images get an empty one, alt="", so they are skipped. It costs nothing in speed, and it is the difference between a page that works for everyone and one that does not.
Do not borrow other sites' images by address
Linking straight to an image on someone else's server, called hotlinking, makes your page depend on their site staying up, uses their bandwidth without asking, and may infringe their copyright. Host your own copy of images you have the right to use. To stop others doing it to you, cPanel has a Hotlink Protection page.
Check the result
Open the page with the browser's developer tools on the Network tab, filter by images, and sort by size. Anything over a few hundred kilobytes deserves a look. Google's PageSpeed Insights lists oversized and unoptimized images by name and estimates the saving for each.
Common questions
Will smaller images look worse?
Not at sensible settings. A photo resized to the width it is shown at and saved at quality 80 is indistinguishable from the original on screen. Quality problems come from enlarging a small image, not from shrinking a large one.
Should I use a CDN for images?
It helps visitors far from your server and takes image requests off your hosting account. Do the five steps above first; a CDN delivers a heavy image faster, but it is still heavy.
What about video?
Host it on a video service and embed it with click-to-load. A video file on shared hosting uses a great deal of bandwidth and does not adapt to the viewer's connection.