Technote

Performance optimization Practical

Series Building the company site without an agency Part 6 of 8

Thirty seconds before you upload a photo

What a camera or phone produces is far larger than a screen ever needs. Three quick adjustments before uploading make a visible difference to the first screen.

The most common reason a site feels slow is not complicated code; it is photographs uploaded untouched. A modern phone photo often exceeds 4,000 pixels across, while the width actually used on screen is far smaller. The rest is downloaded and thrown away.

Happily, this takes about thirty seconds to fix before uploading. Three steps: size, format, filename.

1. Size — only as large as it is used

This is where the big saving lives. Look at how wide the image is actually displayed and resize it to roughly that before uploading. A full-width background needs generous dimensions; a photograph inside an article needs far less.

WordPress automatically generates several sizes from what you upload and serves an appropriate one. That helps a great deal, but an oversized original still costs you wherever the original is used, which is why resizing before upload remains worthwhile.

A concept of relative weight for one photograph — real values vary, so check with your own images

2. Format — photograph or graphic?

Format is decided by content, not preference. Photographs, with their smooth gradations, belong in the JPEG family; logos, icons and diagrams, made of lines and flat areas, belong in PNG or SVG. Save a logo as a JPEG and the edges of the lettering go muddy.

On top of that, a modern format such as WebP produces a smaller file at the same visual quality. Browser support is broad today, and the conversion can be automated with free tools or a plugin.

Logos that need a transparent background stay as PNG or SVG. An SVG logo in particular stays crisp at any screen density and weighs very little.

3. Filenames and alt text

Rename the file just before uploading. IMG_4821.JPG tells neither a person nor a search engine anything. Use lower-case Latin letters, hyphens and a description of the content: seoul-office-interior.jpg.

Filenames in non-Latin scripts are best avoided, since some server environments encode them into long or broken URLs.

After uploading, write the alt text. It is what a visitor using a screen reader hears, and it is how search engines understand the image. Do not write “photo” — describe in one sentence what can actually be seen.

The thirty-second routine for one photograph — soon it happens without thinking

How images affect first-screen speed is covered further in the performance archive, and if hundreds are already uploaded at full size, bulk cleanup is part of our optimization program.

Next part

Everything so far has been faster done yourself. The next part looks at the other side — the work that costs more when you do it, measured by the value of your own hours.

More on this topic

All technotes

Performance optimization Advanced

A front-end budget you can actually hold

Pages do not get heavy in one go. They get heavy through small, individually reasonable additions. A ceiling you actually check is what stops the accumulation.

Developers 8 min read

Performance optimization Advanced

A conversion audit: finding where people leave

Polishing a page nobody reaches is the most common waste. Walk the whole path end to end and the leak shows itself first.

Marketers 7 min read

Performance optimization Practical

The cost of pop-ups — search and conversion at once

An interstitial that covers the content on mobile is treated unfavourably in search, and the same interstitial costs conversions too. The levers are timing, trigger and dismissal.

Marketers 8 min read

₩270,000 · Join the program