IRP Shopper
Common Tasks (1)
Open
Interventions (1)
Open
Languages (1)
Open
Questions & Answers (1)
Open
Reviews (1)
Open
Site Scripts (1)
Open
Web Services (1)
Open
Training Videos
Peer Support

Image Processing

You can find this section under Products > Image Processing in the IRP Admin left navigation menu.

You use this section to copy, process and create images in your IRP Admin. This allows you to perform multiple processes on an image, including renaming, resizing, saving and so forth.

When a Model image is uploaded to the IRP, it goes into the 'New' folder (within the Models folder) and is then processed. This processing creates multiple copies of the file, each a different size (150, Full and Original) for specific use in the IRP as described in the table below. (The folder called 'New' is not used for displaying images in an IRP.)

Name Standard Size Front End Location Back End Location
Original User defined / minimum 1200px This image is displayed when you click the Enlarge Image option on a models page. /Images/Models/Original/…
Full Minimum 400px Main Model Image on Models page. NOTE: the bigger the image, the better; we recommend that your 'Original' images are at least 1200px by 1200px. The IRP will automatically optimise these images for the web. As such, it is always best to start with the highest quality images available. /Images/Models/Full/…
150 Minimum 250px Model Image on Listings pages and elsewhere. /Images/Models/150/…
 

Bulk Operations — Model Images

You can also apply the following Bulk Image Operations in this section:

Operation Description
Update Model Images Created Within The Last x Days Sets the appropriate count of images against a Model to ensure that no broken images appear on the front end of the website. Files with changed image formats will also be detected.
Update Original Images Created Within The Last x Days
With Width (px) greater than y pixels
or Height (px) greater than z
Updates the original images uploaded against a Model.
Update Enhanced Images Created Within The Last x Days Looks for enhanced images uploaded for a Model. If an enhanced image is found, it sets the enhanced image property against the model to true, ensuring the image will appear.
Update Models With No Images Looks for Model images and if it does not find any for a given Model, sets the image field against the Model to false. This will ensure that a generic image will appear against the Model rather than a broken image.
Process Stock Images into Model Images Clicking the Process button will convert any stock-specific images into Model images, and add image-to-stock relationship links. NOTE: You should click this button only when moving from the old stock images functionality, to the current drag-and-drop functionality. Clicking this button multiple times may create duplicate product images.
Remove Image No Longer Assigned To Models Use this button to remove any extra images you have for your models. For example, you may now only have two images for a model, which will be named something like ModelID.jpg and ModelID-1.jpg. You may for some reason have ModelID-2.jpg, ModelID-3.jpg, and so on, in the file system. This button will clean off those old images off and will keep your file system usage to a minimum for your Model images. Only click this button if this is a particular problem. If in any doubts, please contact your IRP Account Manager.

Image 'Lazy Loading'

The IRP supports lazy loading of images. 'Lazy loading' means that images are not loaded at page-load time but instead they are loaded as they are needed, for example as they become visible to a customer as they scroll down a web page.

This should help to make your website faster and will also save data, processing time, battery power and other resources.

You enable and disable this feature using an Application Setting called Enable Lazy Image Loading ('General Site Settings' grouping). By default, this is enabled on all sites (desktop, mobile, trade and private sale).

Static content and image heavy home pages can also benefit from lazy loading. It requires some additional html updates.

To make this feature work please add the following to your static page images:

  • Change the image 'src' attribute to 'data-src'
  • Add a src attribute with the following: src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    • This is used to stop a broken link image appearing as users scroll down the page.
    • Use the same base64 encoded string above for all your images.
  • Add the class 'lazyload' to img tag.

For example:

img data-src="/Images/Location/Image.jpg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Alternative Image Description"

How To Guides (2)

Close
Close
How To Process Images

To process an image or multiple images, first go to Products > Image Processing in the IRP Admin left navigation menu, then follow the steps in each of the following sections.

NOTE: The environment is configured for eight simultaneous uploads, with a total size limit of approx, 40 MB. If you try to upload too much at any one time, the process will fail.

Upload Images Section

First you need to upload the images that you want to process. To do so, proceed as follows:

  1. Click the Browse button.
  2. Select the image or images that you want to process from your machine. Once uploaded, these images can be processed using the Image Processor. Brand images and Model images can be uploaded in bulk (instead of individually) using the individual edit pages. For images to be assigned to a particular element, they must follow the image naming convention of ID-INDEX.FORMAT. For example, for a Model with ID of 1, the images should be named as follows:
    1.jpg, 1-1.jpg, 1-2.jpg, 1-3.jpg … 1-x.jpg
    Note that Brands can have only one Logo Image uploaded against them; therefore indexing Brand Logo Images will not work.
  3. Click the button to upload the images to the New Images folder.

