🔧 5. Configuration: Performance Features

This section details the powerful features of the JaJuMa Ultimate Image Optimizer for Magento 2 that directly impact your store's speed and Google's Core Web Vitals. Correctly configuring these settings is the key to achieving maximum performance gains.

5.1 WebP Optimization

WebP is a modern image format from Google that provides excellent compression and is supported by all major browsers. Enabling this is a foundational step for a faster website.

Location: JaJuMa > Ultimate Image Optimizer > Performance > WebP Conversion Configurations

• Enable WebP Conversion:

  • Explanation: The master switch for all WebP features.
  • Options: Yes/No.
  • Recommended: Yes.

    ⚠️ Warning: Please keep this option set to “Yes”. Using AVIF images exclusively is not recommended at this point due to limited browser support. The extension is not yet fully tested with WebP images turned off.

• WebP On-The-Fly Conversion:

  • Explanation: Creates a WebP version the first time an image is requested. This is the easiest setup method. For high-traffic stores, you can set this to "No" and rely solely on the more performance-friendly cron-based conversion.
  • Options: Yes/No.

• Use WebP for Background Images:

  • Explanation: If set to "Yes", the extension will also convert background images that are defined in inline style attributes and <style> tags.
  • Options: Yes/No..
  • Options: Yes/No.

• Disable WebP with transparent images:

  • Explanation: (Deprecated) If you experience issues with transparent images, you can enable this to exclude them from WebP conversion. In most cases, this can be left as "No".
  • Options: Yes/No.

💡 Pro Tip: The quality setting (e.g., 75) will produce different results depending on the conversion tool selected.
Use the Test & Preview Conversion Tool described in section 5.4 to find the perfect balance of quality and file size for your specific images and chosen tool.

5.1.1 Config WebP Conversion Using GD

GD is a graphics library often included with PHP, making it the simplest tool to configure.

• Conversion Tool: Choose "GD".
• WebP Quality: Define the compression factor (1-100). 75 is a recommended starting point.

5.1.2 Config WebP Conversion Using cwebp

cwebp is Google's official command-line tool for WebP conversion and generally provides the best quality and file sizes.

• Conversion Tool: Choose "Cwebp".
• Path to cwebp: This field specifies the location of the cwebp executable. You have three options:
  • Option 1 (If globally available): If cwebp is installed globally on your server (meaning you can run cwebp from the command line), you can leave this field empty.
  • Option 2 (Using the bundled binary): You can use the binary included with the extension. The paths are:
    • Composer install: [magentoroot]/vendor/jajuma/module-imageoptimizerultimate/bin/./cwebp
    • Manual install: [magentoroot]/app/code/Jajuma/ImageOptimizerUltimate/bin/./cwebp
  • Option 3 (If in a custom path): If you have a different version of cwebp installed, provide the full, absolute path to that executable.
• Cwebp Custom Command: For advanced users. Leave this empty to use the extension's pre-configured Base Mode. To use your own parameters, you can enter a full command string. For a full list of options, see the official cwebp documentation.
  • Base Mode Command Used: -q <WebP Quality Config> -alpha_q 100 -z 9 -m 6 -segments 4 -sns 80 -f 25 -sharpness 0 -strong -pass 10 -mt -alpha_method 1 -alpha_filter fast

5.1.3 Config WebP Conversion Using Imagemagick

ImageMagick is a popular and powerful image processing library.

• Conversion Tool: Choose "Imagemagick".
• Path to imagemagick: This field specifies the location of the ImageMagick convert executable. You have two options:
  • Option 1 (If globally available): If ImageMagick is installed globally on your server (meaning you can run convert from the command line), you can leave this field empty.
  • Option 2 (If in a custom path): If ImageMagick is in a non-standard location, provide the full, absolute path to the executable (e.g., /usr/local/bin/convert).
