Guide for LitePix Bulk Image Optimizer

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

Table of contents


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.

 

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 your images” 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.

Note: However, new blog images won’t sync automatically, so you’ll need to click "Sync blog post images" button each time before optimization.

Upon first use, after your products have synced, you'll be guided through a quick setup.
A setup panel appears at the top of the product grid — simply follow the steps to configure how your images will be optimized for the first time.

Step 2/4: File Format and Image Types

  • Image File Format: Choose the specific file formats (e.g., JPG, PNG) you want the app to optimize. 
  • Image Types: Select which types of images (e.g., Product images) the app should process. 
  • Visible product images: Check this box to optimize images for published products only.

Step 3/4: Conversion and Automation

Convert non-optimized images to: 

  • Convert PNG to JPG: Recommended for product images, as JPG is a lighter format that effectively preserves size and colors. 
  • Convert PNG, JPG to WebP: Recommended for collection and blog images, as WebP is the lightest format, ideal for website performance. 
  • Don't convert: Keep the original image formats.

Auto Compress: Enable this to automatically optimize new or updated images daily according to your chosen settings without manual intervention.

Step 4/4: Framing, Cropping, and Scaling

Choose the desired resizing method. 

  • Default Presets: When you select an option, default settings like an aspect ratio (e.g., 1:1) or cropping option (e.g., fixed crop) will appear below. 
  • Customization: Click on these default values to open an editing pop-up and fine-tune the settings for Framing, Cropping, or Scaling.

After completing the steps, a summary will appear, indicating the number of images ready for optimization (e.g., "71 Images ready to optimize!"). 

Review the summary (File format, Image types, Conversion type, etc.). 

Note: The app does not store copies of your original images.
If you want to be able to restore images to their pre-optimization versions, make sure to back them up beforehand.
A reminder about this appears on the dashboard.


To begin the optimization process with these settings, click "Get started"

For more information on optimization results and how the process works for future uploads, see the Image Optimization section.

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 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.

Adjust 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.

 

Image resize settings

 

Image resize options - the app offers three main resizing methods: Framing, Cropping, and Scaling.

Framing - The aspect ratio changing can result in blank areas (borders) if the original image doesn't perfectly fit the new ratio. The app provides options to fill these areas with a solid color or an AI-generated background. Choose the desired aspect ratio for your image: Square (1:1), Landscape (4:3) or Portrait (3:4).

Aspect ratio settings

 

Then use one of the following background treatment options:

Background color settings 

Cropping - It helps you focus on the most important part of your image. We offer both manual (Fixed Crop) and AI-powered (Smart Crop) options. Choose the desired aspect ratio for your image: Square (1:1), Landscape (4:3) or Portrait (3:4)
And use one of the following cropping methods:

Scaling - Adjust images from minimal resizing to maximum enlargement as needed, choosing the scaling level.

Scaling level settings

 

Auto Compress - With Auto Compress enabled, images are automatically optimized daily according to predefined settings. Any new images uploaded to your site will be processed without manual intervention. Enable or disable Auto Compress at any time from the settings panel.

 

Image optimization

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

Note: The app does not store copies of your original images.
If you want to be able to restore images to their pre-optimization versions, make sure to back them up beforehand.
A reminder about this appears on the dashboard.

1. Select the images you want to optimize. Use the convenient tabs to filter by Product, Collection, or Article.

Also you can click Add filter and select the Collections option. You can now select multiple collections to view all product images associated with them.

Once filtered, you can select and optimize these specific images.

Or use Search by option:

a. Image name – returns results matching the image file name (default behavior).

b. Entity name – returns results matching the name of the product, collection, or article the image belongs to. 

Note: Only one search mode can be active at a time.

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:

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.

 

Previewing Changes

Use the Preview button in the image detail viewer to see how your image will look with the current optimization settings applied. This provides a side-by-side comparison of the original (unoptimized) image and the optimized version.

Preview Changes option

 

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