While you may want to make sure you use the best quality images on your website, images are the most resource-demanding type of content you can publish online. Unoptimized images are the top cause of slow loading websites. So, if you want your website visitors to have a nice experience, while also remaining engaged when interacting with your website, you need to have a good balance between image quality and website speed. DecoNetwork offers a number of tools that allow you to optimize images to strike the right balance between load times and image appearance.
Image Optimization Tools in DecoNetwork
In the DecoNetwork Website Editor, there are a number of image optimization settings that you can use to control the quality and loading efficiency of images on your website:
- Image Quality: this is a global level setting that allows you to choose an image quality level relative to the compression applied to the file size.
- Original Image Size: this widget level setting allows you to set the default resolution of images in terms of pixel dimensions. This setting is available for the Image Widget and for all widget background images.
- Use Higher Resolution on Retina Displays: this widget level setting, when enabled, will double the pixel dimensions of images to increase the clarity for retina displays.
Retina displays have 4 times more pixels than standard screens. So, if you have a 600 x 600 pixel image, you would need a 1200 x 1200 pixel image to render smoothly on a high-density retina display. This setting will do this for you.
This setting is available for the following widgets:
Lazy Loading
In addition to these image optimization settings, DecoNetwork has implemented an automatic optimization technique for certain images called lazy loading (also called on-demand loading). The store logo will be lazy-loaded, meaning that a low-resolution image will load initially, then a higher resolution logo image will be loaded if the Resize the image to fit option is enabled. All listing images will be lazy-loaded, meaning they will not be loaded until you scroll to that part of the page. This gives all pages with product and image listings an extra boost in load times.
Understanding Image Quality
In order to understand how to use the image optimization settings, you first need to understand a number of key technical terms that are often misunderstood when it comes to image quality: image resolution, image size, and file size.
Image Resolution
There is a lot of confusion when it comes to the concept of image resolution. This is because image resolution is often used to refer to both the pixel density of an image and also the pixel dimensions of an image.
Pixel Density
Pixel density is a measure of the number of pixels per inch of an image, expressed in pixels per inch (PPI). A pixel can be defined as a square of color in an image. A pixel has no set size. So, in essence, the resolution is referring to the size of a pixel. The smaller the pixel, the higher the resolution.
The more pixels contained in a square inch of an image, the higher level of detail, and therefore the better the image quality.
The resolution of the original image you upload will affect the final quality of the image displayed on your website after any image size and quality settings are applied. High-resolution images, when scaled from its original size still appear sharp and detailed. Whereas lower resolution images, when scaled up, may become blurry, pixelated, and do not retain sharpness in detail.
Pixel Dimensions (Image Size)
Pixel dimensions refer to the physical size of an image on the screen in terms of pixels. It is a measure of the total number of pixels along an image’s width and height (pixel count). For example, an image that is 2048 pixels in width and 1356 pixels in height contains 2,795,520 (2048 x 1356) pixels. You can call it a 2048 x 1356 or 2.8-megapixel image.
Pixel dimensions primarily affect how the image is seen on-screen. Images are resized to fit the screen size of the device that your website is being displayed on. The pixel dimensions of your images can be altered by this, but they are never larger than the screen’s pixel dimensions. Images with smaller pixel dimensions may appear blurry or pixelated on your display when they are stretched to fill the allocated area on your website.
File Size
File size refers to how much data a digital file contains. It is a measure of how much storage space the image will take up on your computer. File size can be reduced using image compression. Image compression is the process of removing data that encodes the original image to reduce its file size, whilst maintaining the quality of an image at an acceptable level. The reduction of file size allows the image to be loaded more efficiently on websites.
To configure the image quality of your website images:
- Log into your DecoNetwork Website.
- Browse to Admin > Websites.
- Select Manage for the website you want to configure.
- Select Edit Website, then Website Pages.
The Website Editor will load in the Admin area.
- Click on the DESIGN button in the Website Editor Toolbar.
- Click on the PAGE OPTIONS menu item.
- Locate the Image Quality setting under the Page section.
This setting lets you set the image quality of all images used on your website. This setting allows you to optimize your website performance. Depending on the setting, images will be compressed to output an image quality relative to speed performance. Image compression is when information in an image file is removed to reduce its file size so that it can load faster. The higher the speed performance setting, the lower the image quality. The higher the image quality setting, the slower the performance.
- Choose a setting from the dropdown list.
- Default
- Highest Speed
- Higher Speed
- Balanced Speed/Quality
- Higher Quality
- Highest Quality
- Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.
Comments
0 comments
Please sign in to leave a comment.