Image optimization

Which image format should I use: JPG, PNG, WebP or AVIF?

These days the standard is WebP or AVIF for photos and SVG for logos and icons. web.dev notes that WebP and AVIF usually compress better than the older formats (JPG, PNG) and recommends using them where you can.

If you use AVIF, though, it's safer to keep a fallback file such as a JPG for browsers that can't read it. Animated GIFs are huge, so converting them into a short video file makes them far lighter.

Often you don't even have to pick the format yourself. Depending on how your website is built, you can upload a JPG and the site converts it to WebP or AVIF to suit each customer's browser.

Logos that need a transparent background and product photos with the background removed are also often lighter when saved as WebP instead of PNG.

What pixel size and file size should website photos be?

There's no single number that fits every photo; you size each one by how big it actually appears on screen. For a photo that fills the width of a phone screen, about twice that width in pixels is usually enough to look sharp even on high-resolution displays.

Original phone camera shots are often more than 4,000 pixels wide, so if you upload them as they are, most of those pixels go to waste. It's best to make separate sizes for large banner photos and small list thumbnails.

File size for the same photo varies a lot with the format and compression level, so judging quality by eye on screen is more reliable than memorizing numbers. Keep first-screen photos especially light so your site makes a fast first impression.

By industry, the heaviest spots tend to be the menu gallery for cafes and restaurants, before-and-after photos for hair salons, and product detail photos for online shops. Checking those first gives you the biggest payoff.

What are responsive images and lazy loading?

Responsive images means preparing the same photo in several sizes and sending only the one that fits each customer's screen. With the HTML settings srcset and sizes, the browser looks at the screen size and picks the right file.

Lazy loading means photos lower down the page load only when the customer scrolls close to them. However, web.dev advises against lazy loading photos on the first screen, especially the largest one, because it actually makes the first screen appear later.

It also matters to set each photo's width and height. If the browser doesn't know the size, text gets pushed down the moment the photo appears, and customers can end up tapping the wrong button.

Lazy loading and responsive images are mostly set up during the build, so there's nothing extra for you to do each time you upload a photo. Still, ask the agency to confirm they're set up properly before launch.

How do I shrink photos before uploading them myself?

If your admin panel shrinks images automatically, it's fine to upload the originals. If not, get into the habit of shrinking them once using the steps below before uploading.

For photos you post often, like a cafe's new menu items or a workshop's pieces, it helps to set a rule once. Note down the standard you agreed with your agency, such as "gallery photos: X pixels wide, WebP," and shrink them the same way every time.

Photos taken on a phone can also store information such as where they were taken. If your resizing tool has an option to remove this data, turn it on; it's better for both file size and privacy.

1. 01Check how large the spot you're uploading to (banner, gallery, product list) appears on screen.
2. 02In a photo editing app or a free image compression tool, reduce the width to fit that spot.
3. 03Choose WebP as the format and lower the quality until just before you can see a difference.
4. 04Rename the file from "IMG_1234" to something descriptive like "yeonnam-cafe-handdrip.webp".
5. 05After uploading, open the page on mobile data (with Wi-Fi off) to check the speed.

How should I write image alt text and file names?

Write alt text as if you were telling someone who can't see the photo what it shows, in one sentence. Google Search Central treats alt text as the most important attribute for image information and advises against stuffing it with keywords.

Images with no content, like decorative patterns or backgrounds, should have empty alt text. The W3C images tutorial also says to leave the alt value empty for decorative images. On the other hand, images that contain text, like a menu board, should have that text copied into the alt text as is.

File names are a small clue too. Google recommends short, descriptive file names over names like "IMG00023.JPG". Using lowercase English letters and hyphens (-) keeps URLs from breaking and makes files easier to manage.

• Good: "A slice of strawberry cream cake topped with three fresh strawberries"
• Weak: "best cake shop cake recommendation cake order" (just a list of keywords)
• Weak: "photo1", "image" (no information at all)

What are common image optimization mistakes?

The most common one: the site was light at launch, but original-size photos pile up one by one over time and it slows down again. This happens a lot at businesses whose gallery, reviews or products grow often.

Posting your menu, price list or event notice only as a single image is another problem. It's heavy, and search engines and screen readers can't read the content.

You can check speed with a free tool like Google PageSpeed Insights just by entering your URL. If the results suggest image-related fixes, start with your photos.

If your gallery has dozens of photos, another option is to show just a few at first and load the rest when the customer taps "See more." That makes the first screen much lighter.

What should I ask my web agency about image optimization?

Photos keep piling up after launch, so ask these four questions, covering both the initial upload and ongoing operation.

• Does the admin panel automatically shrink and convert uploaded photos?
• Do you use responsive images that send the right photo size for each screen?
• Will you measure the loading speed of first-screen photos before launch?
• Will you check after launch that heavy photos haven't been piling up?