Formatting your images for display on the web
I have some recommendations on how to format your images before uploading them.
Before you begin
To find the size and dimensions of your original image before you upload it to your site:
- PC – Right click on the image file and select Properties.
- Mac – Press Option while clicking on the image file, then select Get Info.
- Aspect ratio – An image’s aspect ratio is its width to height ratio expressed as a number, like 3:4. Maintaining a consistent aspect ratio prevents images from becoming distorted. For example, if you reduce the width of an image by half, you must also reduce the height by half.
- Image width – In this guide, image sizes refer to the number of pixels along the image’s width and height. Your image may display larger or smaller on your site depending on its container size.
The height changes relative to the width to preserve the image’s aspect ratio.
Save images in .jpg, .gif, or .png format only.
.pdf, .psd, .tff, and .doc files aren’t web-compatible.
Only use letters, numbers, underscores, and hyphens in file names. Other characters (like question marks, percent signs, and ampersands) may upload incorrectly or cause unexpected behavior in galleries.
There is an image resolution limit of 72 MP (megapixels). Tip: To find the MP for an image, multiply the dimensions and divide by one million. For example, an image with dimensions of 1500px x 1650px is 2.475 MP.
Save images in RGB color mode. Print mode (CMYK) won’t render in most browsers.
Save images in the sRGB color profile. If images don’t look right on mobile devices, it’s probably because they don’t have an sRGB color profile.
I recommend using image files of less than 500 KB for best results, though the limit for an individual image upload is 20 MB. When it comes to image size, bigger isn’t always better, as uploading multiple large images can affect site performance. If you’re adding multiple images to a page, keep your overall page size in mind.
The dimensions of the original image you upload to your site can have a big impact on how it displays. We recommend using images that are between 1500 and 2500 pixels wide.
- Images smaller than 1500 pixels may appear blurry or pixelated when they stretch to fill containers, such as banners.
You can use third-party software to reduce an image’s dimensions. We don’t recommend enlarging a smaller image, as this can make it appear pixelated. Instead, start with an image that is at least 1500 pixels wide.
Software (desktop editors)
- Acorn (free & paid version) – Mac
- Adobe Illustrator (paid) – Mac and Windows
- Adobe Lightroom (paid) – Mac and Windows
- Adobe Photoshop (family of options from free to paid versions) – Mac and Windows
- Corel PaintShop Photo Pro (paid) – Windows
- Gimp (free) – Mac and Windows
- paint.net (free) – Windows
- PhotoScape (free) – Windows
- Pixelmator (paid) – Mac
Web (online editors)
- PicMonkey (paid and offers many options)
- Pixlr (free and supports some mobile editing options)
- PhotoshopExpress (free but registration required)
An image’s name acts as alt text if there isn’t any other alt text provided. It also tells search engines what the image is about, which makes it more likely that you’ll show up in image searches.
When creating your images, keep these alt text best practices in mind.
Alt text is text associated with an image that some browsers display instead of the image. Search engines use it to identify the content of a page. Adding alt text to images is a great way to give your site an SEO boost and make it more accessible.
Alt text is also helpful for assistive screen readers or browsers with images disabled. If a browser can’t display the image, the alt text will display instead. For all these reasons, when you add alt text, use short, readable terms that describe the image and relate to your site content.
The title of the image usually serves as alt text. If you do not manually add alt text the title will serve as the alt text.
When writing alt text, remember that you’re writing for humans who use assistive screen readers or who’ve disabled images in their browsers. Keep in mind:
- Be descriptive and helpful. How would you describe this image to someone who couldn’t see it?
- Keep the text short, typically twelve words or fewer.
- Optimize your text for search by incorporating keywords without “keyword-stuffing.”
- Write in real sentences; do not use hyphens to separate words.
- You can omit words like “the” and “a,” and terms like “photo” or “picture.” For example, instead of a picture of a fat runner, use fat runner.