Jump to content

How to use WebP format in KVS


Tech Support
 Share

Recommended Posts

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:

webp_format_settings.thumb.png.3515ff221758b6278f6042734a9cccd9.png

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:

webp_theme_settings.thumb.png.c6a8071531e1428fa86f9ef5b77e398c.png

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

Link to comment
Share on other sites

  • 10 months later...
  • 10 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...