Web Image Processing Standards
Basic info you should know:
1. ALL files must be named with ALL lower case letters.
2. No spaces can exist in file names.
3. You MUST follow the naming convention shown below.
4. ALL images must be in RGB color space and MUST be at 72 DPI. (Except for the high-res version)
5. The background color must be pure white with no variations (Web color #ffffff=white)
A. Web Naming Convention:
File names for images are broken up into two basic categories: Part number and View.
A1. Part Number
Example: AP7901BLK. The filename for this part number would look like this ap7901blk (See fig1)
A2. Underscore
Between each category there must be an underscore to easily distinguish between the information that is being provided in the file name. (See fig1)
Example: After the part number you would put an underscore ap7901blk_
A3. View Suffix (See fig1)
The last part of the file name pertains to the actual view that the photograph is. It could be a front left (fl), front right (fr), front straight (f), back (b), application shot (app), family shot (fam), or square up or detail shot (sq). An “S” is also inserted before the view to indicate that it has been Siloed.
Fig 1
B. Image Sizing Process
There are five standard sizes of images that are required for APCMedia.com and www.apc.com.
· High Resolution. This file is to be used for print and should be a high quality jpg file CMYK at 300dpi. The file that gets uploaded to the web should not exceed 2000w X 2000h pixel dimension or 2.5mb. This is not the standard for Media Bank, Web only!
· 500 pixels (Power Point Size). This image is used for Power Point presentations and is not to be larger than 500 pixels either wide or high but does not have to be 500x500 pixels. It could be 500x340, 234x500, etc… This image should be saved as a .jpg file and be in RGB color space at 72dpi. All .jpg’s being viewed on the web should be saved using the “Save for web” feature in Photoshop.
· 448wx150h Family Images. All family images need this size in place of the 300x150. This image should be saved as a .jpg file and be in RGB color space at 72dpi. All .jpg’s should be saved using the “Save for web” feature in Photoshop.
· 150wx300h or 300wx150h pixels. This depends whether or not the image is wider or taller. If the image is square you should use the horizontal 300wx150h. These images are used on APC.com and in other various web apps. This image should be saved as a .jpg file and be in RGB color space at 72dpi. All .jpg’s should be saved using the “Save for web” feature in Photoshop.
NOTE: When sizing the 300, 200, and 64 size images you must be sure that when the images are viewed next to each other they look correct proportionally. Refer to the “Image Sizing Procedure” portion of this document.
· 100wX200h or 200wX100h pixels. This depends whether or not the image is wider or taller. If the image is square you should use the horizontal 200wx100h. These images are used on APC.com and in other various web apps. This image should be saved as a .jpg file and be in RGB color space. All .jpg’s should be saved using the “Save for web” feature in Photoshop.
· 64x64 pixels. This is the thumbnail that is displayed on the site. This image should be saved as a .jpg file and be in RGB color space. All .jpg’s should be saved using the “Save for web” feature in Photoshop.
B1.) Folder Structure for Saving Images to the Web
Since one photo has to have 5 sizes and all five sizes need to be named with the same name, we therefore need to save the different sizes of the same image into different folders. Please refer to the example shown below. All of the images should be named with there respective part numbers (see Fig2)
Fig2
Image Sizing Procedure
Note: The procedures mentioned here are referring to using Adobe Photoshop.
For Web High Resolution Size
A. Open the image in Photoshop.
B. Crop your image
Ø choose the marque tool
Ø surround your image leaving a 10% margin (200 pixels)
Ø choose Image, Crop
C. Resize your image
Ø Vertical Orientation
o From the main menu, choose Image/Image Size and the larger size to 2000 pixels or under 2.5mb.
(Note: Be sure that both 'Constrained Proportions' and 'Resample Image'
are checked.)
Ø Horizontal Orientation
o From the main menu, choose Image/Image Size and the larger size to 2000 pixels or under 2.5mb.
(Note: Be sure that both 'Constrained Proportions' and 'Resample Image'
are checked.)
D. Make sure the image mode is CMYK
o From the main menu, choose Image, Mode, select CMYK Color
C. Save in .jpg format
E. Follow the File Naming Convention
For Web 500 Size
A. Open the image in Photoshop.
B. Crop your image
Ø choose the marque tool
Ø surround your image leaving a 10% margin (50 pixels)
Ø choose Image, Crop
C. Resize your image
Ø Vertical Orientation
o From the main menu, choose Image/Image Size and change the height to 500 pixels
(Note: Be sure that both 'Constrained Proportions' and 'Resample Image'
are checked.)
o From the main menu, choose Image, Canvas Size and change your width to 500 pixels
(Note: The image should be centered on the canvas and the background should be pure white.)
Ø Horizontal Orientation
o From the main menu, choose Image, Image Size, and change the width to 500 pixels
(Note: Be sure that both 'Constrained Proportions' and 'Resample Image' are checked)
o From the main menu, choose Image, Canvas Size and change your height to 500 pixels
(Note: The image should be centered on the canvas and the background should be pure white.)
F. Change the Image Mode
o From the main menu, choose Image, Mode, select RGB Color
D. Save in JPEG format
o From the main menu, choose File, Save for Web,
o choose the JPEG (*.jpg, *jpe) option, check the progressive box, bump the quality up to 100 and press OK,
G. Follow the File Naming Convention
For Web 300 Size
When resizing the web sizes (150wx300h or 300wx150h, 100hX200w or 200hX100w, and 64wx64h) you must make sure that the “Front Left” and “Back” views are sized proportionally to each other so when they are viewed side by side on www.apc.com they look proportional.
Example:
Correct Example on www.apc.com:
A. Open the image in Photoshop.
B. Crop your image
Ø choose the marque tool
Ø surround your image leaving a 10% margin (30 pixels)
Ø choose Image, Crop
C. Resize your image
Ø Vertical Orientation
o From the main menu, choose Image/Image Size and change the width to 150 pixels
(Note: Be sure that both 'Constrained Proportions' and 'Resample Image'
are checked.)
o From the main menu, choose Image, Canvas Size and change your height to 300 pixels
(Note: The image should be centered on the canvas and the background should be pure white.)
Ø Horizontal Orientation
o From the main menu, choose Image, Image Size, and change the width to 300 pixels
(Note: Be sure that both 'Constrained Proportions' and 'Resample Image' are checked)
o From the main menu, choose Image, Canvas Size and change your height to 150 pixels
(Note: The image should be centered on the canvas and the background should be pure white.)
H. Change the Image Mode
o From the main menu, choose Image, Mode, select RGB Color
E. Save in JPEG format
o From the main menu, choose File, Save for Web,
o choose the JPEG (*.jpg, *jpe) option, check the progressive box, bump the quality up to 100 and press OK,
I. Follow the File Naming Convention
For Web 200 Size
A. Open the image in Photoshop.
B. Crop your image
Ø choose the marque tool
Ø surround your image leaving a 10% margin (20 pixels)
Ø choose Image, Crop
C. Resize your image
Ø Vertical Orientation
o From the main menu, choose Image/Image Size and change the width to 100 pixels
(Note: Be sure that both 'Constrained Proportions' and 'Resample Image'
are checked.)
o From the main menu, choose Image, Canvas Size and change your height to 200 pixels
(Note: The image should be centered on the canvas and the background should be pure white.)
Ø Horizontal Orientation
o From the main menu, choose Image, Image Size, and change the width to 200 pixels
(Note: Be sure that both 'Constrained Proportions' and 'Resample Image' are checked)
o From the main menu, choose Image, Canvas Size and change your height to 100 pixels
(Note: The image should be centered on the canvas and the background should be pure white.)
J. Change the Image Mode
o From the main menu, choose Image, Mode, select RGB Color
F. Save in JPEG format
o From the main menu, choose File, Save for Web,
o choose the JPEG (*.jpg, *jpe) option, check the progressive box, bump the quality up to 100 and press OK,
K. Follow the File Naming Convention
For Web 64x64 Size
A. Open the image in Photoshop.
B. Crop your image
Ø choose the marque tool
Ø surround your image leaving a 10% margin (15 pixels)
Ø choose Image, Crop
C. Resize your image
Ø Vertical Orientation
o From the main menu, choose Image/Image Size and change the height to 64 pixels
(Note: Be sure that both 'Constrained Proportions' and 'Resample Image'
are checked.)
o From the main menu, choose Image, Canvas Size and change your width to 64 pixels
(Note: The image should be centered on the canvas and the background should be pure white.)
Ø Horizontal Orientation
o From the main menu, choose Image, Image Size, and change the width to 64 pixels
(Note: Be sure that both 'Constrained Proportions' and 'Resample Image' are checked)
o From the main menu, choose Image, Canvas Size and change your height to 64 pixels
(Note: The image should be centered on the canvas and the background should be pure white.)
L. Change the Image Mode
o From the main menu, choose Image, Mode, select RGB Color
G. Save in JPEG format
o From the main menu, choose File, Save for Web,
o choose the JPEG (*.jpg, *jpe) option, check the progressive box, bump the quality up to 100 and press OK,
M. Follow the File Naming Convention