After you have uploaded your images you can process them using either the ‘Smart Image Resizer ’ feature or you can process them manually. These methods are described in the sections that follow.

Smart Image Resizer Section

The Smart Image Resizer section appears as follows:

Smart Image Resizer section
  1. Select the appropriate folder from the Select Folder to Process to drop-down list or select All, then click the Process Images button.
    The Smart Image Resizer then loops through images in the Images/Models/New/ folder, resizing them according to the following Application Setting values:
    • Model Images Width For Larger Image: This is the maximum Width (in pixels) of the Model image displayed on the Large Image popup or Image Zoom functionality. Images are automatically resized when you upload them in bulk or through the Model Edit page. Note that, the larger the image, the longer it will take to download when a customer visits the relevant page.
    • Model Images Width For Models Page Image: This is the maximum Width (in pixels) of the Model image displayed on the List View style used on the Models page. Images are automatically resized when you upload them in bulk or through the Model Edit page. Note that, the larger the image, the longer it will take to download when a customer visits the relevant page.
    • Model Images Width For Home Page Image: This is the maximum Width (in pixels) of the Model image displayed on your home page and, if used, Gallery View Product Listing style. Images are automatically resized when you upload them in bulk or through the Model Edit page. Note that, the larger the image, the longer it will take to download when a customer visits the relevant page.
    • Model Images Width For Listing Image: This is the maximum Width (in pixels) of the Model image displayed on the List View style used on Product Listing pages. Images are automatically resized when you upload them in bulk or through the Model Edit page. Note that, the larger the image, the longer it will take to download when a customer visits the relevant page.
    • Model Images Width For Thumbnail Image: This is the maximum Width (in pixels)of the Model image displayed on the carousel used on the Models page. Images are automatically resized when you upload them in bulk or through the Model Edit page. Note that, the larger the image, the longer it will take to download when a customer visits the relevant page.
    • Model Images Quality For Larger And Models Page Images: This is the Jpeg image Quality (%) of images used on the Models page and for the Zoom functionality. Note that, the higher the Quality, the larger the file size, although since these images are slightly smaller, you can use a higher quality than in the larger images.
    • Model Images Quality For Home Page And Listing Images: This is the Jpeg image Quality (%) of images used on the Homepage and Product Listing pages. Note that, the higher the Quality, the larger the file size, although since these images are slightly smaller, you can use a higher quality than in the larger images.
    • Model Images Quality For Thumbnail Images: This is the Jpeg image Quality (%) of images used on the Thumbnail Images (used in the Models page Image carousel). Note that, the higher the Quality, the larger the file size, although since these images are slightly smaller, you can use a higher quality than in the larger images.
    This action is performed asynchronously so as not to disrupt any other operations being performed via the IRP.

