How to convert to WebP all the images on the OpenCart

CDN OptiPic — simple solution to the problem "Serve images in next-gen formats"
According to recommendations
Google PageSpeed Insights
Easy connection
in 5 minutes
Video instruction
in 2 minutes
Free technical support
+ installation help
Smart WebP convertation on the fly
What does OptiPic CDN do when trying to request an image from it:
  • Returns the WebP version of the image.
    if the browser supports WebP format
  • Returns a compressed version without webp
    if the browser does not support WebP
  • Makes responsive to mobile screens
    if the image is opened from a mobile
  • Caches and speeds up loading
    reducing the load from your hosting
  • Protects
    your images
    preserving copyright by EXIF and IPTC tags
  • Use your own
    domain name
    to load images from img.domain.com, etc
  • Lazy load
    images
    Images load as you scroll through the pages
Convertation to Webp and image compression occurs in the background and does not slow down the opening of images on the browser.
If the optimized version is not yet ready at the time of the image request, the original version is returned without any processing.

Video instruction for configuring the module OpenCart

5 easy steps to connect WebP to OpenCart

Step #1: Download plugin OpenCart WebP

Download and install the official CDN OptiPic plugin for OpenCart on your site.

Step #2: Sign up for OptiPic CDN

Register in your OptiPic CDN account and add a new site to your CDN control panel.

5 easy steps to connect WebP to OpenCart: pic #3

Step #3: Copy site ID

Copy the ID of the created website to the clipboard (Ctrl + C)

5 easy steps to connect WebP to OpenCart: pic #4

Step #4: Paste the site ID into the plugin OpenCart WebP

Go to the settings page of the previously installed plugin on your site.

Paste the copied site ID into the corresponding settings field.

Step #5: Save your settings

Save plugin settings. Clear the cache in the control panel OpenCart.

Change other plugin settings if necessary

Description of module settings


Site ID in your personal account CDN OptiPic
You can find out your website ID in your CDN OptiPic personal account. Add your site to your account if you have not already done so.
To turn off auto-fidelity, just clear the site ID.
Domain list (if images are loaded via absolute URL)
Each on a new line and without specifying the protocol (http/https).
Examples:
mydomain.com
www.mydomain.com
Site pages that do not include auto-replace
Each on a new line and must start with a slash (/)
Replace only URLs of images starting with a mask
Each on a new line and must start with a slash (/)
Examples:
/upload/
/upload/test.jpeg
List of 'srcset' attributes
List of tag attributes, in which you need to replace srcset-markup of images
What is srcset?
Examples:
srcset
data-srcset
CDN domain
Domain through which CDN OptiPic will work. You can use your subdomain (img.yourdomain.com, optipic.yourdomain.com, etc.) instead of the standard cdn.optipic.io. To connect your subdomain, contact OptiPic technical support.
What gets optimization of images on the site
  • Speeding up
    the site
  • Improving
    SEO
  • Increasing
    of conversion
  • Increasing of Google
    Pagespeed Insights

Why is it worth using WebP for OpenCart?

Using Webp solves the "Serve images in next-gen formats" issue in Google Pagespeed Insights.

In short, WebP compresses the file better, all other things being equal, than older formats (png and jpeg) - which means it takes up less space on the hosting and loads faster in the browser when viewing the page.

The implementation of WebP is actively promoted by Google - they provide such statistics:

  • WebP compresses images losslessly 26% better than PNG.
  • WebP compresses lossy images better than JPEG by 25-34% with the same structural similarity index (SSIM)
  • WebP supports lossless transparency (known as alpha) with a size increase of only 22%.

If the visitor’s browser does not support WebP, then the CDN will return the old format (png / jpeg), but compressed (optimized for the Web)

What is image compression

Image optimization is special processing of a graphic file in order to minimize its size without loss of visual quality.

To carry out this procedure, there are a large number of fairly complex algorithms. However, they are all based on the same basis - all the service data there (for example, the name of the program that stores the file, etc.) must be removed from the graphic file, and also, using special programs, merge / smooth similar colors.

As a result, we get the same image, which visually has not changed. However, the volume (weight) of this file in bytes will be much less than the original. If this processing is carried out correctly, the image file can be reduced to 98% without losing image quality.

This means that the pictures on the pages of the site will be loaded many times faster after the optimization.

What will optimize images for your site

  • Save disk space.
  • Speed ​​up page loading.
  • Minimum server load.
  • Increase conversion.
  • Better site ranking for search results.

It has been proven that website acceleration can improve behavioral factors, as well as increase website conversion (increase sales). The longer the page of the site loads, the fewer customers will be able to perform certain target actions there. If your site on the Internet will not work fast enough, you have every chance to miss your potential income. Acceleration of the online resource will provide an opportunity to improve the conversion and due to this significantly increase revenue and attract more customers.

OptiPic Benefits

  • There are no monthly payments.
  • Full Automation.
  • Free connection assistance.
  • To connect and use the service, you do not need to have special skills in programming or administration.
  • There are no restrictions on image size in the system.
  • Friendly technical support.

How can optimizing images for OpenCart speed up a site?

 

A page of any site most often consists of:

  • images;
  • html-code (text content, layout, markup);
  • video;
  • javascript scripts with logic running from the browser;
  • css files with page styles.
 

Such an item as an image occupies most of the entire volume on the site’s pages and is the “heaviest” part of the pages. Reduction (optimization) of images will undoubtedly significantly make it faster to download any online resource.

 

