Convert all non-post images to webp

These files are much smaller in size which should help with the
performance scores which determine search rankings.

content/features/hide-custom-fields.md

@@ -4,7 +4,7 @@ subtitle = 'With Dashify Pro, you can stop certain custom fields from showing in
 
 description = 'With Dashify Pro, you can stop certain custom fields from showing when editing a WooCommerce order. Prevent clients from seeing or modifying specific custom fields by hiding them from view. With Dashify, you can hide a custom field across all orders at once.'
 
-imageURL = '/images/hide-custom-fields.png'
+imageURL = '/images/hide-custom-fields.webp'
 imageAlt = 'Screenshot of the Dashify configuration window for custom fields. It lists the custom fields from the order that the window was opened from, and there’s a button to mark a custom field as hidden, which will hide it globally across all orders.'
 
 [[highlights]]

content/features/search.md

@@ -5,7 +5,7 @@ subtitle = 'Dashify Pro adds a global order search to the WordPress admin top to
 
 description = 'Dashify Pro adds a global order search to the WordPress admin top toolbar. Search and save time by quickly jumping to orders.'
 
-imageURL = '/images/global-search.png'
+imageURL = '/images/global-search.webp'
 imageAlt = 'Screenshot of the WordPress admin dashboard, with a popup search appearing over the dashboard that shows a result showing for a searched query, along with a few recent orders. The ID, status, name, and date of the orders are previewed.'
 
 [[highlights]]

content/features/sort-by-sku.md

@@ -5,7 +5,7 @@ subtitle = 'With Dashify, you can sort a customer’s line items by SKU in the o
 
 description = 'With Dashify, you can sort a customer’s line items by SKU in the order view, making it easy to package large orders where you’ve already got the inventory sorted by SKU.'
 
-imageURL = '/images/sku.png'
+imageURL = '/images/sku.webp'
 imageAlt = 'Screenshot of an order’s products in the WooCommerce order admin, showing SKU displayed as a separate column that can be sorted.'
 imageClasses = 'max-w-xl w-full'
 

layouts/index.html

@@ -2,7 +2,7 @@
 <section class="pt-40 pb-16 px-4 text-center bg-gradient-to-b from-[#9D6095B3] to-[#E8A04DB3]">
 	<h1 class="text-white text-5xl font-bold mb-16">Better WooCommerce order management.</h1>
 	<img
-		src="images/dashify-order-list.png"
+		src="images/dashify-order-list.webp"
 		alt="Screenshot of the WooCommerce order list page with Dashify styles and functionality."
 		class="max-w-full lg:max-w-7xl lg:w-none mx-auto rounded-lg shadow-2xl"
 	>
@@ -56,7 +56,7 @@ <h2 class="text-4xl text-center font-bold text-gray-700 mb-8">How does Dashify m
 		<div class="lg:flex flex-col justify-evenly border p-8 lg:basis-[48%] bg-white rounded-lg m-0.5 mt-8">
 			<div class="lg:h-3/4 lg:flex items-center">
 				<img
-					src="images/order-view.png"
+					src="images/order-view.webp"
 					alt="Screenshot of how Dashify changes the WooCommerce admin order view to be more like Shopify in terms of layout and style."
 					class="mb-4 rounded-lg"
 				>
@@ -82,7 +82,7 @@ <h3 class="text-2xl font-semibold text-gray-600 mb-2">Mobile-friendly order tabl
 		<div id="order-navigation" class="scroll-mt-24 target:border-4 target:border-[#E8A04DB3] lg:flex flex-col justify-evenly border p-8 lg:basis-[48%] bg-white rounded-lg m-0.5 mt-8">
 			<div class="lg:h-1/2 lg:flex items-center">
 				<img
-					src="/images/previous-next-order-buttons.png"
+					src="/images/previous-next-order-buttons.webp"
 					alt="Screenshot of the previous and next order buttons that Dashify adds to the top of the WooCommerce order view page."
 					class="mb-4 rounded-lg"
 				>
@@ -109,7 +109,7 @@ <h3 class="text-2xl font-semibold text-gray-600 mb-2">
 		<div class="lg:flex flex-col justify-evenly border p-8 lg:basis-[48%] bg-white rounded-lg m-0.5 mt-8">
 			<div class="lg:h-1/2 lg:flex items-center">
 				<img
-					src="images/order-date-time.png"
+					src="images/order-date-time.webp"
 					alt="Screenshot of the order status, date, and actions that Dashify moves to the top of the order view page."
 					class="mb-4 rounded-lg"
 				>
@@ -122,7 +122,7 @@ <h3 class="text-2xl font-semibold text-gray-600 mb-2">Localized date and time</h
 		<div class="lg:flex flex-col justify-evenly border p-8 lg:basis-[48%] bg-white rounded-lg m-0.5 mt-8">
 			<div class="lg:h-1/2 lg:flex items-center">
 				<img
