A picture already on my site is too big and slowing it down
A photograph straight from a camera or a phone is enormous - four thousand pixels across is normal. A website almost never shows one at more than two and a half thousand, and a logo might appear at two hundred. The extra pixels are downloaded by every visitor and then thrown away by their browser.
That costs you twice: pages load slower, and the picture eats the room your site has for pictures. If you have ever been told you cannot add another photo, this is usually why.
How it works
- Tell bernard which picture, and how wide it ever needs to be. The address is
the part after your domain, like
assets/hero.jpg. - It shrinks it where it stands. Same address, same name - so every page that shows it carries on showing it, with nothing to edit and nothing to approve.
- It tells you what it saved, and how much picture room your site now has.
Ask for a dry run first if you would rather see the saving before anything changes.
If it looks wrong
Say so. Bernard keeps the previous copy and puts it back exactly, at the same address. Nothing is lost and there is no penalty for trying - a photographer's eye on their own work beats any rule about file sizes.
What it will not touch
Some pictures are deliberately left alone, and bernard will say which and why rather than quietly skipping them:
- Drawings (SVG logos and icons) - they are already the same size at every scale.
- Animated pictures - shrinking one here would flatten it to a single frame.
- The extra copies bernard makes for phones and tablets - their names record how wide they are, so changing one would break the page that uses it. Resize the original instead and the copies follow.
- Course video and audio, and the files people buy - those are not part of your picture allowance, so shrinking them would free nothing.
- Pictures with a long code for a name - browsers are told to keep those for a year, so a change would leave some visitors on the old copy with no way to refresh. For those, add the smaller picture as a new one and swap it in (Crop or resize a photo).
One more case bernard will stop and ask about: if a page records how wide a picture is so it can serve the right copy to phones and laptops, shrinking it would leave that record wrong. Bernard will name the pages and offer to bring them up to date first.
The prompt
“The photo at [address, e.g. assets/hero.jpg] on my site is much bigger than it ever appears. Make it smaller - it never needs to be wider than [width] pixels - and tell me how much space that saved.”
Press Copy, then paste it into your AI and fill in the [bracketed] parts. First time? Connect your AI to bernard first - a one-time setup in bernard → your site → Use your own AI.
Questions people ask
- Will resizing a picture break the pages that use it?
- No. The smaller picture keeps exactly the same address, so every page carries on showing it with no change at all. That is the whole point of doing it this way.
- What if the smaller version looks wrong?
- Say so and it goes straight back. Bernard keeps the previous copy and can put it back exactly as it was, at the same address. You are the judge of your own photographs.
- How small should I go?
- As small as it ever appears on screen, and no smaller. A logo shown an inch wide never needs to be more than about 400 pixels. A photograph running the full width of the page wants 2000 to 2560. Bernard cannot see how big a picture appears on your page, so it will ask you rather than guess.
- Does this happen straight away, or do I approve it first?
- Straight away - this one is live as soon as it runs, unlike most changes. That is why the undo exists and why bernard will tell you the exact words to say to put it back.
- My site says it has run out of room for pictures. Will this help?
- Usually a lot. Photographs straight from a camera are often five or ten times bigger than a website ever needs. One site was over its limit and could not add anything new; shrinking its photographs freed a hundred megabytes and it had room to spare.