How To Optimize All Images On Your Website With Super Speed
The photo optimization feature in the Super Speed module empowers users to enhance website performance by reducing image file sizes without compromising quality. Below are the steps to effectively utilize this feature:
- Step 1: From the module configuration page, navigate to “Image optimization > Optimize images”
- Step 2: Select the types of images you want to optimize (product images, category images, supplier images, manufacturer images, logos, banners, home sliders, etc.)
- Step 3: Select one of the four available image optimization methods: Google WebP, TinyPNG, reSmush, or PHP script.
- Step 4: Set up the image quality you want to optimize. The higher the image quality, the longer the page loading time, 50% is the recommended value.
- Step 5: Click on the “Optimize existing images” button to start.
Note: If an image cannot be further optimized without compromising quality, its file size remains unchanged. This ensures that images are only optimized to the maximum extent possible while preserving their visual integrity.
Image optimization methods
You can choose from four image optimization methods: Google WebP, TinyPNG, reSmush, and PHP script. Each method offers different compression algorithms and settings to suit your preferences and requirements.
For optimal results, it's recommended to utilize a paid compressor service like TinyPNG (https://tinypng.com/) for image optimization. Paid services often provide higher compression rates and better quality retention compared to free alternatives.
Types of images to optimize
The photo optimization feature supports the optimization of various types of images, including product images, category images, logos, banners, slider images, and more. Both existing images on the website and images uploaded in the future can be optimized.
“Super Speed” module can optimize images for the following modules: PrestaShop's default home-slider module, PrestaShop's default banner module, and the most trusted blog module for PrestaShop - BLOG
Optimizing Images on CMS Pages and Other Modules
If you want to optimize images on CMS pages or any images from any other modules/ folders on your website, you can browse and select the folder containing the images and then optimize them. This ensures that all images within the selected folder are optimized for improved performance.
- From the module configuration page, navigate to “Image optimization > Browse images”
- Select the image optimization method you prefer.
- Browse and select the images you want to optimize.
- Our module will optimize your selected images.
- You can download the optimized images to your computer or restore them to their original quality.
Optimizing user-uploaded images
Users can optimize photos that they upload themselves or browse photos for optimization directly on the server. This ensures that all images added to the website are optimized for improved performance.
- From the module configuration page, navigate to “Image optimization > Upload to optimize”
- Select the image optimization method you prefer.
- Upload the images you want to optimize.
- Our module will optimize your selected images.
- You can download the optimized images to your computer and upload them wherever needed. After downloading, we recommend deleting them from the server to save hosting storage
Tracking Image Optimization Progress
On the Dashboard, you can view a chart that shows the number of images you've optimized compared to the total number of images uploaded. This information helps you understand how many more images need to be optimized. By keeping track of this data, you can plan effectively to optimize all your images, which is crucial for improving the speed at which your website loads images.
Image cleaner
Clear unused images from your server to free up valuable hosting space and maintain a clutter-free environment. Before proceeding with image cleanup, it's recommended to create a backup of the "/img" folder for added safety.
- From the module configuration page, navigate to “Image optimization > Image cleaner”
- Click on the “Clear all unused images” button.
Lazyload
Lazy load works by initially loading only the images that appear in the visible area of your browser when you first visit a page. As you scroll down, the images further down the page start to load just before you reach them. This method of loading images on demand rather than all at once significantly speeds up the initial loading time of the website, making it faster and more efficient.
- From the module configuration page, navigate to “Image optimization > Lazy Load”
- Turn on the “Enable Lazy Load” switch.
- Select a preloading image and types of images to apply Lazy Load.
- Save your changes.
With these simple steps and features, you can optimize your website's images efficiently and effectively, enhancing loading times and overall performance.
If you have any questions or need assistance, our support team is here to help. Feel free to reach out for personalized guidance on image optimization and other “Super Speed” features.