Best image size and format for your website
For most website photos, export a JPG about 2500 pixels on the long edge, in RGB color, with a short file name that has no spaces. Resize and export images before you upload them: the right size and format keeps photos sharp on big screens and quick to load on phones.
What size should website images be?
| Guidance | |
|---|---|
| Width | About 2500px on the long edge for heroes and full-width photos. Below about 1500px, large crops start to look soft. |
| File size | Well under 20 MB. Smaller loads faster. |
| File name | Letters, numbers, hyphens, and underscores. No spaces, ampersands, or accented characters. |
| File type | JPG for photos. PNG or GIF for graphics. SVG for logos and simple icons. |
| Color | Export as RGB, the color mode screens use, not CMYK, which is for print. Choose the sRGB profile when your editor asks, so colors look the same on every device. |
How do I check an image's size?
Mac: select the file and press Command + I. Dimensions and color profile are under More Info.
Windows: select the file, press Alt + Enter, and open the Details tab.
Why do images crop differently on phones?
Blocks show images in one of two ways. Some examples below are Dirigible blocks; the core Cover block fills and crops the same way as Hero.
The whole image shows
The core Image block, Media & Text, and Media Callout keep the photo's proportions and show every edge. Use these when nothing in the photo can be cut off.
The image fills the space and may crop
Hero, Section backgrounds, Photo Feature, and similar layouts stretch the photo to fill the area. The edges crop differently on a phone than on a wide desktop.
Set a focal point so the subject stays in frame when the crop changes.
Keep text out of the image
Headlines baked into a photo can't be read by search engines, and crops cut them off, especially on phones, where the frame is taller and narrower. Put headlines and buttons in blocks on top of or beside the image.
After you upload
- Add alt text in the media library. See How to write alt text for images.
- Set focal points on photos that appear in cropping layouts.
If your site runs on Dirigible
With Dirigible Optimize active, uploads are made lighter for you:
- Every uploaded image is compressed, and the camera and GPS details stored in phone photos are removed.
- Images longer than 3,000 pixels are shrunk to 3,000 on upload, so a photo straight off a phone or camera is fine to upload as is.
- PNGs with no transparency, and GIFs that aren't animated, are saved as JPGs when that makes the file smaller. To keep them as uploaded, check Keep PNG and GIF uploads as they are on the Images card in Optimize.
Images uploaded before Optimize was installed aren't compressed automatically. To shrink them, click Compress older images on the same Images card. It runs in the background and keeps file names and addresses, so nothing on your pages changes.
You still get the best results from images sized and named as above. See Images and PDFs in the Optimize docs.