🌈 6. Configuration: User Experience (UX)

While raw performance is critical, the JaJuMa Ultimate Image Optimizer for Magento 2 also includes powerful features designed to enhance the visual quality and perceived performance of your store. These features directly impact how customers interact with and feel about your brand, turning a good experience into a great one.

6.1 High-Resolution (Retina) Images for Premium Visuals

This feature serves sharper, more detailed images to devices with high-pixel-density displays (like Apple's Retina screens), resulting in stunningly crisp and professional product visuals.

Location: JaJuMa > Ultimate Image Optimizer > User Experience > High-Resolution Images

💡 Pro Tip: This feature is specifically for product images. To work effectively, you must upload high-quality source images. For example, to generate a 2x Retina version of an image displayed at 300px wide, your original uploaded source image must be at least 600px wide.

• Enable High-Resolution Images:
  • Explanation: The master switch to activate this feature.
  • Options: Yes/No.
• Image Resolution:
  • Explanation: Choose which high-resolution versions to create. You can select 2x (double resolution), 3x (triple resolution), or both.
  • Options: 2x, 3x, 2x & 3x.
• Enable High Resolution For Main Image Product Page:
  • Explanation: Set to "Yes" to apply this feature to the main image in the Fotorama gallery on the product page (Luma theme). This is enabled by default for Hyvä themes.
  • Options: Yes/No.

High-Resolution Watermarks

You can apply watermarks specifically to your high-resolution images.

• Enable High Resolution Images Watermarks: Set to "Yes" to apply watermarks to Retina images.
• Image: Upload the image file to be used as a watermark.
• Image Opacity: Set the transparency of the watermark (0–100).
• Image Size: Define the width of the watermark as a percentage of the main image's width.
• Image Position: Select the position for the watermark (e.g., Top-Left, Center, Bottom-Right).

6.2 Low-Quality Image Previews (LQIP) for Better Perceived Performance

LQIP improves how fast a site feels by displaying an instant, lightweight placeholder while the full-quality image loads in the background. This creates a responsive, "app-like" experience and prevents jarring empty spaces.

Location: JaJuMa > Ultimate Image Optimizer > User Experience > Low Quality Image Previews

• Enable LQIP:
  • Explanation: The master switch for all LQIP features.
  • Options: Yes/No.
• Enable Low Quality On-The-Fly Convert:
  • Explanation: Set to "Yes" to generate LQIP placeholders as they are needed. Alternatively, for high-traffic sites, you can set this to "No" and generate them via cron/CLI.
  • Options: Yes/No.
• LQIP Blacklist:
  • Explanation: Exclude specific images (e.g., small icons, logos) from LQIP using comma-separated strings or RegEx.
• LQIP Mode:
  • Explanation: Choose the type of placeholder you want to display. The extension supports three distinct modes.

6.2.1 LQIP Mode: Background Color

Displays a solid or gradient color placeholder.

• Fixed Color: To use a single, fixed color, set Use Color Thief to No and choose a specific hex color in the LQIP Background Color field.
• Primary Color: To dynamically use the image's dominant color, set Use Color Thief to Yes. This requires installing a third-party library via composer:

  composer require ksubileau/color-thief-php

• Gradient: With Color Thief enabled, set Use Gradient Color to Yes to create a gradient based on the image's primary colors, providing a richer effect.

6.2.2 LQIP Mode: Image Upload

Displays a custom image or icon (e.g., your brand's logo or a loading spinner) as the placeholder. Simply upload your desired image file in the LQIP Image Upload field.

6.2.3 LQIP Mode: Low Quality Thumbnail Image

This popular "blur-up" technique generates a tiny, highly compressed, and blurred version of the final image that smoothly transitions to the full-quality version.

• LQIP Image Type: WEBP is recommended for the smallest possible placeholder file size.
• LQIP Image Width: A smaller width (e.g., 20px) creates a smaller file size but a more blurred placeholder. Experiment to find the best effect for your site.

Choosing the Right LQIP Mode

Use this table to select the LQIP mode that best fits your store's design and goals.

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