• Imagemagick Custom Command: For advanced users. Leave empty to use the recommended Base Mode. For custom options, see the ImageMagick WebP documentation.
  • Base Mode Command Used: -quality <WebP Quality Config> -define webp:lossless=false,method=6,segments=4,sns-strength=80,auto-filter=true,filter-sharpness=0,filter-strength=25,filter-type=1,alpha-compression=1,alpha-filtering=fast,alpha-quality=100

If you encounter conversion errors, our Troubleshooting, FAQ & Best Practices has detailed steps to fix them.

5.2 AVIF Optimization

AVIF is the cutting-edge image format offering the best compression available, resulting in the smallest file sizes. Due to its resource-intensive nature, AVIF conversion runs only via cron job or CLI command.

Location: JaJuMa > Ultimate Image Optimizer > Performance > AVIF Conversion Configurations

• Enable AVIF Conversion:
  • Explanation: The master switch for all AVIF features.
  • Options: Yes/No.
• Use AVIF for Background Images:
  • Explanation: Also applies AVIF optimization to inline background images.
  • Options: Yes/No.
• Use AVIF only if smaller than WebP:
  • Explanation: A highly recommended safeguard. This smart feature checks if the generated AVIF is actually smaller than the WebP version and only serves it if it provides a benefit.
  • Options: Yes/No.
• Run AVIF Conversion with low priority:
  • Explanation: Ensures the conversion process doesn't compete for CPU resources with critical website functions.
  • Options: Yes/No.

    ⚠️ Warning: On a live production server, it is highly recommended to set Run AVIF Conversion with low priority to "Yes" and configure a Server Load Limit (under General > Optimization by Cron) to prevent the conversion process from slowing down your site.

5.2.1 Config AVIF Conversion Using avifenc

avifenc is a powerful AVIF encoder, often considered the reference implementation for quality.

• AVIF Conversion Tool: Choose "Avif Enc".
• Path To Avifenc Convert Tool: This field specifies the location of the avifenc executable.
  • Option 1 (If globally available): If avifenc is installed globally on your server, you can leave this field empty.
  • Option 2 (If in a custom path): If avifenc is installed in a specific location, provide the full, absolute path to the executable.
• AVIF Quality: Define the compression factor from 0 (lossless) to 63 (lowest quality).
  Note: Contrary to the other tools, lower value yields higher quality for avifenc!
• Conversion Speed: Encoding speed from 1 (best quality, slowest) to 10 (fastest, lowest quality). 6 is a good balance.
• Thread Limit for AVIF conversion: Limits how many CPU cores the conversion process can use.
• Avifenc Custom Command: For advanced users. Leave empty to use the recommended default command.

5.2.2 Config AVIF Conversion Using cavif

cavif is our recommended tool for AVIF. It is bundled with the extension and offers an excellent balance of speed and quality.

• AVIF Conversion Tool: Choose "Cavif".
• Path To Cavif Convert Tool: The path to the binary bundled with the extension is pre-configured. It's recommended to leave this field with its default value.
• AVIF Quality: A value from 1 to 100. A good starting point is 50-60.
• Conversion Speed: A value from 1 (best quality, slowest) to 10 (fastest, lower quality). 1 is recommended for best results.
• Use RGB Color Space: Encodes using RGB instead of YCbCr. This can improve color accuracy but may result in larger files.
• Thread Limit for AVIF conversion: Limits how many CPU cores the conversion process can use. Set to 1 or 2 on a live server. 0 means no limit.

5.2.3 Config AVIF Conversion Using Imagemagick or GD

These tools also support AVIF, though they may have specific version requirements (e.g., ImageMagick 7.0.10-25+ or PHP 8.1+ for GD). Their configuration is straightforward, requiring only a quality setting.

If you encounter conversion errors, our Troubleshooting, FAQ & Best Practices has detailed steps to fix them.

5.3 Choosing a Conversion Tool

Use this table to select the best tool for your needs.

5.4 Test & Preview Conversion Tool

