This article covers how Nosto populates product images in on-site recommendations and helps you how to change the image settings if these look unsharp or otherwise bad to you. On the contrary, if recommendation images load slowly the article covers also how to adjust settings to speed up image load times and other common errors with the images.
Introduction
The implementation of Nosto on a web-site maps out an original product image used on a product detail page (PDP) to Nosto automatically. In the background, an automated service fetches the default product image and creates eight different image versions out of the image, which are stored at Nosto and made available in our Content Delivery Network (CDN).
Some image versions are processed slightly by resizing, cropping and zooming the image a bit. Applicable image versions in Nosto’s CDN are:
1 – 170 x 170 pixels
2 – 100 x 100 pixels
3 – 90 x 70 pixels
4 – 50 x 50 pixels
5 – 30 x 30 pixels
6 – 100 x 140 pixels
7 – Original aspect ratio with horizontal images having a width of 200 pixels and vertical images having a height of 200 pixels.
8 – Original aspect ratio with horizontal images having a width of 400 pixels and vertical images having a height of 400 pixels.
These are the only available image sizes. Alternatively you can use original image version by calling an image url, but in this case an image is loaded from your servers possibly affecting site load times, entirely depending on how images are hosted on your servers. Use following variable to call original image version.
$!product.imageUrl
Using Editor Tools
Changing the used image version to review if this helps with the issue of unsharp or cropped images is simple and quick procedure.
Editor Tools On The Nosto Admin
Similar settings on the Nosto admin are under menu On-Site > Recommendations > Templates [tab] > [choose template, typically ends -default] > Properties.
Under the menu, look for dropdown menu imageFormat. Selection works similarly to editor tools in an extension admin and changes the applied image version. After saving, reload a page where Nosto recommendation is applied and review the changes.
Editing and Creating Own Recommendation Templates
Changing the settings using editor tools only adjust the applied image version, hence if the recommendation element still doesn’t suit your site’s look and feel, you might need to edit the code manually and customise the design.
In case you need to create custom design for your site by changing the design how images are shown, a full introduction to templates is available here while this article covers only how to amend the template code manually. It also helps to understand how to adjust the template code if the default templates don’t render accordingly on your site. Please note that if the template code is edited, the editor tools are not available anymore. Proceed if you know how to edit and create your own Html and .css code. Unfortunately Nosto’s support can’t provide custom design as a service.
If a default image-version in the template is not suitable, an option is to use the original aspect ratio of an image as referred previously. Available image sizes are listed as variables under Recommendation Template tool using variable:
$!product.thumb(size)
which will output the selected image size version. Additionally, Nosto covers a possibility to use an original, unedited version of a product image by using image’s original url, by using a variable
$!product.imageUrl
In this case, however, the applied image is loaded from site’s servers or CDN and not from Nosto, possibly increasing recommendation load time using your server resources, hence we always encourage to use version from Nosto’s CDN, if possible.
Troubleshooting Common Issues
Product Images Don’t Appear
If a product image doesn’t appear or if the image link is broken this usually due to error in image url tagging, erroneous url mapping or a temporarily error while fetching the images from your site to Nosto’s CDN. If you very recently implemented Nosto occasionally errors might occur and re-indexation of images is needed.
In any case, please review markup-example in tagging guide and then use the Nosto debug-toolbar and check that the image url mapped to Nosto is correct.
If image tagging is correct, there might have been an unusual error with Nosto’s image processing. In this case a manual reindex of product details is required which is launched from the Nosto admin.
In case Nosto is implemented on a site unaccessible from the Internet, this is expected behaviour. Read about implementing Nosto on test environments.
New Product Image Doesn’t Update
If you update a new image version for an old product, preferably save the image with a new file name, which typically generates a new image url for the product image as well.
Nosto doesn’t recognize images by file size or image content but by URL, hence if a url for an image is unaltered, Nosto doesn’t update image version in it’s index and uses older version of the product image in recommendations. On the contrary, new products and product images are automatically fetched and processed and no manual input is needed.
Manual re-index for an image version can be launched by enabling debug-mode and clicking Send Product Update Request-button on a product page.
For a full re-index, log in to Nosto’s admin and navigate to Tools > Products > Update products.
Unsharp Images
Typically when an image in a recommendation looks unsharp it’s simply because a small image version is upscaled to a bigger physical area in the template. Applying a bigger image version in a recommendation template will fix the issue, so essentially you simply need to adjust the styling slightly and use a bigger image version stored in Nosto’s CDN
When creating a recommendation template on Nosto Admin Panel, you can choose which image size you would like to use. Nosto doesn’t improve or manipulate pictures, however image versions 1-6 are cropped into squares, sharpened a bit, and zoomed slightly closer to details. Two versions, seven and eight, are original versions, but with aspect limitations of 200px (7) and 400px (8) respectively.
Increased Load Time or Page Size
In the event of slow recommendation load time or increased page size, most likely a Nosto recommendation either uses an original product image or too big image version, which are downscaled to fit a smaller physical area in a browser, making it an opposite scenario to the unsharp images, with different consequences.
Debug by reviewing that the template uses a suitable image version and not an original product image as high-resolution image versions can often exceed size of 1M, consequently slowing down the recommendation load time if multiple products are displayed in a recommendation.
Vertical and Horizontal Product Images
Nosto doesn’t recognize details or tell the difference between horizontal and vertical images, so be sure that most of the details of a product are in the center of the picture. Alternatively you might need to adjust the implementation slightly so that you would consistently map either horizontal or vertical version.