Process Images Manually Section

  1. Select the Target Folder from the drop-down list (All, Original, Full, 150). Selecting the Target Folder will also set the Process settings including the Target Directory for saving, Image Quality and Resize values, based on the associated Application Setting values.
  2. From this point you can enter or edit the following details:
  3. SettingDescription
    Files To Be Processed
    Target Directory If you plan to use a different folder for storing the images, you can change the Target Folder. The standard Target Folders will be selected by default and should be left as such, unless a change is required.
    Output Options
    Overwrite Existing Files If this option is enabled, any files containing the same filename will be overwritten.
    Output Format Sets the format of the output image:
    Jpeg Quality Sets the Image Quality as defined by the values stored in the following Application Settings:
    • Model Images Quality For Home Page And Listing Images: This is the Jpeg image Quality (%) of images used on the Homepage and Product Listing pages. Note that, the higher the Quality, the larger the file size, although since these images are slightly smaller, you can use a higher quality than in the larger images.
    • Model Images Quality For Larger And Models Page Images: This is the Jpeg image Quality (%) of images used on the Models page and for the Zoom functionality. Note that, the higher the Quality, the larger the file size, although since these images are slightly smaller, you can use a higher quality than in the larger images.
    • Model Images Quality For Thumbnail Images: This is the Jpeg image Quality (%) of images used on the Thumbnail Images (used in the Models page Image carousel). Note that, the higher the Quality, the larger the file size, although since these images are slightly smaller, you can use a higher quality than in the larger images.
    Use Place Identifier This displays the Place Identifier and Place Identifier Text details for use.
    Place Identifier Select whether to put the identifier at the beginning of the filename or at the end of the filename.
    Place Identifier Text Select whether you want to add Text or the current Date in the location specified in the Place Identifier setting.
    For example, if you have selected to place a Text identifier of ‘ModelImage’ before the filename, the resulting filename will be ‘ModelImageOriginalFilename.jpg’.
    If you have selected to place a Date identifier after the filename, the resulting filename will be ‘OriginalFilename17102013.jpg’.
    Processing Options
    Resize Option You can select one of the following Resize Options:
    • Smart Resize: Depending on the Target Folder selection choice, this sets the Image Size values as defined by the values stored in the following Application Settings:
      Application Setting
      Model Images Width For Larger Image: This is the maximum Width (in pixels) of the Model image displayed on the Large Image popup or Image Zoom functionality. Images are automatically resized when you upload them in bulk or through the Model Edit page. Note that, the larger the image, the longer it will take to download when a customer visits the relevant page.
      Model Images Width For Models Page Image: This is the maximum Width (in pixels) of the Model image displayed on the List View style used on the Models page. Images are automatically resized when you upload them in bulk or through the Model Edit page. Note that, the larger the image, the longer it will take to download when a customer visits the relevant page.
      Model Images Width For Home Page Image: This is the maximum Width (in pixels) of the Model image displayed on your home page and, if used, Gallery View Product Listing style. Images are automatically resized when you upload them in bulk or through the Model Edit page. Note that, the larger the image, the longer it will take to download when a customer visits the relevant page.
      Model Images Width For Listing Image: This is the maximum Width (in pixels) of the Model image displayed on the List View style used on Product Listing pages. Images are automatically resized when you upload them in bulk or through the Model Edit page. Note that, the larger the image, the longer it will take to download when a customer visits the relevant page.
      Model Images Width For Thumbnail Image: This is the maximum Width (in pixels)of the Model image displayed on the carousel used on the Models page. Images are automatically resized when you upload them in bulk or through the Model Edit page. Note that, the larger the image, the longer it will take to download when a customer visits the relevant page.
    • Force Resize: This forces the resized images’ Width and Height values to the set values.
    • Ratio Resize: This applies the resize based on a Scale Factor as follows:
      Scale Factor = Entered Width Value / Starting Image Width Value
      For example:
      • If the starting image has a width value of 800 and you enter a value of 1600, the resulting images will be twice the size of the originals:
        1600 / 800 = 2
      • If the starting image has a width value of 800 and you enter a value of 400, the resulting images will be half the size of the originals:
        400 / 800 = 0.5
    • Percentage Resize: This resizes the images based on the percentage value set.

  4. When you have entered or edited the details, you have two options:
    • Copy Images from New to Target This will copy the images that have been uploaded to the New Image folder to the Target Folder without applying the Output or Processing Options.
    • Create Images with Resizing This will create the images that have been uploaded to the New Image folder in the Target Folder, applying the set Output or Processing Options.

Bulk Image Operations Section

The final section includes several options for updating images in bulk:

  • Update Model Images Created Within The Last [X] Days: Clicking this button sets the appropriate count of images against a Model to ensure that no broken images appear on the front end of the website.
  • Update Original Images Created Within The Last [X] Days With Width (px) greater than [X] pixels or Height (px) greater than [X]: Clicking this button updates the original images uploaded against a Model.
  • Update Enhanced Images Created Within The Last [X] Days: Clicking this button causes the IRP to search for Enhanced Images uploaded for a Model. If an Enhanced Image is found, it sets the Enhanced Image property against the Model to true, ensuring that the image will appear.
  • Update Models With No Images: Clicking this button causes the IRP to search for Model images and if it does not find any for a given Model, it sets the Image field against the Model to false. This will ensure that a generic image will appear against the Model rather than a broken image.
  • Process Stock Images into Model Images: Clicking this button will convert any stock-specific images into Model images and add image-to-stock relationship links. Note: You should click this button only when moving from the old stock images functionality to the current drag-and-drop functionality. Clicking this button multiple times may create duplicate product images.
  • Remove Image No Longer Assigned To Models : Use this button to remove any extra images you have for your models. For example, you may now only have two images for a model, which will be named something like ModelID.jpg and ModelID-1.jpg. You may for some reason have ModelID-2.jpg, ModelID-3.jpg, and so on, in the file system. This button will clean off those old images off and will keep your file system usage to a minimum for your Model images. Only click this button if this is a particular problem. If in any doubts, please contact your IRP Account Manager.
Open
IRP Static File Caching

FAQs (1)

Close
When selecting brands, models and stock images, what is meant by the terms 'original', 'full' and '150'?
These are different images used across the site from the home page to the model page. The term 'original' will be the largest of the images.

Copyright © 2020 IRP Commerce. Use of this website constitutes acceptance of the IRP World Terms of Use, IRP Privacy Policy and IRP Cookie Policy

IRP Commerce Limited, Concourse 3, Catalyst, BT3 9DT, UK. Company Number: NI 041856. VAT Number: GB 888249658
A Deloitte Fast 50 Company seven times: 2010, 2011, 2012, 2013, 2014, 2018 & 2019