How do I prepare images for my Non Scaler site?

**PLEASE NOTE** 
These instructions below are for NON-SCALER sites. If you are looking for the image preparation guide for Scaler sites, click here

+++ 

Preparing your images for upload and display on your liveBooks site can be done in many ways. Regardless of the method that you use to prepare your images there are several standards, listed below, that you must adhere to in order for your images to appear correctly and your viewers to have a smooth experience. 

COLORSPACE: sRGB 
RESOLUTION: 72dpi 
FILE TYPE: JPEG 
FILE SIZE: 90 - 110k (full size) or 45 – 60k (diptych) 
PIXEL DIMENSIONS: Most liveBooks sites use one of two standard image areas: 
920 x 562px (full size) or 562 x 450px (diptych) 
or 
750 x 500px (full size) or 500 x 365 (diptych) 

A video tutorial outlining image preparation in Adobe Photoshop CS4 is available here: 

Image Prep in Photoshop CS4 from liveBooks on Vimeo.

Tutorials for other versions of Photoshop are available in our Video Tutorials section here

 

The following is a method of image preparation that may be useful to you. Please feel free to tailor this process to best fit your work flow however be mindful of the recommended standards listed above. 

  • Select and Open an image file in Photoshop. 

At this point you should crop and adjust the color and sharpness of your image as necessary. 

  • Make sure that you are in the sRGB colorspace. You can check and set your color profile through the 'Assign Profile...' option found under the 'Edit' menu.
  • Access 'Image size' from the 'Image' menu.
  • Set Resolution to 72 dpi (pixels/inch)
  • Make sure that 'Constrain Proportions' is checked and set the horizontal or vertical pixel dimensions to a max of 920 x 562 (or the pixel dimensions for your site if different). If you set the horizontal to 920 and the vertical is over 562, then set the vertical to 562 and the resulting horizontal will be less than 920. For images that you wish to appear side by side (two per page) on your site you must size no larger than 562 x 450px.
  • Select 'Save for Web...' from the 'File' menu.  Note: if you are using Photoshop CC 2015 or later, the 'save for web' option has been reorganized under File -> Export -> Save For Web (Legacy).
  • Under the 'Save, Cancel, and Done' buttons you will see a 'preset' preferences area. Make sure that you are saving as to JPEG and that all boxes (Optimized, Progressive, and ICC Profile) are unchecked.
  • Adjust the 'Quality' figure until the file size, displayed under the image preview in the bottom left hand corner of the window, is around 100k.
  • At this point the image in the preview window should appear exactly as the image should once it has been uploaded to your website. If you feel that the image needs adjustment (color, saturation, sharpness), click 'Cancel' and make adjustments. Once complete Save for Web again to check your work. When you feel that you are done click Save. 


A few important notes about uploading your images to the editSuite: 

- Naming your image files before uploading can aid in Search Engine Optimization. We recommend that you name your files with titles relevant to their content rather than their default file names. 

- The final file size of your images is at your discretion, if you feel that your image needs to be saved at a slightly higher file size to appear correctly you are welcome to save as necessary. Please keep in mind however that a 200k image will take twice as long to load as a 100k image and that greatly varying file sizes among your images can give the appearance of your portfolios loading in an inconsistent fashion. 

- Any image uploaded to your editSuite that is larger than 920 x 562px or 100k will display a warning that the image is too big. 

- With this process you will not need to use the 'resize image' upload feature when upload feature in the Upload module of your editSuite. This feature has been built into the editSuite for use when access to a professional image editing application is not available however does not yield as high quality results. 

- Using the 'Save for Web' feature does remove meta-data from your images.

Have more questions? Submit a request

Comments

Powered by Zendesk