It’s important to use the right file format and to size images to be able to load fast on your website. Larger images can slow down the page load time. Slow page load times lead people to leave your size, so this is a no-brainer.
Best practices for how to format images for the web
WebP or JPEG tend to be best for photos (sized to about 200KB or less). SVG is great to use for graphics and logos or vector-type images (Adobe’s article on vector vs. raster for more information). Common image dimensions include 1200px wide for content (e.g., 1200×800 for 16:9 aspect ratio), 1920px for full-width banners, and smaller sizes (e.g., 100-300px) for thumbnails. This helps to make sure that pixel dimensions match the display area to balance quality and speed.
How to choose a format:
- WebP: Best overall for photos due to superior compression (smaller files, faster loads).
- JPEG: Great for photos, use quality 8-12 for good compression.
- PNG: Use for images needing transparency (logos, icons).
- SVG: Ideal for logos, icons, and simple graphics; vector-based and scalable without quality loss.
Typical image sizes in pixels (px)
- Hero/Banner Images (Full Width): 1920px wide (e.g., 1920×1080 for 16:9).
- Main Content/Blog Images: Around 1200px wide (e.g., 1200×630 for 16:9/3:2).
- Thumbnails/Icons: 100px to 300px (e.g., 150×150 for square).
- Logos: Square (100x100px) or Rectangular (250x150px).
Other best practices
- Small File Size: Aim for <200KB file size where possible for faster loading, but don’t sacrifice essential quality. 1 MB would the absolute maximum except for unusual circumstances.
- Responsive Images: Use different sizes for desktop and mobile, if possible.
- RGB Color: Use RGB color mode with the RGB profile for web consistency.
Get our guide on how to start making your website available to everyone.
Get the Guide
Free resources for formatting images
GIMP has been around a long time and is the best free substitute for Photoshop. You can crop and resize with this.
CANVA is free for 501(c)3 organizations and provides photo editing tools and LOT more – aimed for non-technically trained people. This is their free photo resizer to size images for the web.
TinyPNG is a long-standing resource as well to reduce the size of your images (but no crop or scale features). It just compresses the file size.
Happy editing!