Design Academy / Getting Started / Best Practices / What Makes a Good Web Image

What Makes a Good Web Image

File formats (JPG vs. PNG vs. WebP), ideal dimensions, and why file size matters for page speed.

Not all images are created equal when it comes to websites. The format, dimensions, and file size of an image all affect how your site looks and how fast it loads. Here’s what you need to know before you upload anything.

File Formats

  • JPG (or JPEG): Best for photographs and images with lots of colors and gradients. Good compression, smaller file size. Use this for team photos, action shots, and banners.
  • PNG: Best for logos, icons, and images that need a transparent background. Larger file size than JPG. Use this for sponsor logos and graphics.
  • WebP: A modern format that’s smaller than JPG at the same quality. If your image editing tool supports it, WebP is a great choice.
  • Avoid: BMP, TIFF, HEIC, and RAW files — these are too large for web use and may not display in all browsers.

Dimensions

The dimensions (width and height in pixels) should match the space the image will occupy on the page — never larger.

  • Hero/banner images: 1920px wide maximum
  • Staff or team photos: 400–600px wide
  • General page content images: 800–1200px wide
  • Thumbnails: 400px wide or smaller

Uploading a 4000px-wide photo to fill a 400px space wastes bandwidth and slows down the page for everyone.

File Size

Aim for images under 200KB for most images, and under 500KB for large hero banners. Large image files are one of the most common causes of slow websites.

If your image is over 500KB before uploading, compress it first. See How to Optimize an Image Before Uploading for free tools that make this easy.

Alt Text (Required)

Every image needs alt text — a short written description of what the image shows. Alt text is used by:

  • Screen readers, which read it aloud for visitors with visual impairments
  • Search engines, which use it to understand and index your images
  • Browsers, which display it if the image fails to load

Good alt text is specific and descriptive. Instead of “photo”, write “Girls soccer team celebrating a championship win on the field.”

📝 Note: Photos taken on a smartphone can be 3–6MB in size. Always compress and resize before uploading to WordPress. Uploading phone photos directly is one of the most common mistakes that slows sites down.

Related Topics

WordPress offers a convenient solution with its Media Library if you’re managing a youth sports website and need to handle...

How to Add A Page

2 min
Page Editing

Imagine a dynamic webpage for your youth sports team that’s as easy to build as playing with building blocks. With...

WordPress Dashboard

1 min
Dashboard, Website Basics

The WordPress Dashboard is the central hub for managing your WordPress website.

In the digital age, where information is a valuable commodity, securing your online presence is paramount. For WordPress site owners,...