-					src="images/trend-graphs.png"
+					src="images/trend-graphs.webp"
 					alt="Screenshot of the order trend graphs that Dashify adds to a WooCommerce store."
 					class="mb-4 rounded-lg"
 				>
@@ -135,7 +135,7 @@ <h3 class="text-2xl font-semibold text-gray-600 mb-2">Order trend graphs</h3>
 		<div class="lg:flex flex-col justify-evenly border p-8 lg:basis-[48%] bg-white rounded-lg m-0.5 mt-8">
 			<div class="lg:h-1/2 lg:flex items-center">
 				<img
-					src="images/order-status-filters.png"
+					src="images/order-status-filters.webp"
 					alt="Screenshot of how Dashify make the order status selection for the WooCommerce order table more obvious."
 					class="mb-4 rounded-lg"
 				>
@@ -148,7 +148,7 @@ <h3 class="text-2xl font-semibold text-gray-600 mb-2">Order status filters</h3>
 		<div class="lg:flex flex-col justify-evenly border p-8 lg:basis-[48%] bg-white rounded-lg m-0.5 mt-8">
 			<div class="lg:h-1/2 lg:flex items-center">
 				<img
-					src="images/bulk-actions.png"
+					src="images/bulk-actions.webp"
 					alt="Screenshot of floating bulk actions in the WooCommerce order list added by Dashify."
 					class="mb-4 rounded-lg"
 				>
@@ -174,7 +174,7 @@ <h3 class="text-2xl font-semibold text-gray-600 mb-2">Search and filter</h3>
 		<div class="lg:flex flex-col justify-evenly border p-8 lg:basis-[48%] bg-white rounded-lg m-0.5 mt-8">
 			<div class="lg:h-3/4 lg:flex items-center">
 				<img
-					src="images/timeline.png"
+					src="images/timeline.webp"
 					alt="Screenshot of the restyled order notes, which Dashify displays in the form of a timeline."
 					class="mb-4 rounded-lg"
 				>
@@ -187,7 +187,7 @@ <h3 class="text-2xl font-semibold text-gray-600 mb-2">Timeline</h3>
 		<div class="lg:flex flex-col justify-evenly border p-8 lg:basis-[48%] bg-white rounded-lg m-0.5 mt-8">
 			<div class="lg:h-3/4 lg:flex items-center">
 				<img
-					src="images/back-button.png"
+					src="images/back-button.webp"
 					alt="Screenshot showing the back button that Dashify adds to the order view page."
 					class="mb-4 rounded-lg"
 				>
@@ -219,7 +219,7 @@ <h2 class="text-4xl px-4 text-center font-bold mb-6">Get even more WooCommerce u
 		<div id="global-search" class="scroll-mt-24 target:border-4 target:border-[#E8A04DB3] lg:flex flex-col justify-evenly bg-gradient-to-br from-gray-500 to-gray-700 border border-gray-500 p-8 lg:basis-[48%] rounded-lg m-0.5 mt-8">
 			<div class="lg:flex items-center">
 				<img
-					src="images/global-search.png"
+					src="images/global-search.webp"
 					alt="Screenshot of the WordPress admin dashboard, with a popup search appearing over the dashboard that shows a result showing for a searched query, along with a few recent orders. The ID, status, name, and date of the orders are previewed."
 					class="mb-8 rounded-lg w-full"
 				>
@@ -240,7 +240,7 @@ <h3 class="text-2xl font-semibold mb-2">Search orders from anywhere</h3>
 		<div id="hide-custom-fields" class="scroll-mt-24 target:border-4 target:border-[#E8A04DB3] lg:flex flex-col justify-evenly bg-gradient-to-br from-gray-500 to-gray-700 border border-gray-500 p-8 lg:basis-[48%] rounded-lg m-0.5 mt-8">
 			<div class="lg:flex items-center">
 				<img
-					src="/images/hide-custom-fields.png"
+					src="/images/hide-custom-fields.webp"
 					alt="Screenshot of the Dashify configuration window for custom fields. It lists the custom fields from the order that the window was opened from, and there’s a button to mark a custom field as hidden, which will hide it globally across all orders."
 					class="mb-8 rounded-lg w-full"
 				>
@@ -261,7 +261,7 @@ <h3 class="text-2xl font-semibold mb-2">Hide custom fields</h3>
 		<div id="sku" class="scroll-mt-24 target:border-4 target:border-[#E8A04DB3] lg:flex flex-col justify-evenly bg-gradient-to-br from-gray-500 to-gray-700 border border-gray-500 p-8 lg:basis-[48%] rounded-lg m-0.5 mt-8">
 			<div class="lg:flex items-center">
 				<img
-					src="images/sku.png"
+					src="images/sku.webp"
 					alt="Screenshot of an order’s products in the WooCommerce order admin, showing SKU displayed as a separate column that can be sorted."
 					class="mb-8 rounded-lg w-full"
 				>