Guide for LitePix Bulk Image Optimizer

July 29, 2024 62 view(s)
Guide for LitePix Bulk Image Optimizer


LitePix: Bulk Image Optimizer is a Shopify app that compresses images, reducing their weight and speeding up page loading.

After installing LitePix, you'll arrive at the Home page. Here, you can find brief Instructions on how to compress images, view the Changelog, and discover other apps developed by Amasty.

Image Optimizer Home page

 

To start compressing your images, first you’ll need to Sync your images on the Dashboard page. 


Then, we recommend you go to Settings to set your desired parameters. If you prefer to use Shopify's recommended default settings, you can go directly to the Dashboard, where you can start optimizing images.

 

Sync your images

To allow the app optimizing images, start by syncing your images. Open the Dashboard and click the Sync button. Please wait until the sync process is complete. Once synced, your images will appear in the grid. 

 

Note

After the first sync, product and collection images will automatically update in the grid whenever new ones are added to your store — no need to sync them again. However, new blog images won’t sync automatically, so you’ll need to click Sync blog post images button each time before optimization.

 

Then, go to the Settings configuration.

 

Settings

On the Settings page, you can specify your parameters for image optimization.


Note

The app optimizes images that meet the criteria specified here. 

 

Image optimization settings

 

Image file format - choose the file formats you want to optimize.

Image types - select the types of images the app will optimize.

Visible product images - check this option to optimize images for published products only.

Optimization Settings for images

 

Optimization size control - if enabled, images will only be optimized if the file size gets smaller. If the optimized file ends up larger, it won’t be changed. Disable this option to allow optimization, even if it increases the file size.

Note
The file size may increase if you compress an image and then recompress it with a lower compression ratio (e.g. if you compress an image with lossy compression and then recompress it using normal compression). In this case, the recompressed image can actually become larger than the original.

 

Configuration type - select Manual to unlock additional compression, conversion and resize options. With Shopify's default type, only Shopify's preferred compression, conversion and resize resolution are available.


Compression - select the level of compression for non-optimized images:

  • Balanced compression - good quality with moderate image weight reduction. Reduces image quality by up to 20%, not noticeable to the eye.
  • Normal compression - fine quality with a good image weight reduction. Reduces image quality by up to 30%.
  • Lossy compression - satisfactory quality with significant image weight reduction. Reduces image quality by up to 40%.

Convert non-optimized images to - choose whether to convert images to more optimized formats:

  • Convert PNG to JPG - JPG is a lighter format that preserves size and colors. Recommended for product images.
  • Convert PNG, JPG to WebP - WebP is the lightest format, often used by websites. Recommended for collection and blog images.
  • Don’t convert - select this option to keep the original image format.

Resize oversized images to - set the maximum resolution. Only images larger than this will be resized to fit within the limit.


Note

The aspect ratio of the image is preserved. For example, if you specify 2048x2048 and your image is 4096x2048, it will be resized to 2048x1024 to fit within the limits.

 

Dashboard

On the Dashboard page, you can sync and optimize images.

 

Note

Syncing is required when setting up the app for the first time. After that, new product and collection images will automatically appear on the Dashboard whenever you open it — no need to sync again. For newly added blog post images, simply click the Sync blog post images button to make them available for optimization.

 

LitePix Dashboard

 

After syncing, all synced images will appear in the grid under the Optimization tab. The number of images requiring optimization is displayed at the top in the Images to optimize section.

Optimization runs based on the parameters set on the Settings page. Alternatively, you can configure these parameters directly on the Dashboard during onboarding, right after completing the Product Sync step.

How to Optimize Images

  1. Select the images you want to optimize. Use the convenient tabs to filter by Product, Collection, or Article.
  2. Click the Optimize button or Optimize all for bulk processing.
  3. The optimization runs in the background according to your settings, so you can leave the Shopify admin and return later.


Note

The app performs one task at a time. Please wait for the current process to finish before starting new image optimization. 

 

Images available for optimization

 

After optimization, you’ll be redirected to a page showing Optimization job details and an Images preview grid.

Optimization job details

 

Under the Optimization job details section, you'll find the start and finish times, and the number of images selected and successfully optimized.

In the Images preview grid, you can see which images were optimized, compare the original and compressed sizes, view the total percentage of weight saved. Click View details link for more information on each image's optimization:

Optimization details

 

Note

If an image's size or parameters remain unchanged after optimization, it means the image already meets your set criteria and doesn’t require further optimization.


At the top of the Dashboard, the Total Saved (MB) section shows the total space saved through compression.

 

History

You can view the history of all your optimized images in the History section.

To do this, go to the Dashboard and click on the History tab. A grid with all your optimizations will appear.

History tab on Dashboard

 

ID - the identifier of the optimization process.

Created - the date and time when the optimization started.

Finished - the date and time when the optimization was finished.

Total Items - the total number of images set for optimization.

Total Optimized - the total number of images successfully optimized.

Status - the status of the optimization process.

Action - click the View details link to see all products optimized within a specific optimization log.

Optimization History Preview