Optimizing Images

On most websites, images account for the bulk of the page weight, which makes image optimization the single biggest and easiest speed win available to you. Smaller, well-chosen images load faster, use less bandwidth, and improve your Largest Contentful Paint score — often with no visible loss in quality.

Compress Before You Upload

The best time to shrink an image is before it ever reaches your server. Photos exported straight from a camera or phone are far larger than a web page needs. Run images through a compression tool first to strip unnecessary data and reduce the file size:

Use a tool such as TinyPNG, Squoosh, or an export preset in your image editor.
Aim for the smallest file that still looks sharp on screen — there is little benefit to quality above what the eye can see at web resolution.
Compressing before upload means every copy your site generates is already lean.

Choose Modern Formats

Modern image formats deliver the same visual quality at a fraction of the file size of older JPEG and PNG files:

WebP — Widely supported and typically 25–35% smaller than an equivalent JPEG. A safe default for most photos and graphics.
AVIF — Even smaller than WebP in many cases, with excellent quality. Support is now broad across modern browsers.

Keep a standard JPEG or PNG fallback available for older clients, or use a plugin that serves the modern format automatically when the visitor's browser supports it.

Use the Correct Dimensions

Never rely on the browser to shrink a large image to fit. If a space on your page is 800 pixels wide, upload an image close to that size rather than a 4000-pixel original. Serving oversized images forces visitors to download data they will never see and is one of the most common causes of slow pages.

Tip Provide images at the size they are actually displayed, and supply a higher-resolution version only where crisp detail matters, such as full-width hero banners. Match the image to the space it fills.

Enable Lazy Loading

Lazy loading defers off-screen images until the visitor scrolls near them, so the browser downloads only what is needed to render the visible part of the page first. This speeds up the initial load, especially on long, image-heavy pages. Modern browsers support it natively with the loading="lazy" attribute:

<img src="/photo.webp" width="800" height="600" loading="lazy" alt="Description">

Most WordPress themes and page builders add this automatically, but it is worth confirming it is switched on for your image-heavy pages.

WordPress Optimization Plugins

If you run WordPress, an image optimization plugin handles compression and format conversion for your whole media library, including images you have already uploaded. Well-regarded options include:

Smush — Bulk compression and lazy loading, with a straightforward free tier.
ShortPixel — Strong compression with WebP and AVIF conversion.
EWWW Image Optimizer — Automatic optimization on upload plus bulk processing of existing images.

Run one image optimization plugin, not several. Make sure you have a backup before you bulk-optimize an entire library, since compression rewrites your image files.

Serve Images via a CDN

A content delivery network caches your images on servers around the world and serves each visitor from a nearby location, which cuts load time and offloads traffic from your account. Cloudflare can cache and, on many plans, automatically optimize your images at the edge. See Cloudflare caching for how to enable it.

The cPanel Optimize Website Tool

cPanel includes two built-in helpers under the Software and Metrics sections. The Images tool lets you compress or convert images already stored in your account and resize bulk sets. The Optimize Website tool enables Gzip compression so text-based assets such as HTML, CSS, and JavaScript are sent to visitors compressed, which pairs well with your image work for an overall faster page.

Impact on Bandwidth and Largest Contentful Paint

Optimizing images pays off in two measurable ways. First, smaller files mean lower bandwidth usage, which keeps you comfortably within your plan and speeds up every visit. You can track the effect on your traffic in bandwidth usage. Second, because the largest visible element on a page is often an image, shrinking and correctly sizing it directly improves your Largest Contentful Paint — a core web vital that search engines use as a ranking and user-experience signal.

Note After optimizing images, re-test your pages with a tool like Google PageSpeed Insights to confirm the improvement in Largest Contentful Paint. Remember to clear your caches first so the test sees the new, optimized images.