Tech Support Posted September 12, 2019 Share Posted September 12, 2019 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. Quote Link to comment Share on other sites More sharing options...
kvs_user Posted September 3, 2021 Share Posted September 3, 2021 What to do to make the switch wor webp itself appear in the admin panel? https://i.ibb.co/SmXQpZX/Screenshot-1.jpg Quote Link to comment Share on other sites More sharing options...
Tech Support Posted September 4, 2021 Author Share Posted September 4, 2021 The switch in theme settings will not appear. It is only present in themes that support WebP initially. Quote Link to comment Share on other sites More sharing options...
Lio Posted July 21, 2022 Share Posted July 21, 2022 how can i upload an image in webp format in categories or how can i do it ? Quote Link to comment Share on other sites More sharing options...
Tech Support Posted July 21, 2022 Author Share Posted July 21, 2022 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. 1 Quote Link to comment Share on other sites More sharing options...
IFMkey Posted September 15, 2022 Share Posted September 15, 2022 On 9/12/2019 at 3:40 PM, Tech Support said: > Theme screenshots how to use webp?? thanks! Quote Link to comment Share on other sites More sharing options...
Tech Support Posted September 15, 2022 Author Share Posted September 15, 2022 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. Quote Link to comment Share on other sites More sharing options...
IFMkey Posted September 15, 2022 Share Posted September 15, 2022 https://www.kvs-demo.com/get_file/0/bf91f543ffb76e532a80c475ae42a79a37b284a416/0/219/screenshots/3.jpg/ videos screenshots how to use webp Quote Link to comment Share on other sites More sharing options...
Tech Support Posted September 16, 2022 Author Share Posted September 16, 2022 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. Quote Link to comment Share on other sites More sharing options...
Helmuts DNMUM.com Posted April 5, 2023 Share Posted April 5, 2023 just, in a case, if somebody might find it useful, I have created a workflow for myself on how to install ImageMagick with WEBP support on a dedicated conversion server (Ubuntu 20.04), and published it on our forum: https://maria.zone/tutorials/how-to-install-imagemagick-7-1-0-54-with-heic-and-webp-support-on-ubuntu-20-04/ .. for those who have stumbled upon this thread and are stuck setting up your conversation server. Best wishes! Helmuts Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.