🌿 EasyLife
Projects Guides About Contact

How to prepare images for a fast website

Smaller files, faster pages · updated October 2026

Images usually make up most of the weight of a web page. A single unoptimised photo straight from a phone can be larger than the entire rest of the site. Visitors on mobile data will leave if a page takes more than a few seconds to appear, and search engines also prefer fast pages.

Step 1: choose the right dimensions

Do not upload a 4000 pixel wide photo to display it in an 800 pixel wide column. The browser still downloads all 4000 pixels and then shrinks it. Look at the largest size the image will be shown, and resize to about twice that for sharp screens at most.

  • Full width hero banner: about 1600 to 2000 pixels wide.
  • Blog post image: about 1000 to 1200 pixels wide.
  • Thumbnail or card: about 400 to 600 pixels wide.
  • Logo or icon: often under 300 pixels.

Step 2: pick the right format

  • JPG for photographs.
  • PNG for logos, screenshots and graphics that need transparency.
  • WebP is a modern format that is smaller than both and supported by all current browsers, if your site allows uploading it.

More detail in our JPG vs PNG guide.

Step 3: compress sensibly

A good target for most photos is 100 to 200 KB, and for small thumbnails under 50 KB. Use the EasyLife File Converter to resize first, then compress to a size target. Quality around 70 to 80 percent is usually invisible to viewers.

Step 4: name files properly

Use short, descriptive, lowercase names with hyphens, for example red-ceramic-teapot.jpg, not IMG_20240615_0042.jpg. It helps organisation and gives search engines a clue about the picture.

Step 5: always add alt text

Alt text is a short written description of the image, such as "Hand painted red teapot on a wooden table". It makes your site usable for people with screen readers and is shown if the image fails to load.

Quick checklist

  1. Resize to the display size.
  2. Choose JPG, PNG or WebP correctly.
  3. Compress until it is as small as it can be without looking worse.
  4. Give it a clear file name.
  5. Write alt text.
Related reading: resizing to exact dimensions and compressing to an exact size.

Optimise an image now →

© 2026 EasyLife · easylife.solutions

Home Projects Guides About Contact Privacy Policy Terms