Web Image Optimization Tools

When to use Optimize for Web

Use this when the images are going onto a web page and one file has to serve a phone, a laptop and a high-density display. Sending a single large image to every visitor is the most common cause of a slow page: phones download desktop-sized pixels they can never show. The answer is several widths plus markup that lets the browser pick.

Choosing between these tools

Website Image Optimizer

Generates a set of widths from one source and gives you the matching HTML to paste, so the browser requests the size it needs rather than the size you happened to upload.

Pair it with a compressor

Responsive widths and compression solve different halves of the problem. Generate the widths here, then run the largest of them through the Image Compressor if it is still heavier than you want.

What to watch out for

• Responsive images only help if the markup ships with them. Copy the generated snippet — a folder of resized files on its own changes nothing.
• Set the width descriptors to the real rendered widths on your page. Guessed values make the browser pick badly.
• Very small images are not worth splitting into multiple widths; the extra requests can cost more than the bytes saved.

Typical jobs

• Producing 480 / 960 / 1440 px versions of an article hero plus its <picture> markup.
• Preparing a product photo that has to look sharp on a high-density laptop screen.

Related guides