Images
  Navigation

Images

When creating images for the web you need to balance file size and quality.  The file size is very important to ensure that your web pages load as fast as possible.  

JPEG

JPEG images are the best file type for images on the web.  This format does an excellent job of compressing the image size by dropping out pixels yet still keeping the image quality.  When saving images for the web, with very few exceptions, save JPEGs in Photoshop at image Medium Quality / 30%.

PNG

PNG images do not drop any pixels and therefore can not compress as well as JPEGS if the image is a photograph.  When saving a PNG file you can specify how many colors the image can contain (pallet size) and instead of dropping pixels, it changes the colors of pixels to be that of the available colors in the pallet.  PNG images are best suited for flat illustrations or in photographs with text where you need the text to be perfectly sharp.  Do not use PNG format for photos unless there is a specific need and that need outweighs the potential extra file size.  PNG images support transparent backgrounds, and this is the most common use of this image format.

GIF

GIF format is best suited for flat illustrations and images with text on them.  This format has essentially been replaced by JPEGs and PNG formats.  

Physical Dimensions of Images

When uploading an image file, you should consider the physical dimensions (pixels height and width).  

  • For content images we recommend that the size of the image be exactly to the pixel the size it will be presented at the largest resolution. 
  • For product images in ecommerce, see our recommendations here.

Color Space

To make sure your images are exactly as intended, please use the sRGB color space. If your images aren't saved as sRGB, they will be automatically converted to this form as they are uploaded into our system. There may, therefore, be noticeable differences in the images you see on the website versus what you had uploaded due to sRGB having a limited spectrum of colors. See this wikipedia link for more on this.


Please send us suggestions regarding this documentation page
If you would like to recommend improvements to this page, please leave a suggestion for the documentation team.

Be the first to write a comment...