how do i add photos to my website without slowing it down

design · 2026-09-29 · 3 min

resize the photo to the size it will be displayed, convert it to webp, compress it until it looks the same, and set width and height before it loads. four steps, ten minutes, and the difference between a page that opens and a page that makes people wait.

resize before you upload

a photo from a phone is around 4000 pixels wide and 3 to 5 mb. a card on your site displays it at 600 pixels. uploading the original means the browser downloads five to eight times the pixels it can show.

export at roughly twice the display size so it stays sharp on high-density screens: 1600 pixels for a full-width image, 800 for a card, 400 for a thumbnail. most phones and every photo editor can do this, and so can squoosh, which runs in the browser without uploading your file.

format and weight

webp is the default now; avif is smaller but support and tooling are less predictable. jpeg is still fine if you have nothing else. as a rule of thumb, a large hero image should stay under 250 kb, a card image under 80 kb. if it is heavier, compress more before you blame the host.

in wordpress, the media library keeps the original and generates resized versions, but it does not convert to webp by default — a plugin can, at the cost of another thing to maintain. in wix, images are served through their cdn and resized on the fly, which helps, but you still should not upload a 12 megapixel file for a 300 pixel slot.

alt text, and the part that is not technical

alt text describes what is in the image for someone who cannot see it: "potter at the wheel in the workshop", not "ceramics parma pottery course". if the image is decoration, leave the alt empty rather than filling it with keywords.

two legal things, briefly. if a customer is recognisable in a photo, you need their permission to publish it. and stock photos come with a licence that says where and how you can use them — a photo taken from google images does not come with one at all.

faq

why do my photos look blurry on my site?

usually the opposite of the problem above: the file is small, or the theme crops and stretches it. check the real display size first, then export at twice that.

how many photos should a page have?

enough to answer "what does this look like", no more. one good photo of the work beats eight versions of it, and every image is weight someone downloads on a phone.

can i use photos from google images?

no. being visible in a search result is not a licence. use your own, a paid stock library, or a source that states the licence clearly.