Manage and Maintain Images
The images on a web page impact page performance and load times. Read the following sections to learn how to optimize your images and increase your website’s performance:
Use Fewer Images
You have complete control over the images on static pages, like the home page or other landing pages, and reducing the number of images is one of the easiest ways to decrease page load time. Restrict images to only those that you think are necessary or improve the user experience. For example, banner sliders can cause a problem when they have more than a few images, so limit them to three or four images.
Use the Right Size Images
Make sure an image doesn’t exceed the maximum dimensions at which it will be displayed. Oversized images still get downloaded in their entirety by the browser and can slow down your web page.
You can check if your images are too large in a browser. Right click on an image from your website to inspect it and then hover over the element in the Elements tab. You can see if the original image is larger than the image that is shown.
Avoid about using images that are too small, however, because undersized images may be scaled up and look blurry. Keep in mind that your site is responsive, so sometimes images will show up larger in certain contexts. Try to ensure images are only as large as the largest size at which they’ll be shown.
NetSuite has a built-in image resizing tool that can eliminate this problem for you. The resizing tool will resize images that get displayed on your website according to your specifications without requiring you to modify the original image. See Image Resizing and Compression for more information.
Use Appropriate File Types
It is important to use the right file type for an image based on its content and context.
Raster Images
For photographs, product images, banners, and other images that require significant detail, use raster image files.
Raster images are files that save a grid of pixels, called a bitmap, that contains the color information for the image. These files tend to be relatively large in size, although some formats yield smaller files than others. Raster images have a maximum dimension because raster images will look blurry if oversized.
Use JPG and PNG files for most images on your website. JPGs offer smaller file sizes and are suitable for photographs or other images that have significant variation in color, tone, and light. PNGs tend to be larger but maintain higher fidelity and are better for diagrams or other images with blocks of color or solid lines. PNGs also allow for transparency.
GIFs can also be used, but they have limited color capability and are generally not the best option. The benefit of GIFs is that they can be animated.
Non-Raster Images
Non-raster images store the image as code with your website, so they are usually much smaller files than raster images and can be scaled up or down without losing quality. Non-raster images are best suited to showing icons, backgrounds, and logos or other images that are made up of lines and colors. Use non-raster images where possible to optimize your website.
Scalable Vector Graphics for Logos
The functional opposite of raster images are vector graphics. Rather than storing a bitmap, vector graphics contain a description on how to draw the image that is stored as code and is often a much smaller file than a raster image. The most popular format for these is the scalable vector graphic (SVG).
SVGs are best used for images that are made up of simple lines or text, like a logo. They allow for colors and benefit from being infinitely scalable, so you can increase the dimensions without a loss in quality.
Font Fields for Icons
Included in SuiteCommerce is Font Awesome, which is a font file that replaces all of the normal font characters with icon alternatives. This is a good way to insert icons into text with all the benefits of using a font, including the ability to scale and change color.
CSS Styling for Backgrounds
Using images as backgrounds on part of a page can add unnecessary weight to a web page. Instead, you can use CSS to create background designs, such as gradients, shadowing, transitions, and animations, which load more quickly than images.
Compress Your Images
You can also reduce file size by compressing your images. Reducing the file size of images goes a long way to improving the performance of web pages, and most of the time, there’s no discernible loss in quality.
NetSuite has a built-in compression tool which you can learn about more at Image Resizing and Compression. You can apply specific compression settings to a File Cabinet folder or to all images on your website without altering the original images. The compression tool allows you to set the level of compression, as well as several other settings to help reduce file size.
-
Strip Metadata: Most images include metadata, such as date and time information, camera settings, or copyright information, which is rarely necessary to include when showing an image on your web store. Check this box to remove metadata from the uploaded image.
-
Chroma Subsampling: This technique reduces file size by reducing color data in favor luminance data. Because people are more sensitive to changes in brightness than color, this technique results in a large decrease in file size with little or no noticeable reduction in image quality.
NetSuite’s compression tool does not alter the original image. After it’s set up, it works automatically to compress images that get displayed on your website. Alternatively, you can use a third-party compression software and then upload the compressed images.
Note that if you use NetSuite’s image resizing tool, it will automatically compress your images without any additional setup required.
See Image Resizing and Compression for more information about using the compression tool.
Use Caching
Image caching is when an already requested image is stored in a location other than its original location so it can be served more quickly in the future. Caching locations might be on NetSuite servers, on content delivery network (CDN) servers, or on a user’s device. See Caching for more information about setting up caching on your website.
Content Delivery Networks
CDNs are optimized servers that store static content, such as images, to better serve them to users. Using a CDN can speed up page load times by storing images and other data on third-party servers after they are first requested so they can be delivered to subsequent users more quickly. See CDN Caching for more information about setting up CDN caching.
Reuse Images
Another way to reduce the number of image requests is to increase the number of cached images. Browsers store previously requested images so that later requests for that image can call up the cached copy. Consider reusing the same image where possible to increase the portion of images that are cached to increase page load times.
Another aspect of this is to avoid using text within images. It is better to lay text over an image on your website rather than to include it as part of the image itself. This makes translation easier because you only need to translate the text laid over the image, not update the entire image.