Your responsibilities as the client:

  1. Ensure you make all attempts to attain the highest quality image assets
    (Unless your stylistic look specifically calls for low quality images, low quality images typically come across as less professional, less refined, and may otherwise ruin a solidly produced website.)
  2. Confirm you have read the guidelines below on how to properly prepare your images for web.
  3. Ensure image files are properly formatted and ready for web upload
  4. Upload your web-ready images to the proper section of your website, so that they can be readily inserted into content by your web designer / developer.
    (If you have negotiated for your web designer / developer to handle image content uploading for you, .zip your folder of images and email transfer them via wetransfer.com for free.)
  5. See also: How to notate in your copy documents where images should be placed.

 

Important Notes:

  • Website production will not begin until image assets have been properly delivered. Delay in delivery of any content assets (images or copy) will delay beginning the website production timeline. Delays to delivery greater than 1 week may require renegotiation of website production fees.
  • You are responsible for the images submitted and understand that what you submit is what will be used. If the images provided to developer do not meet the requested quality standards, you accept full responsibility over end result.

 


Logos

Please provide your logo as:

  • Format: .PNG file format only
    (.jpg or other file formats are not accepted)
  • on a transparent background
  • Dimensions: minimum of 1000px wide, to be resized down as needed for use on web
  • Target KB size: ~20kb, or < 100kb
  • File name: companyname_logo.png
  • Usage rights: Verify you have the rights / permissions to use

If you do not currently have your logo as a transparent PNG file, you may provide your logo in .ai / .eps / .tif format and I will convert it to PNG.

Photos

  • Format: .JPG file format only
    (.PDF and other file formats cannot be displayed on the web and are not accepted.)
    (*Digitally illustrated graphics may be saved as .PNG file format for improved output quality and potentially smaller file sizes.)
  • Dimensions:
    • Supporting images (small): Minimum 1500px wide
    • Feature images aka. “hero images” (large images that will be displayed at full screen width): Minimum 2500px wide, up to 4000px wide if possible
  • Image Quality:
    • For photographic images from a DSLR camera (whether your own photographer, or a purchased stock photo image):
      • 1. In Photoshop, scale image down to either the recommended small or large dimensions.
      • 2. To optimize for web, use the ‘Save for Web’ setting in Photoshop. Then, manually tweak the ‘Quality’ setting anywhere between 20 to 70. For small images, saving at quality between 50-70 gives a great balance between quality and load speed. For large images, save at a lower quality between 20-40 to compensate for the large file size slowing down load speed.
      • Note: the more image heavy your page is, the more strictly you should compress your image file sizes.
    • For scanned images or images pulled off other people’s websites:
      (Note: These second hand images are almost always suboptimal quality.)

      • 1. First open the image, zoom to 100%, and inspect. Is it pixelated, blurry, or bad quality to begin with? If so, do not proceed to the next step. Find an alternate method to garner a high quality, crisp and clear image.
      • 2. Check cropping: Have you left extra white space around the image from the scanner bed that needs to be cropped off?
      • 3. Check rotational alignment:  Is the image crooked and not level?
      • 4. Follow steps 1 and 2 for DSLR photos listed above.
  • Target KB size:
    • Small images: 70kb to 350kb
    • Large images: 350kb to 550kb
  • File name: Use a consistent, semantic naming format that can apply for all your images.
    • To name by the location image will reside: bio_photo_johndoe.jpg or press_2016-07_vogue.jpg.
    • If image may be used in multiple locations on site, name purely by content description: 2016-07_voguephotoshoot.jpg or 2015-01_alaskatrip_john_suzie_mom.jpg
  • Usage rights & attribution: Verify you have usage rights and permission to use photos or graphics on your website. Check with the photographer or content creator if attribution is needed and where. It is also best practice to credit your photographer somewhere in your filename: mumbai_skyline_johndoe.jpg

For additional detail on how to get your images ready for web, read this Squarespace tutorial:
https://support.squarespace.com/hc/en-us/articles/206542517-Formatting-your-images-for-display-on-the-web

on May 3, 2016

Leave a Reply

*

Brand-to-Table

Take an inside look at my process for developing brands.

A complimentary online workshop. Follow at your own pace. Come back anytime.