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 any image editing software, such as PhotoShop or GIMP to scale your images. 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.
All photo-editing should take place off-site, prior to uploading the final version of your image to your SNO site. We recommend using horizontally aligned images (3:2 ratio width to height), as we've found this consistent with web-standards across most news sites online. Generally speaking, all photos should be sized to 1500 px wide by 1000 px tall (max) or 900px wide by 600px tall (min). If a photo that's uploaded is greater than the max recommendations, it will automatically be scaled down to the max size dimensions. If your photo is smaller than the minimum recommendations, it may not appear in the Showcase Carousel at all if being used as a Featured Image.
How to Resize a Photo
- In your image editing software, click on the Crop tool.
- For a horizontal photo, set the width in the top control bar to 1500 pixels (max) or 900 pixels (min) and the height to 1000 pixels (max) or 600 pixels (min). For a vertical photo, set the width to 1500px (max) or 900px (min) and let the height "float." NOTE: If the image will be an immersive featured image on a long-form story page, we recommend you set the width to 1500 pixels and the height to 1000 pixels.
- Set the resolution to 72 dpi or ppi (dots per inch or pixels per inch)
- Crop the image.
- Use the Save for Web option under the File menu. Select .jpg, .png. or .gif 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, but be sure to have the category pages set up to allow vertical images on the SNO Design Options page or your photos might look cropped (see above).