Last Updated on May 29, 2019 by Numinix Developer
The sum of the size of each object equates to the total size of a webpage. If each of those objects is very large, the length of time to download the object will be greater. Although the website may not be large in comparison to the bandwidth of the client and server, as more clients simultaneously browse the website, the bandwidth can quickly be consumed.
Image Optimization
By compressing your images, you can greatly decrease their size with marginal losses in quality. Most common image editors support image compression. When you save an image in PhotoShop, it will give you the option to set the level of quality which will increase or decrease the level of compression. If you do not have PhotoShop and are running MS Office, you can use the MS Office Picture Manager to easily compress images for various formats (email, web, etc.).
For Zen Cart, this can all be handled automatically using a free module called Image Handler 2. The module works by creating a cache of optimized images in the Zen Cart cache folder and then using these images instead of the larger originals. The images are made significantly smaller in file size without any noticeable reductions in image quality.
Image Format
Each image formats employs a different compression method and thus a different image size for the level of quality.
JPEG images are great for high quality images without a lot of sharp color variation. Unfortunately, JPEG images cannot be transparent and must use a colored background which further increases the image size.
PNG images are very efficient and can have high levels of quality at high levels of compression. PNG images will be smaller and have higher quality than JPEG images when there is a lot of sharp color contrast in the image. They are also able to use transparent backgrounds. However, older browsers may not be able to handle transparent backgrounds in PNG images and require a PNG hack to be employed. As this adds additional size to the page and also increases the number of HTTP requests, if not using Minify, another option is recommended.
GIF images are often considered as obsolete because their method of compression is inferior to PNG images. However, as stated above, PNG images require a PNG hack for transparent backgrounds on older browsers… GIF images do not.
For a more detailed comparison of these three image types, please visit When and how to use internet image formats.
CSS Sprites
CSS Sprites are discussed under the topic “Techniques for Decreasing HTTP Requests.”