Русский  English

How to convert to WebP all the images on the InstantCMS

CDN OptiPic — simple solution to the problem "Serve images in next-gen formats"
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.
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 InstantCMS?

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

How to connect OptiPic CDN to InstantCMS?

Option #1: Universal connection through PHP (GitHub library)

The URLs of the images on the site change automatically. It is enough just to add 1 line to your .htaccess or php.ini.

Connection example via .htaccess

php_value auto_prepend_file "<SITE_ROOT_DIRECTORY>/optipic-cdn-php/optipic-cdn-php/auto_prepend_file.php"

Connection example via php.ini

; Automatically add files before PHP document.
; http://php.net/auto-prepend-file
auto_prepend_file = <SITE_ROOT_DIRECTORY>/optipic-cdn-php/optipic-cdn-php/auto_prepend_file.php
Library on GitHub
free integration by request

Option #2: Universal connection through Nginx proxy

URLs of images on the site do not change. Just now all image traffic is automatically proceed to OptiPic CDN
# OptiPic CDN: insert it into the Server structure
location  ~* \.(png|jpg|jpeg)$ {
    resolver 8.8.8.8; # Google DNS
    set $cdn_host_value "cdn.optipic.io";
    set $from_optipic "yes"; # to disable CDN OptiPic - set "no" value
    if ($arg_no_optipic) {
        set $from_optipic "no";
        set $cdn_host_value $host;
    }
    
    proxy_redirect     off;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Host $cdn_host_value;
    
    if ($from_optipic = "yes") {
        rewrite ^/(.*) /site-XXXXXX/$1 break;
        proxy_pass http://$cdn_host_value;
    }
    
    # get-param ?no_optipic=1 - get image from your hosting directly (without CDN OptiPic)
    try_files $uri 404;
}
XXXXXX — ID of your site in your CDN OptiPic account
We strongly recommend that you check the correctness of the new version of the config before rebooting nginx. You can do this with the command nginx -t.
Soft reload (re-read configs) Nginx can be by command nginx -s reload

Nginx proxy documentation
Get free help in connecting
Check if image is loading via OptiPic CDN
Get free integration
even on a free tariff

Option #3: Connection via .htaccess (Apache proxying)

URLs of images on the site do not change. Just now all image traffic is automatically proceed to OptiPic CDN
#---------------------------------------
# OptiPic CDN 
# Requires enabled Apache modules: `rewrite`, `proxy_module` and `proxy_http_module`
# Add new 'IfModule mod_rewrite.c' block or inject into exist one
# Get support: https://optipic.io/get-free-help/?cdn=1
<IfModule mod_rewrite.c>
    RewriteEngine On
    SSLProxyEngine On

    RewriteCond %{QUERY_STRING} !no_optipic=
    RewriteRule "^(.*)\.(jpg|jpeg|png)$" "http://cdn.optipic.io/site-XXXXXX/$1.$2" [P]
</IfModule>
#----------------------------------------
XXXXXX — ID of your site in your CDN OptiPic account
Before modifying .htaccess, we strongly recommend that you make a backup of the file and make sure you have FTP access to the file.
Get free help in connecting
Check if image is loading via OptiPic CDN
Get free integration
even on a free tariff

Option #4: Just change the URL of the images on your site!

It was
not optimized

<img src="/upload/foo/bar/image.png">

It has become
automatically optimized

<img src="//cdn.optipic.io/site-XXXXXX/upload/foo/bar/image.png">
XXXXXX — ID of your site in your CDN OptiPic account

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?

2023-02-28 07:37:00

2023-01-11 18:01:00

2022-12-05 15:41:00

2022-11-25 10:54:00

2022-11-07 15:46:00

OptiPic easily integrates with other platforms

Оставить отзыв