FieldStack Image Overview:  

All non-product images should be stored in FieldStack as item listings.  For ease of searching, it is recommended that each group of images be assigned a new vendor code created for ads (e.g. IMG0000001).  Image items can be located using the "Advanced Search" feature in the Retail tab.  Search using the vendor code (typically IMG0000001 or IMG0000002).  


Creating new images:  

Once the first image has been created, others may be created from it by hitting {Ctrl + S} on the Item Listing screen.  This will bring up the Edit Item screen (shown below) with the vendor code and configurations pre-filled.  The Configuration should be set to “System” (-0).  Extended Configurations should be set to one of the following:

              

Extended Configuration Options:            

Image Asset (-00) 
Images that are used in promotions and e-mail newsletters
Image Fixed Asset (-01) 
 Images that have a permanent place-holder – new images can be swapped out with existing images to appear in the same position (such as the rotator images). These images should remain a consistent size.
Image System (-02)
Images that are permanent fixtures, such as the banner

                      

  • Note:  Images with a configuration set to "System" (-0) will have their quality automatically reduced to reduce the file size.  If the extended configuration is set to one of the three previously mentioned configurations then this degradation in quality will not occur.
  • The images should also be checked for Departmentalized, Order Locked, and Block From Search.
  • It is recommended that the Item Name given to an image be utilized for a filing system, so that each image is searchable by its usage or placement.



Edit Item Screen (below):



When done editing the item, save the new listing, then bring it up in the item listing screen (see image below).  Here, click Upload Image on the Details tab and select the desired ad.  When you leave the Details tab and then go back to it, the image will appear.  Right-click on the image and select either Copy Image Path Small or Copy Image Path Large.



Item Listing Screen (below):



Paste the image path into the HTML field in the Web Content Editor.  Click Update and the image will appear in the appropriate position on the web store the next time it refreshes.


Web Content Editor (below):


When building the <img> tag, specify the full path of the image, but leave off the http or https.  This will allow the image to display correctly on secure and normal pages.



Optimizing Images for Web Use


To optimize images for web use, use the following guidelines:

  • Size:  Images should be sized only as large as they will need to be at the maximum.  
  • Pixel Density (DPI):  When saving an image in a program such as Photoshop, you may be prompted to select a DPI setting.  Leave this set to 72.  A higher DPI will not affect web images in any way.  
  • File Type:  PNGs are typically the preferred format for web images, and images uploaded to FieldStack now support PNG transparency as well.  If a window prompting a selection of the image quality is shown to you, be sensible about the level you choose.  The maximum quality is typically not necessary and something around 6 or 7 (on a scale of 10) will look fine for the majority of people.  Saving images at maximum quality will often make them much larger than they need to be.  
  • File Size:  Always be sure to check the file size after saving an image for the web.  It should ideally be less than 1MB in size (though if it's a landing photo or some other large image this may be acceptable).