Image and video optimization for websites: formats, plugins, Squoosh

When a site is slow to open, the reason is often simple: photos uploaded exactly as they came off the phone, or a background clip embedded in the page as a file. The browser has to download everything on the page at every visit, and on a mobile connection a few dozen megabytes mean a long wait and visitors giving up.

In short: a typical page should weigh less than 2-3 MB in total, and a single image rarely needs more than 1600-2000 px of width or more than 200-300 KB. Use Squoosh in your browser for a handful of images and a plugin for the whole Media library (on WordPress Hosting and Business Hosting you already have one: LiteSpeed Cache). Host videos on YouTube or Vimeo instead of on the site itself.

First, find out what is heavy

• Test the page in PageSpeed Insights. Its suggestions list oversized images or images in older formats, with the possible savings.
• Or, in Chrome or Firefox, open the developer tools (F12), go to the Network tab, reload the page and sort by size. The top of the list is usually a few images or a video.

Reference values

For comparison, a phone or camera photo is typically 4000-8000 px wide and 3-10 MB in size, several times more than any page needs.

Format and compression

• WebP suits nearly every image. At equal quality it usually comes out 25-35% smaller than a JPG.
• JPG is for photos when WebP is not an option.
• PNG is for logos and graphics with a transparent background. A photo stored as PNG can be several times larger.
• SVG is for vector logos and icons.

As for compression, a quality setting of 75-80 cuts the file a lot, with no difference the eye can spot.

Which way to choose

By hand, before uploading

With Squoosh

Squoosh is a free Google tool that runs right in the browser. The image is never uploaded anywhere: all the work happens on your own computer.

1. Open squoosh.app and drag the file onto the page, or click the centre of the screen to browse for it.
2. In the right-hand panel switch on Resize and type the width you want under Width, for example 1600 for a banner or 1000 for an article. The height adjusts itself.
3. Under Compress, choose WebP (or MozJPEG if you need a JPG) and set Quality to 75-80.
4. Slide the vertical divider to compare the original with the result. The new size and the percentage saved appear at the bottom right.
5. Download the file with the button in the bottom right corner and upload it to WordPress in place of the original.

Squoosh handles one image at a time, so for large batches use a plugin or a batch tool.

Without any extra software

• On Windows: open the photo in the Photos app and choose the resize option from the three-dot menu.
• On a Mac: in Preview, open the Tools menu, then Adjust Size.

Automatically, with a WordPress plugin

An optimization plugin compresses and converts every new image on upload and, when you ask it to, processes the ones already in Media in a single pass. Keep only one active: two plugins of this kind may process the same image twice or clash.

LiteSpeed Cache (WordPress Hosting and Business Hosting)

These plans run the LiteSpeed web server, and the LiteSpeed Cache plugin includes image optimization.

1. In WordPress, open LiteSpeed Cache, then Image Optimization. The work is done by LiteSpeed's QUIC.cloud service, so the plugin may first ask you to link the site to that service.
2. In the Image Optimization settings, turn on Optimize Original Images, Auto Request Cron, Auto Pull Cron and the WebP options (Create WebP Versions and Image WebP Replacement). The labels can vary slightly between plugin versions.
3. On the summary page, click Send Optimization Request. For a large site this can take anywhere from minutes to a few hours.

The rest of the plugin setup: How to enable and configure LiteSpeed Cache.

Other plugins (also suitable for Web Hosting SSD with Nginx and Apache)

Free-tier limits change often, so check them on the plugin's page at wordpress.org.

Lazy loading is built into WordPress: images further down the page are fetched only when the visitor scrolls to them. Keep it on; cache plugins can extend it.

Videos

A promo or background clip embedded as a file often weighs anywhere from 3 to 30 MB and is downloaded at every visit, even if nobody presses Play. The easy fix is to publish it on YouTube or Vimeo and place their player on the page: the clip is fetched only once someone starts it, at a quality that suits the screen.

If the video really has to stay on the site:

1. Trim it to the part you need.
2. Export it at 1280 px wide, under 2-3 MB, with no audio track if it is a background.
3. Add a preview image (poster) so the page looks right before the clip starts.
4. Make sure the theme does not load it twice, once for desktop and once for mobile.

Check the result

Clear the cache (in LiteSpeed Cache: Toolbox, then Purge All, or the matching button in your plugin) and run PageSpeed Insights again. Target: the whole page under 2-3 MB and no single image over 300-500 KB. If the page is still heavy because of the theme or a page builder, open a ticket with the page address and we will look at it with you.

Frequently asked questions

Doesn't WordPress resize images by itself?

It makes smaller copies of every image, but it also keeps the original. A gallery of 8 MB photos therefore takes up disk space and backup space even though visitors only see the reduced versions. Resizing before upload fixes both. To see what fills your account, read disk space in cPanel.

Why can't I upload an SVG logo to WordPress?

WordPress blocks SVG uploads by default for security reasons. Use a PNG with a transparent background, or allow SVG only through a trusted plugin that sanitizes the file on upload.

Can I run two optimization plugins to squeeze images further?

No. The second one brings no real gain and may damage images or clash with the first. Pick one and switch off the image features in the others.

Related articles

• Why the site loads slowly and how to speed it up
• LiteSpeed Cache: clearing the cache and fixing problems
• Disk space in cPanel: what uses it and how to free it safely