Accordingly, if you change (down) the size of the images, all pages of the site will start loading much faster.

Compressing the images on the site will make it possible to reduce their volume to 75-98%, without losing their visual quality.

What is the WebP format and its benefits?

As users download images to their computers, they are increasingly encountering the new WebP format. This format, developed by Google, allows webmasters to upload high-quality and compact images to their sites. These images can be viewed on laptops, smartphones, and not just on browsers.

  • Images posted on a site weigh much more than text, slowing down site loading and increasing hosting costs. Site owners must find a balance between quality and capacity.
  • Classic JPEG does not always achieve the desired result, especially when graphics need to be small. PNG is often used as an alternative for high-quality images, but it weighs much more, making the site difficult to manage.
  • The new development of Google, WebP, provides the best combination of file size and quality. This format has been tested on many Google services and can be recommended to site owners. Google PageSpeed Insights strongly recommends using WebP on websites instead of legacy image formats (PNG/JPEG) to speed up site loading.

However, problems may arise when using less common browsers with this new format. To avoid incorrect display of pictures, you need to ensure that they are displayed in the usual heavy formats in such cases. Cross-browser compatibility can be achieved by introducing certain algorithms into the code or with the help of special plugins.

Converting old PNG/JPEG formats to WebP is easy with many utilities created for this purpose. But converting all images of an already created site can be a time-consuming task. Most often, special utilities are used to compress OpenCart images by converting PNG/JPEG to WebP. One of the best is OptiPic CDN, which automates the compression of OpenCart images, allowing you to install a ready-made integration module for this CMS on the site.

To speed up OpenCart using the OptiPic CDN service, you need to download and install the plugin for OpenCart on your website using the video instruction located on the main page of the service. The installation process is simple and usually does not cause difficulties even for beginners. The plugin converts and delivers WebP files to users if the browser supports this format. It returns a compressed version of an image in the old format (without conversion) if automated testing has shown that the user's browser does not support WebP OpenCart. The application adapts images to narrow phone screens if the user is viewing the site from a mobile device. It also performs caching for accelerated loading of images so that the site works faster and loads hosting less. You can use the service on a paid and free basis. The trial tariff gives 100,000 image views, which is enough to evaluate the convenience of the service, to understand how it suits you. Free views are credited immediately after registration.

Benefits of WebP

WebP is an image format developed by Google that offers several benefits:

  • Smaller file size: WebP images are typically 25-34% smaller in size compared to JPEG and PNG images of the same quality. This means faster loading times and reduced bandwidth usage.
  • Improved image quality: WebP uses advanced compression techniques that preserve image quality while reducing file size. This means that images look better than JPEG or PNG images of the same size.
  • Supports transparency: WebP supports both lossy and lossless transparency, making it a versatile format for images with transparent backgrounds.
  • Wide browser support: WebP is supported by most modern browsers, including Google Chrome, Firefox, and Microsoft Edge. It can also be easily converted to other image formats for compatibility with older browsers.

Why did Google release WebP as open source?

Google released WebP as open source to provide a more efficient and faster image format for the web. WebP uses advanced compression techniques to reduce the file size of images without compromising on quality. This results in faster loading times for websites and a better user experience for visitors. By making WebP open source, Google also encourages developers to contribute to the project and improve the format over time.

Does WebP support progressive or interlaced display?

Yes, WebP supports both progressive and interlaced display. Progressive display loads the image in multiple passes, allowing a low-resolution version of the image to be displayed quickly while the higher resolution version loads in the background. Interlaced display loads the image in a series of horizontal lines, allowing a rough version of the image to be displayed quickly while the finer details load in the background.

Lossless WebP

Lossless WebP is a type of image format that uses the WebP technology to compress images without losing any data or quality. This means that the image can be compressed to a smaller size without any loss of detail, making it a more efficient format for storing and sharing images on the web. Lossless WebP is particularly useful for images that require high levels of detail, such as photographs or graphics with text. It is also compatible with most web browsers and can be easily integrated into existing websites and applications.

Lossy WebP

Lossy WebP is a type of image format that uses lossy compression techniques to reduce the size of an image file. Lossy compression works by discarding some of the image data, which can result in a reduction in image quality. However, the trade-off is that the resulting file size is smaller, making it easier and faster to load on the web. Lossy WebP is often used for images that don't require high levels of detail or clarity, such as thumbnails or background images.

Why WebP (lossy) is Better than JPEG

WebP outperforms JPEG due to prediction coding, block adaptive quantization, filtering, and Boolean arithmetic encoding. The latter provides a 5%-10% improvement in compression compared to Huffman encoding.

Get started now with the FREE package

One-time payment — no monthly fees

The purchased package does not burn out at the end of the month - it is advantageous to purchase it several months in advance
You pay for views from CDN images. The total cost of use depends on the amount of traffic to your site. On average, this is from $1.5 per 1,000,000 image views.
The first demo of 10,000 views is free.
1,000,000
views

$10.00 $7.00

2,000,000
views

$14.00 $10.00

5,000,000
views

$24.00 $18.00

10,000,000
views

$40.00 $30.00

20,000,000
views

$74.00 $55.00

50,000,000
views

$165.00 $123.00

80,000,000
views

$235.00 $176.00

100,000,000
views

$282.00 $211.00

Why choose us?

189 reviews

OptiPic easily integrates with other platforms

?