Located within the WebP and AVIF configuration sections, this tool is essential for finding the perfect quality settings. As mentioned in our System Requirements Documentation, it is also an excellent way to verify that your chosen conversion tool is installed and working correctly.

1. Enter a Product ID (not SKU).
2. Click the Test Conversion Tool button.
3. A popup will appear showing a side-by-side comparison of the original and optimized image, allowing you to visually inspect the quality and see the file size savings.

If you encounter conversion errors, our Troubleshooting, FAQ & Best Practices has detailed steps to fix them.

5.5 Responsive Images

This feature creates smaller image versions for different screen sizes, which is crucial for mobile performance and fast load times on smaller devices.

Location: JaJuMa > Ultimate Image Optimizer > Performance > Responsive Images

• Enable Responsive Images: Set to Yes to generate different image sizes.
• Use Responsive for Background Images: Set to Yes to also apply this feature to inline background images.
• Image Breakpoints: Define a list of widths/breakpoints (in pixels) for which smaller images should be created. A good starting point is 480, 767, 1023,1279, 1440.
• Responsive Images Blacklist: Exclude specific images from this feature using a comma-separated list of strings or RegEx.
• Add sizes=auto to img tag (Experimental feature): This includes experimental support for the sizes=auto attribute.
  Note: With this option enabled, some images may display with a wrong size. I. e. with a Browser default fixed size/ratio of 300x150px. In this case, you may try "Fix image display" option below to fix the issue.
• Fix image display for sizes=auto (Experimental feature): This option adds some styles to fix images showing with wrong size when using sizes=auto with responsive images.
  Note: This does not fix all cases. If you still see images with wrong size after enabling this option, you may need to add proper styles to fix the issue or disable sizes=auto option above.

5.6 Lazy Loading

Fine-tune how your images load to directly optimize your Core Web Vitals scores.

Location: JaJuMa > Ultimate Image Optimizer > Performance > Lazy Loading & Miscellaneous

• Enable Native Lazy Loading:
  • Explanation: Adds loading="lazy" to offscreen images, deferring their load until needed. This is a direct improvement for initial page load time.
  • Options: Yes/No.
• Native Lazy Loading Blacklist:
  • Explanation: Crucial for LCP. Add unique parts of filenames or CSS classes for your "above-the-fold" images (like a homepage banner) to exclude them from lazy loading so they load immediately.

💡 Pro Tip: Make sure to check and enable the Low-Quality Image Previews (LQIP) feature.
Lazy Loading and Low-Quality Image Previews (LQIP) work very well together to improve perceived performance.

5.7 Miscelleaneous

• Enable Async Decoding:
  • Explanation: Set to Yes to add decoding="async" to images, which can improve responsiveness by decoding the image off the main thread.
  • Options: Yes/No.
• Async Decoding Blacklist:
  • Explanation: Exclude specific images (like LCP images) from async decoding.
• Load Images With High Priority:
  • Explanation: Add the same identifiers for your LCP images here. The extension will add fetchpriority="high" to these <img> tags, signaling their importance to the browser.
• Add Width/Height In Img Tag:
  • Explanation: Crucial for CLS. Set to "Yes" to automatically add width and height attributes to <img> tags, which prevents content from shifting during page load.
  • Options: Yes/No.

5.8 Hyvä Theme Bonus Option

This section provides specific tweaks for stores using Hyvä Themes.

Location: JaJuMa > Ultimate Image Optimizer > Performance > Hyvä Theme Bonus Option

• Reduce Total Blocking Time (TBT): If you do not use swatches on your category pages, enabling this option can remove an Alpine component, improving page interactivity and your INP (Interaction to Next Paint) score.
• Fix UI Gallery Zoom: Enable this option to resolve potential style issues in the Hyvä UI Gallery zoom view.

📞 Need Help?

Having trouble with the setup? Check our Troubleshooting, FAQ & Best Practices for common solutions.

Still have questions or need help with configuration? Our expert team is here to assist. Please don't hesitate to contact our support team for personalized assistance.