Photo Size, Resolution, and Format
Your site automatically generates a series of scaled down images for each photo you upload for the various parts of your site that display different sizes of images.
Cameras take pictures at a far higher resolution than will ever be useful on a website — the pictures you take are often more than 100 times larger than your website needs.Â In order to keep your website from loading slowly, it is important that you scale your photos down appropriately before you upload them to your site.
You can use PhotoShop’s cropping tools and Save for Web option to effectively reduce the file size of a photo before you upload it to your site.
Always save your photos in RGB color mode — this is the default mode your camera uses.Â Color photos for print require CMYK mode, but CMYK mode doesn’t work consistently on all browsers.
Top Stories Box Photo Sizes
The Top Stories box has several views, and each view has a slightly different size of photo.Â For the most part the photos here are in a 2:1 horizontal ratio rather than a 3:2 horizontal ratio.Â If you find that the photos you add here are being cropped, you should upload a photo in a 2:1 ratio (800px wide by 400px tall, for example).
How to Resize a Photo
- In PhotoShop, click on the Crop tool.
- For a horizontal photo, set the width in the top control bar to 750px (not inches) and the height to 500px.Â For a vertical photo, set the width to 500px and the height to 750px.Â You can use ratios, but the width should always be at least 500px.
- Set the resolution to 72 dpi.
- Crop the image.
- Use the Save for Web option under the File menu.Â Select jpg as the format and save your file.
Using Vertical Photos
The Top Stories box on the homepage is the only part of your site that requires a horizontal photo.Â Adding a vertical photo to this category will result in a severely cropped photo.Â The rest of the site can display vertical photos without a problem.