Manage and Maintain Images
Images on a web page affect how fast it loads and how well it performs. Read the following sections to learn how you can optimize your images and boost your site’s performance:
Use Fewer Images
You have full 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 speed up page load times. Only use images that are necessary and improve the user experience. For example, banner sliders can slow things down when they have too many images, so try to keep them to three or four.
Use the Right Size Images
Make sure an image isn't bigger than the size at which it will be displayed. Oversized images get downloaded in their entirety and can slow down your web page.
You can check if your images are too big in your browser. Right-click an image on your website, inspect it, and hover over the element in the Elements tab to see if the original image is bigger than what's displayed.
Avoid using images that are too small, since they might get scaled up and look blurry. Your site is responsive, so images might appear bigger in some cases. Ensure that your images are at least as big as the largest size at which they’ll be shown.
NetSuite has a built-in image resizing tool that can handle this for you. It resizes images on your site based on your settings, so you don't have to change the original image. See Image Resizing and Compression for more information.
Use Appropriate File Types
It's important to use the right file type for an image based on its content and context.
Raster Images
For photos, product images, banners, and other detailed images, use raster image files.
Raster images save a grid of pixels, called a bitmap, with all the color information for the image. These files are usually pretty large, though some formats are smaller than others. Raster images have a maximum size; if you make them too big, they can look blurry.
Use JPG and PNG files for most images on your site. JPGs offer smaller file sizes and are suitable for photographs or images that vary in color, tone, and light. PNGs are larger but maintain higher fidelity, so are better for diagrams with blocks of color or solid lines. PNGs also support transparency.
You can use GIFs too, but they have limited colors and usually aren't the best choice. The main benefit of GIFs is that they can be animated.
Non-Raster Images
Non-raster images are stored as code with your site, so they're usually much smaller than raster images and can be scaled up or down without losing quality. They're best for icons, backgrounds, logos and images made of lines and colors. Use non-raster images when you can to optimize your website.
Scalable Vector Graphics for Logos
Vector graphics are the opposite of raster images. Instead of storing a bitmap, they store instructions for drawing the image as code, which usually makes the file much smaller. The most popular format is SVG (scalable vector graphic).
SVGs are great for images made of simple lines or text, like a logo. They support colors and can be scaled to any size without losing quality.
Font Fields for Icons
SuiteCommerce includes Font Awesome, a font that swaps regular characters for icons. It's a handy way to add icons to text, since you can scale and change their color like any font.
CSS Styling for Backgrounds
Using images as backgrounds can slow down your web page. Instead, use CSS for background designs, such as gradients, shadows, transitions, and animations; they load much faster than images.
Compress Your Images
You can also shrink file size by compressing your images. Smaller images make your web pages load faster, and most of the time, you won't notice any drop in quality.
NetSuite has a built-in compression tool you can learn more about at Image Resizing and Compression. You can set compression options for a File Cabinet folder or for all images on your site, and it won't change the original images. The tool lets you pick the compression level and other settings to help reduce file size.
-
Strip Metadata: Most images have metadata, such as date, time, camera settings, and copyright information, which you usually don't need on your website. Select this box to remove metadata from uploaded images.
-
Chroma Subsampling: This method shrinks file size by reducing color data in favor of luminance data. Since people notice brightness more than color, you get much smaller files with little or no loss in image quality.
NetSuite’s compression tool doesn't change the original image. After it’s set up, it automatically compresses images shown on your site. Or, you can use third-party compression software and upload those images instead.
If you use NetSuite’s image resizing tool, it'll automatically compress your images without any additional setup.
See Image Resizing and Compression for more information about using the compression tool.
Use Caching
Image caching means storing an image somewhere other than its original location so it can load faster next time. Cached images might be stored on NetSuite servers, CDN servers, or a user’s device. See Caching for more information about setting up caching on your website.
Content Delivery Networks
CDNs are special servers that store static content like images to deliver them faster to users. Using a CDN can make your pages load faster by storing images and other data on third-party servers, so they're delivered more quickly to users after the first request. See CDN Caching for more information about setting up CDN caching.
Reuse Images
Another way to cut down on 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.
Also, avoid putting text within images. It's better to add text over an image on your site, since that makes translation easier. You only need to translate the text, not update the whole image.