update How to use WebP format in KVS

[Tech Support]

Starting with 5.1.0 KVS supports WebP format for video screenshots in addition to JPG format. WebP is a modern image format promoted by Google and supported by major browsers (78.37% support coverage at this moment). The key feature of this format is HUGE - 30-50% - image size reduction in comparison with JPG while keeping visual quality almost the same.

Since this format is not 100% supported, it can only be used as an addition to standard JPG format and theme should be adopted for this.

Here is an example of WebP and JPG image from our demo website:

WebP, 6.13Kb:
https://www.kvs-demo.com/contents/videos_screenshots/0/182/336x189/1.jpg

JPG, 9.23Kb:
https://www.kvs-demo.com/contents/videos_screenshots/0/182/320x180/1.jpg

 

Creating WebP format

In order to create WebP format please go to Settings -> Formats -> Add screenshot format. In format creation form specify title, size and image type as the following:

NOTE: Ideally this format should have the same size as its alternate JPG format. However KVS requires unique size across all image formats. The workaround here is to make this format size a bit bigger than JPG (which is 320x180 in case of default theme) while keeping aspect ratio the same. So it resulted in 336x189 size.

You can leave other options, such as ImageMagick settings as default. If you want to fine-tune WebP creation please refer ImageMagick guide for WebP:

https://imagemagick.org/script/webp.php

Please also note that your ImageMagick library should have support for WebP encoder to create this format.

NOTE: Creating new screenshot format may result in long background process if you have many videos. You can follow this process in Administration -> Background tasks.

 

Configuring theme to show WebP

Starting with KVS default theme 7.3 it supports WebP from the box. Please go to Website UI -> Theme settings and check your theme version. If it says 7.3 or above, you can easily configure your theme to use WebP along with JPG by selecting the created WebP format in its designed option:

IMPORTANT! Thumb format selection will work together with lazyload function, so you have to have lazyload option enabled as well, otherwise theme will always show JPG format and WebP will not be used at all.

 

Customizing old theme versions to support WebP

If your theme version is older than 7.3, you will have to customize it so that it can support WebP format. Here are the steps.

 

Step 1. Update this file from kvs-demo.com:

https://kvs-demo.com/static/js/main.min.js

NOTE: In some theme installations this file may be stored under /static/js subdirectory.

 

Step 2. Go to Website UI -> Page components -> include_list_videos_block_common.tpl. Search template for <img class="thumb and you should be able to find this line (can be slightly different in your case):

<img class="thumb {{if $lang.enable_thumb_lazyload=='true'}}lazy-load{{/if}}" {{if $lang.enable_thumb_lazyload=='true'}}src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-original{{else}}src{{/if}}="{{$item.screen_url}}/{{$lang.videos.thumb_size}}/{{$item.screen_main}}.jpg" alt="{{$item.title}}" {{if $lang.enable_thumb_scrolling=='true'}}data-cnt="{{$item.screen_amount}}"{{/if}} {{if $item.is_private==0 && $item.formats[$lang.videos.preview_video_format_standard].file_path!=''}}data-preview="{{$config.project_url}}/get_file/{{$item.server_group_id}}/{{$item.formats[$lang.videos.preview_video_format_standard].file_path}}/"{{/if}} {{if $item.is_private==2 && $item.formats[$lang.videos.preview_video_format_premium].file_path!=''}}data-preview="{{$config.project_url}}/get_file/{{$item.server_group_id}}/{{$item.formats[$lang.videos.preview_video_format_premium].file_path}}/"{{/if}} width="{{$lang.videos.thumb_size|geomsize:'width'}}" height="{{$lang.videos.thumb_size|geomsize:'height'}}"/>

Save this template code locally in order to be able to quickly restore it. After the last attribute and before the ending tag /> please add the following code with space at the beginning:

 {{if $lang.videos.thumb_size_webp}}data-webp="{{$item.screen_url}}/{{$lang.videos.thumb_size_webp}}/{{$item.screen_main}}.jpg"{{/if}}

NOTE: Make sure you don't break HTML syntax of this line and keep the necessary spaces.

Save and check if your site correctly displays video list. If something is wrong, just restore the original template code and try again.

 

Step 3. Go to Website UI -> Add text and create the following text item (replace 336x189 with your WebP size if it is different):

• External ID: videos.thumb_size_webp
• Default: 336x189

Save.

Your site should now show WebP in Chrome and Firefox browsers. Please note that Safari doesn't support WebP at the moment. There is no easy way you can visually check it. However you can use browser development tools (F12) and see which images are loaded, and check their size. If the size is 336x189, then you have successfully performed all steps.

[kvs_user]

What to do to make the switch wor webp itself appear in the admin panel?

https://i.ibb.co/SmXQpZX/Screenshot-1.jpg

[Tech Support]

The switch in theme settings will not appear. It is only present in themes that support WebP initially.

[Lio]

how can i upload an image in webp format in categories or how can i do it ?

[Tech Support]

2 hours ago, Lio said:

how can i upload an image in webp format in categories or how can i do it ?

Webp is not supported for categories, only in video screenshots.

[IFMkey]

On 9/12/2019 at 3:40 PM, Tech Support said:

> Theme

screenshots  how to use webp??  thanks!

[Tech Support]

3 hours ago, IFMkey said:

screenshots  how to use webp??

Sorry, not sure I get this... The whole post is about how to use WebP in KVS.

[IFMkey]

https://www.kvs-demo.com/get_file/0/bf91f543ffb76e532a80c475ae42a79a37b284a416/0/219/screenshots/3.jpg/   

 

videos screenshots how to use webp

[Tech Support]

6 hours ago, IFMkey said:

videos screenshots how to use webp

These are screenshot sources, they are in JPG format always and of the highest quality. Because they are sources for other thumbs. WebP is reducing quality much.