The size and quantity of images on a web page can be a large contributing factor to page slowness. To improve the performance of these pages, you can make a number of optimizations to your images.
There are a number of common performance problems that can arise from poorly optimized images, that we will address in this article. To summarize, they are:
- Too many images on a page, slowing down the page as each one requires an HTTP request
- The images are dimensionally larger than they need to be, which means a larger image is requested than required
- The images use file formats which are not optimized for what they will be used for
- The images are not optimized or compressed, so a higher quality image is request than is required
- The images are being used for icons, backgrounds and logos, which are less performant than code alternatives (eg HTML, CSS, and SVG)
- A lack of caching in the browser, application or CDN, which means that a fresh image must be served to the user
- Images are not being re-used in situations when they could, so additional images are being requested
In web development, this is a hot topic and there are plenty of resources available online to help you — in the form of both advice and tools. Accordingly, this won’t go into a lot of detail but it will point out parts of the NetSuite platform that can help, as well as point you in the right direction to find out more information elsewhere.
Use Fewer Images
This one may be a little hard to martial on a standard page like a product list or product detail page, but when it comes to your static pages (eg landing pages or the homepage) then you are in complete control. Things like banner sliders can be a big problem, particularly if you go beyond having three or four images. Some people like to overload banner sliders with 7, 8 or more — I would question whether this provides a good user experience, and whether the performance cost is worth it!
Use Smaller Images
Or, otherwise known as “don’t let the browser size the image for you”.
In a lot of cases, the required size of an image is known before you load the image, for example, banners have a maximum width, as do logos, product images, carousel images, etc. You waste bandwidth when you and increase loading times when you force a user to download an image that is bigger than they need.
Let’s say that an image is being displayed at 120 x 120 pixels — well, then, use an image that is 120 x 120! Make sure you’re not using an image larger than that and scaling it down.
You may not know that you can check whether this is happening, by using the browser’s dev tools. Inspect an image and then hover over the element in the Elements tab.
Here you can see that I’m using an image that is 600 x 393 pixels, and it is being resized to 293 x 192 pixels. Perhaps I should use a smaller image?
Well, yes and no. Keep in mind that your site is responsive, so using a smaller image may result in it being inappropriate in larger resolutions. If you use an image that is too small then it may end up being upscaled, which will result in the image losing detail and looking blurry. Do some work and figure out what the largest instance an image will be used in, and aim for that.
NetSuite also has a dynamic image resizing service that can resize images to pre-defined dimensions. After setting it up, you can use the API to to request specific image sizes via URL parameters.
Use Appropriate File Types
If you are going to use images, it is important to understand what raster images are, and which types of raster images are suitable in which scenarios.
Raster images are files where a map of bits (a bitmap!) of the colors are saved in a grid of pixels. In older formats, these are saved individually (which can result in very large files) but newer formats use algorithms and color palettes to generate the values of the pixels.
NetSuite recommends two kinds of raster images: JPG/JPEG and PNG. You may also use GIFs, but their uses are limited to backwards-compatible animations.
You must be careful about using JPGs and PNGs as they have different properties, and can, therefore, affect performance when used inappropriately. Generally speaking, you want to use JPGs when you want to show photographs, or other images which have a large variation in color, tone, and light. PNGs are best suited for things which have only a few colors, and solid blocks of colors (eg lines and shapes), or when high-fidelity is required (such as diagrams).
Optimize and Compress Your Images
In conjunction with reducing the dimensions of your images and using appropriate file types, you can also reduce their file size by using compression algorithms.
When you first take product photographs, or export them from an image manipulation application, they can often be quite large in file size because the camera or program may be selecting for high quality imagery, rather than file size. You could look at the settings of your cameras or applications and see if you can adjust them to produce lower quality images.
Alternatively, you can do post-processing, which means that you run a compression algorithm at some point after the image has been created. There are two points that you can do this:
- Use the NetSuite image optimization service
- Use a third-party tool or service
NetSuite does not recommend any particular third-party tool or service, and they aren’t discussed here.
Image Compression Techniques
Before beginning, however, it’s worth knowing how image compression works.
Lossy vs Lossless Compression
What these two options refer to is the whether you’re happy with the compression algorithm taking a ‘destructive’ approach to compression. Lossy algorithms can be a lot faster and produce much smaller files, but they also make a copy of the image that means that their original quality cannot be retrieved from the copy.
Lossy compression can create ‘artifacts’ in an image, which are where the colors don’t look right, or some sharpness/smoothness is lost. Lossless compression doesn’t suffer from this, but their file sizes tend to be bigger as more detail needs to be retained.
There is not one choice here: you can choose to use lossless in some cases or lossy in others. For example, if you’re optimizing your site’s logo, then you will want to keep that sharp and high-fidelity; photographs of your products can be subjected to lossless compression because it doesn’t matter too much and won’t be as noticeable.
This is a no-brainer. When a photograph is taken, the camera will add properties to the image that describe how the photograph was taken (such as the aperture, exposure settings, camera model, etc). In almost all circumstances, these will not be required on a web store and, in some cases, they can add significant size to the file.
Color Palette Reduction
A more advanced method of compression is to reduce the number of colors used in an image. When an image is stored, an index of every color is included and bits that are different colors will take up more space in some image types. By reducing the number of colors in your image, the index is smaller and so the number of different colors used in the image is smaller.
Note that this applies most to images that have a lot of colors, such as photographs of products, and even a modest reductions in colors can give significant gains (without sacrificing too much quality).
Similar to color palette reduction, this makes adjustments to colors that are usually undetectable to the human eye. In technical terms, luminosity is preferred over color information. What this means is that the human eye is more inclined to noticing subtle changes in brightness than changes in color, which means you can make digital images look identical to humans by reducing the numbers of colors used and then by adjusting the brightness.
NetSuite Image Optimization Service
We recommend you always use our service, but you may also choose to do your own image compression before uploading them to the NetSuite file cabinet.
Our documentation goes into detail about this service works, and how to set it up, so I would discuss it much here. There are a few things I want to bring your attention to, however.
An important thing to keep in mind is that it runs in the background after you first set it up, so it can give you peace of mind.
Another thing to keep in mind is that it won’t modify your original images. When an image is first requested, the process runs and creates a copy, which is then cached when it is requested by other users. This means you don’t have to worry about losing the originals.
Finally, know that the image resizing service will automatically trigger the NetSuite image optimization service using our pre-defined ‘optimum’ compression level.
Use Non-Raster Alternatives for Icons, Backgrounds, and Logos
We talked about raster images above, but one of the easiest way to cut down both page weight and the number of HTTP calls, is to find alternatives for the images you are using. There will certainly be a number of images on your site that you consider high priority — and that you can’t dispense with — but things like icons, backgrounds, and logos, can usually be replaced with non-raster image alternatives.
Font Files Instead of Icons
A simple example that is baked into your NetSuite Commerce source code is Font Awesome. This is a font file that replaces all of the normal characters of a font with icon alternatives. Then, whenever an icon is required, we simply put the character reference for the icon we want in the code, and an image is shown instead. But this isn’t a raster image (like a JPG or PNG), this is just another character in a font, and so it has all the benefits of using a font (eg easy to scale, easy to change color, one font file required for all icons).
CSS Styling Instead of Backgrounds
It is not uncommon for images to be used as backgrounds for parts of a page — perhaps an entire section or the even the entire body — but these can add up. If you have a particularly high resolution image, that is also large, this can add significant wait to the page size. Sometimes, background images are even used to display simple gradients rather than photographs.
In these cases, you should consider whether it might best to delegate that part of your design to CSS instead. CSS3 allows for a number of attractive styling options, such as gradients, shadowing, transitions, animations, etc, and you may find a direct replacement with one of these technologies.
Scalable Vector Graphics (SVGs) Instead of Logos
The functional ‘opposite’ of raster images are known as line or vector graphics. Rather than storing a bitmap of pixels, a description on how to draw the image, as it were, is stored instead. In terms of the web technologies, the most popular format is SVG.
SVGs are images represented by a special kind of XML. They are best used for images that are made up simple lines or text, such as logos. They allow for colors, albeit to a limited amount, and benefit from (as the name suggests) being infinitely scalable, which means that they can automatically adjust to their required dimensions without a loss in quality.
From a performance perspective, they can eliminate an HTTP call, as they are stored as code among your site’s source, and often are much smaller in file size than a raster equivalent (but this depends on how complicated your SVG is). You can also encode an SVG in Base64 to reduce the size of the XML.
In the context of images, caching is where an already requested (and served) image is stored in a location other than its original place (ie closer to the requester or new requesters) so that it can be served more quickly from its new location. Some caching locations include:
- On NetSuite servers
- On content delivery network (CDN) servers
- On a user’s device
We still see a lot of sites that are not using the content delivery network to serve content. As a reminder, CDNs are optimized servers that serve static content (such as images) in a manner that exceeds the performance of the NetSuite application to generate and serve images. In other words, by using a CDN, all of your images will be stored on these third-party servers after they are first requested, and then can be served super quickly to the people who use them next.
CDNs serve things other than images too, so they’re well worth investing the time into.
We’ve discussed cutting down on the number of requests for images, but another component of that is increasing the number of requests for cached images. In other words, if an image will always be required, consider making changes to your site so that that image will be used instead of others.
This advice applies to all levels of caching, as it would cut down on the amount of new images that the NetSuite application has to generate. Furthermore, most web browsers will store previously requested images on the user’s device so that future requests for them are short-circuited so that the existing local copy is served instead. This cuts out HTTP requests.
Another aspect of this is the use of text within images. Some designers like to ‘bake’ text into their banners, for example, and while this is generally fine, it can be problematic for multi-language sites. If your site uses multiple languages, you may want to consider using one image as a background and then layering translatable text over the top in your HTML.
Finally, there are some things experienced developers can experiment with to try and find gains. They are contentious in that they may lead to unexpected consequences (such as backfiring and actually degrading performance), poor user experience, etc, so use with caution if you are so inclined.
Product Detail Image Re-Use
If your PDPs have multiple images for different matrix options (such as colors) then, by default, your PDPs may load three different image sizes for each variation:
- A standard image (eg 225x225) for the product
- A thumbnail image (eg 100x100) for the mini-slider gallery images
- An extra-large image (eg 1200x1200) for the image zoom
This isn’t necessarily the most performant way of doing this. As each option requests three images, this adds up. From a theoretical point of view, you could simply request only the largest image and then dynamically scale it for its other uses.
Lazy loading is when content is not loaded immediately, instead deferring requests until some event happens (usually scrolling into view of the content). This can have massive performance gains because it means content is only requested when it is needed, and a lot of images on a page will never be looked at.
It’s really only appropriate for cases the images start off-screen, for example ‘below the fold’ on product list pages, or the alternative images on a PDP. If you consider the above PDP example, we might tell the browser to only load the extra-large when the user requests to zoom in on product image.
However, this may be a historic footnote soon as native support for lazy loading is slowly being introduced to popular browsers. While this won’t benefit users on older browsers, it can be seen as a graceful enhancement for those keeping up with the times.
To take advantage of it, you can simply mark up your image tags with
loading="lazy", like this:
<img src="/path/to/your/img" loading="lazy">
It is important to note that this should be used judiciously, using the criteria I mentioned above: it really only suits images that are not required immediately.
Images not marked up with this parameter will continue to be loaded normally, as this is the default way of handling images. However, as this feature becomes widespread, browsers may change their default behavior. Accordingly, you may wish to mark up very important images with
loading="eager" to explicitly specify images that should be requested immediately.