using full names for webp images

app/views/layouts/_footer.haml

@@ -2,7 +2,7 @@
   .max-w-screen-xl.px-4.py-16.mx-auto.sm:px-6.lg:px-8
     .lg:flex.lg:items-start.lg:gap-8
       %a.inline-flex.items-center{"aria-label" => "Hub Feenix", :href => "/", :title => "Hub Feenix"}
-        = image_tag("feenix_lintu" , class: "h-20")
+        = image_tag("feenix_lintu.webp" , class: "h-20")
       .w-full.grid.grid-cols-2.gap-8.mt-8.lg:mt-0.lg:grid-cols-5.lg:gap-y-16
         .col-span-2.sm:col-span-1
           %p.font-medium.text-gray-900 Stories

app/views/layouts/_header.haml

@@ -1,7 +1,7 @@
 %header.px-4.py-5.mx-auto.sm:max-w-xl.md:max-w-full.lg:max-w-screen-xl.md:px-24.lg:px-8
   .relative.flex.items-center.justify-between
     %a.inline-flex.items-center{"aria-label" => "Hub Feenix", :href => "/", :title => "Hub Feenix"}
-      = image_tag("feenix_lintu" , class: "h-20")
+      = image_tag("feenix_lintu.webp" , class: "h-20")
       %span.ml-2.text-xl.font-bold.tracking-wide.text-gray-800.uppercase Hub Feenix
     %ul.flex.items-center.hidden.space-x-8.lg:flex
       %li
@@ -11,7 +11,7 @@
           %a.font-medium.tracking-wide.text-gray-700.transition-colors.duration-400.hover:text-cyan-800{"aria-label" => "Our product", :href => "/#{link}", :title => link.capitalize}= link.capitalize
       %li
         = link_to "https://www.facebook.com/hubfeenix" , :target => "_blank" do
-          = image_tag("fb" , class: "h-10 rounded-md")
+          = image_tag("fb.webp" , class: "h-10 rounded-md")
       %li
         - unless member_signed_in?
           %a.inline-flex.items-center.justify-center.h-12.px-6.font-medium.tracking-wide.text-white.transition.duration-200.rounded-lg.shadow-md.bg-green-800.hover:bg-blue-800.focus:shadow-outline.focus:outline-none{"aria-label" => "Sign up", :href => main_app.member_session_path, :title => "Log in or Sign up"}
@@ -30,7 +30,7 @@
     .lg:hidden.flex.items-center.justify-between
       .mr-20
         = link_to "https://www.facebook.com/hubfeenix" , :target => "_blank" do
-          = image_tag("fb" , class: "h-10 rounded-md")
+          = image_tag("fb.webp" , class: "h-10 rounded-md")
       %button.p-2.-mr-1.transition.duration-200.rounded.focus:outline-none.focus:shadow-outline.hover:bg-deep-purple-50.focus:bg-deep-purple-50{"aria-label" => "Open Menu", :title => "Open Menu" , onclick: "menu_on();"}
         %svg.w-5.text-gray-600{:viewbox => "0 0 24 24"}
           %path{:d => "M23,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,13,23,13z", :fill => "currentColor"}

app/views/layouts/_mobile_menu.haml

@@ -3,7 +3,7 @@
     .flex.items-center.justify-between.mb-4
       %div
         %a.inline-flex.items-center{"aria-label" => "Hub Feenix", :href => "/", :title => "Hub Feenix"}
-          = image_tag("feenix_lintu" , class: "h-20")
+          = image_tag("feenix_lintu.webp" , class: "h-20")
           %span.ml-2.text-xl.font-bold.tracking-wide.text-gray-800.uppercase Hub Feenix
       %div
         %button.p-2.-mt-2.-mr-2.transition.duration-200.rounded.hover:bg-gray-200.focus:bg-gray-200.focus:outline-none.focus:shadow-outline{"aria-label" => "Close Menu", :title => "Close Menu" , onclick: "menu_off();"}