Recommended Image and Photo Settings
- Horizontally aligned: Vertical images are allowed on your site, but rarely used in online news publications or online in general. This is because of the horizontal layout of most monitors and devices. Horizontal images will work best throughout your site.
- 3:2 ratio width to height: Although this can vary, 3:2 width to height ratio will be most compatible throughout your site. If you do use a vertical image than use the 2:3 width to height ratio.
- No wider than 2000 pixels wide; no taller than 2000 pixels tall: It is possible to upload images that are wider or taller than these sizes, however your image will be compressed which can disrupt the quality of the image. If an image is inordinately larger than those sizes you may receive an error message blocking you from uploading it.
- 900px wide by 600px tall minimum (horizontal), 900 px wide by 1350 px tall minimum (vertical): Again, there are some exceptions, but generally your photos or images should not be smaller than these width and height settings. If too small, the site may not be able to create an adequate thumbnail to display on certain pages, such as Category Pages.
- Must be smaller than 15mb in size: All photos and image files must not exceed 15mb in total file size, otherwise the site will not allow you to upload the image and you will receive an error message. This limit keeps your site running at an optimal speed.
- 72 PPI or DPI: PPI stands for pixels per inch; DPI stands for dots per inch. They are essentially the same measurement tool and correspond to how many pixels live inside of a square inch of space. 72 is more than enough for a high resolution image.
- Save in RGB color mode: Please save your files, when given the choice, in RGB color mode. Saving in CMYK mode will create an image quality distortion after uploading to your site.
- Image resizing: There are many image editing programs and apps you can download or purchase, such as GIMP or Photoshop, but you can also do so on the web.
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.
Photo Sizes
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 2000 px wide by 1333 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 2000 pixels (max) or 900 pixels (min) and the height to 1333 pixels (max) or 600 pixels (min). For a vertical photo, set the width to 2000px (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
There are several places throughout the SNO Design Options page where you can select the option to "allow vertical images", such as under the Category Page options and the Staff Page options. Without these selected you'll likely get 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). Ideally, you'll mostly use horizontal images, as these work best online.