Commit cda99ddd authored by Arjun Thekoot Harisankar's avatar Arjun Thekoot Harisankar 💻

Added Support for WebP image Format for smaller file sizes and faster load...

Added Support for WebP image Format for smaller file sizes and faster load speeds with fallback to .png for unsupported browers like Safari and Internet Explorer
parent 837ff6df
This diff is collapsed.
This diff is collapsed.
......@@ -10,7 +10,8 @@ features:
h1_content: Music. Control on Phone.
h2_content: >
Listenening to your favourite album on your Desktop? Now control it from your phone.
image1: assets/img/music.png
image2: assets/img/music.png
image1: assets/img/music_webp.webp
linkref: https://userbase.kde.org/KDEConnect#Multimedia_Control_Receiver
- class_name: feature ring
......@@ -20,7 +21,8 @@ features:
h2_content: >
Want to get Phone notifications on your PC while working on that latest project? Got a message from mom and want to reply without picking up your phone. Do it all with Connect.
linkref: https://userbase.kde.org/KDEConnect#Multimedia_Control_Receiver
image1: assets/img/Notifications.png
image1: assets/img/Notifications_webp.webp
image2: assets/img/Notifications.png
- class_name: feature command dark
h1_class: command
......@@ -30,7 +32,8 @@ features:
Want to shut down? Lock your keyboard or mice? Run pre-defined commands from
your connected device or make and run your own commands. Your wish.
linkref: https://userbase.kde.org/KDEConnect#Run_Commands
image1: assets/img/command.png
image1: assets/img/command_webp.webp
image2: assets/img/command.png
- class_name: feature browse dark
h1_class: browse
......@@ -41,7 +44,8 @@ features:
party or share the link to a cool shopping offer? Now do it easily. Browse
your phone files too.
linkref: https://userbase.kde.org/KDEConnect#Share_and_Receive
image1: assets/img/files.png
image1: assets/img/files_webp.webp
image2: assets/img/files.png
- class_name: feature ring
h1_class: ring
h2_class: ring-desc
......@@ -51,13 +55,15 @@ features:
where it is. Also check your phones battery level from your Desktop. How
cool is that?
linkref: https://userbase.kde.org/KDEConnect#Ring_My_Phone
image1: assets/img/ring.png
image1: assets/img/ring_webp.webp
image2: assets/img/ring.png
- class_name: feature more dark
h1_class: more
h2_class: more-desc
h1_content: Presentation Remote. Virtual Trackpad. More.
linkref: https://userbase.kde.org/KDEConnect#Virtual_Input
image1: assets/img/more.png
image1: assets/img/more_webp.webp
image2: assets/img/more.png
h2_content: >
Forgot your presentation remote but have an important presentation to do?
Want to use your phone as a trackpad? We all have been in these situations
......@@ -68,21 +74,24 @@ Boxes:
h4_content: >
Control Content on Browser. Tabs.Youtube.More.
linkref: https://community.kde.org/Plasma/Browser_Integration
image1: assets/img/plasmaint.png
image1: assets/img/plasmaint_webp.webp
image2: assets/img/plasmaint.png
- class_name: product-in plugin dark
h3_content: Plugins
h4_content: >
Make your Own Plugins and Build. Power to You.
linkref: https://userbase.kde.org/KDEConnect#Available_Plugins
image1: assets/img/plugin.png
image1: assets/img/plugin_webp.webp
image2: assets/img/plugin.png
- class_name: product-in OpenVpn
h3_content: OpenVPN Support
h4_content: >
Left home and want to run a command? Or want to give a presenassets/img/wiki.png
linkref: https://community.kde.org/KDEConnect#Running_KDE_Connect_over_OpenVPN
image1: assets/img/ovpn.png
image1: assets/img/ovpn_webp.webp
image2: assets/img/ovpn.png
- class_name: product-in wiki
h3_content: Wiki. Everything you Need.
......@@ -90,7 +99,8 @@ Boxes:
Documentation for Everything.
linkref: https://community.kde.org/KDEConnect
image1: assets/img/wiki.png
image1: assets/img/wiki_webp.webp
image2: assets/img/wiki.png
---
<!-- To Expand this page add the new feature on top with required attributes. Also add the required css for each class. -->
......@@ -114,7 +124,12 @@ Boxes:
</button>
</a>
</div>
<img class="img-fluid" src="assets/img/hero_main.png" />
<picture>
<source srcset="assets/img/hero_main_webp.webp" type="image/webp" />
<source srcset="assets/img/hero_main.png" type="image/png" />
<img class="img-fluid" src="assets/img/hero_main.png" alt="Alt Text!" />
</picture>
</section>
<!-- Loop that loops through features.-->
......@@ -131,7 +146,11 @@ Boxes:
</button>
</a>
</div>
<img class="img-fluid" src="{{feature.image1}}" />
<picture>
<source srcset="{{feature.image1}}" type="image/webp" />
<source srcset="{{feature.image2}}" type="image/png" />
<img class="img-fluid" src="{{feature.image2}}" alt="Alt Text!" />
</picture>
</section>
{% endfor %}
......@@ -153,7 +172,16 @@ Boxes:
</button>
</a>
</div>
<img class="img-fluid" src="assets/img/madebyyou.png" />
<picture>
<source srcset="assets/img/madebyyou.png" type="image/webp" />
<source srcset="assets/img/madebyyou_webp.webp" type="image/png" />
<img
class="img-fluid"
src="assets/img/madebyyou_webp.webp"
alt="Alt Text!"
/>
</picture>
</section>
<div class="row no-gutters grid">
......@@ -170,7 +198,12 @@ Boxes:
</button>
</a>
</div>
<img class="img-fluid prodim" src="{{box.image1}}" />
<picture>
<source srcset="{{box.image1}}" type="image/webp" />
<source srcset="{{box.image2}}" type="image/png" />
<img class="img-fluid prodim" src="{{box.image2}}" alt="Alt Text!" />
</picture>
</div>
</div>
{% endfor %}
......
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment