Merge pull request #50 from audacity/optimised-images

Optimised images & remove bloat

Author: DilsonsPickles

src/assets/img/Audacity-3.4-demo.png

@@ -1,4 +1,6 @@
 ---
+import { Image } from "astro:assets";
+
 export interface Props {
   title: string;
   description: string;
@@ -7,19 +9,27 @@ export interface Props {
   cover: ImageMetadata;
   coverAlt: string;
 }
-const { title, href, publishDate, description, cover, coverAlt } =
-  Astro.props;
+const { title, href, publishDate, description, cover, coverAlt } = Astro.props;
 
-const options = {
+const options: Intl.DateTimeFormatOptions = {
   weekday: "long",
   year: "numeric",
   month: "long",
   day: "numeric",
 };
 ---
 
-<a href=`/blog/${href}` class="col-span-12 sm:col-span-6 md:col-span-4 flex flex-col gap-4">
-  <img class="rounded-md aspect-image" alt={coverAlt} src={cover.src} />
+<a
+  href=`/blog/${href}`
+  class="col-span-12 sm:col-span-6 md:col-span-4 flex flex-col gap-4 hover:opacity-90 transition-opacity duration-200"
+>
+  <Image
+    width="800"
+    quality="80"
+    class="rounded-md aspect-image"
+    alt={coverAlt}
+    src={cover}
+  />
   <div class="flex flex-col gap-1">
     <small>{publishDate.toLocaleDateString("en-US", options)}</small>
     <h3>{title}</h3>

src/assets/img/LaptopMockUp.webp

@@ -1,7 +1,8 @@
 ---
 import DownloadButton from "../button/DownloadButton";
-import AudacityMockUp from "../../assets/img/HeroBannerImage.webp";
 import DownloadMuseHubButton from "../button/DownloadMuseHubButton";
+import { Image } from "astro:assets";
+import AudacityMockUp from "../../assets/img/HeroBannerImage.webp";
 ---
 
 <section id="main" class="bg-gradient-to-r from-indigo-900 to-blue-700">
@@ -29,9 +30,11 @@ import DownloadMuseHubButton from "../button/DownloadMuseHubButton";
     <div
       class="col-span-12 md:col-start-7 md:col-span-7 flex items-center justify-center mx-4"
     >
-      <img
+      <Image
+        src={AudacityMockUp}
         alt="A laptop showing the Audacity application"
-        src={AudacityMockUp.src}
+        width={960}
+        quality={80}
       />
     </div>
   </div>

src/components/card/NEWBlogPostCard.astro

@@ -1,27 +1,44 @@
 ---
+import { getImage } from "astro:assets";
 import ReleaseVideoPlaceholder from "../../assets/img/audacity-placeholder.webp";
-import promoPlaceholder from "../../assets/img/promo/ace-placeholder.webp";
+import PromoVideoPlaceholder from "../../assets/img/promo/ace-placeholder.webp";
 import FeaturedVideo from "../video/FeaturedVideo";
 
+const releaseVideoPlaceholderImage = await getImage({
+  src: ReleaseVideoPlaceholder,
+  format: 'webp', // or whatever format you prefer
+  width: 1408,  // specify dimensions as needed
+  quality: 80,
+});
+
+const featuredVideoPlaceholderImage = await getImage({
+  src: PromoVideoPlaceholder,
+  format: 'webp', // or whatever format you prefer
+  width: 1408,  // specify dimensions as needed
+  quality: 80,
+});
+
 const releaseVideo = {
   title:"Our latest release",
   label:"Master channel, new realtime effects & more!",
-  placeholderImage: ReleaseVideoPlaceholder,
+  placeholderImage: releaseVideoPlaceholderImage.src,
   videoURL:"https://www.youtube-nocookie.com/embed/f5TXPUOFH6A?autoplay=1"
 }
 
 const promoVideo = {
   title:"ACE Studio showcase",
   label:"Ad: Turn your lyrics into song with ACE Studio, the AI singing voice generator.",
-  placeholderImage: promoPlaceholder,
+  placeholderImage: featuredVideoPlaceholderImage.src,
   videoURL:"https://www.youtube-nocookie.com/embed/QTlB5UR-IEE?autoplay=1",
   CTA: true, 
   ctaText: "Try for free",
   ctaURL:"https://www.musehub.com/app/ace-studio?utm_source=au-web&utm_medium=mh-app-cta&utm_campaign=au-web-mh-app-ace-studio"
 }
+
+
 ---
 
-<section class="bg-gray-900">
+<section class="bg-slate-100">
   <div
     class="grid md:grid-cols-2 max-w-screen-2xl px-6 sm:px-12 mx-auto py-8 gap-8"
   >

src/components/homepage/HeroBanner.astro

@@ -25,14 +25,14 @@ function FeaturedVideo(props) {
   return (
     <div className="flex flex-col gap-2 lg:gap-4 ">
       <div className="flex flex-col xs:flex-row xs:justify-between md:h-10">
-        <h3 className="text-white content-center">{title}</h3>
+        <h3 className="text-slate-900 content-center">{title}</h3>
         {CTA && (
           <a
             className="py-3 px-4 rounded-md justify-center bg-yellow-300 hover:bg-yellow-400 active:bg-yellow-500 w-fit"
             href={ctaURL}
             onClick={() => handleCTAClick()}
           >
-            <p className="leading-none font-semibold">{ctaText}</p>
+            <p className="text-slate-900 leading-none font-semibold">{ctaText}</p>
           </a>
         )}
       </div>
@@ -49,14 +49,14 @@ function FeaturedVideo(props) {
       ) : (
         <img
           tabIndex="0"
-          src={placeholderImage.src}
+          src={placeholderImage}
           alt="YouTube thumbnail"
           className="w-full aspect-video rounded-md shadow-xl cursor-pointer"
           onClick={() => handleVideoClick()}
           onKeyDown={(e) => e.key === "Enter" && handleVideoClick()}
         />
       )}
-      <p className="text-white">{label}</p>
+      <p className="text-slate-900">{label}</p>
     </div>
   );
 }

src/components/homepage/RecordAnything.astro

@@ -13,7 +13,6 @@ import RecordAnything from "../components/homepage/RecordAnything.astro";
 <BaseLayout title="Audacity ® | Free Audio editor, recorder, music making and more!">
   <HeroBanner />
   <ReleaseVideo />
-  <RecordAnything />
   <ShareYourSounds client:load/>
   <FeatureCards />
   <BlogPosts />