Optimize images and improve social media sharing previews

Convert images to JPG for optimization and ensure correct Open Graph tags are used for social media sharing.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 1f7e7e89-a520-4970-9645-37daadc466dc
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 30e90049-0ceb-4261-a159-b687b34f680b
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/1f7e7e89-a520-4970-9645-37daadc466dc/s81zXmM
Replit-Helium-Checkpoint-Created: true

client/src/components/recipe-widget.tsx

@@ -10,14 +10,14 @@ interface WidgetRecipe {
 }
 
 const WIDGET_RECIPES: WidgetRecipe[] = [
-  { title: "Kaiserschmarrn", image: "/uploads/recipe-kaiserschmarrn.png", time: "25 Min.", servings: "2" },
-  { title: "Wiener Schnitzel", image: "/uploads/recipe-wiener-schnitzel.png", time: "30 Min.", servings: "4" },
-  { title: "Apfelstrudel", image: "/uploads/recipe-apfelstrudel.png", time: "60 Min.", servings: "6" },
-  { title: "Schweinshaxe", image: "/uploads/recipe-schweinshaxe.png", time: "180 Min.", servings: "4" },
-  { title: "Käsespätzle", image: "/uploads/recipe-kaesespaetzle.png", time: "45 Min.", servings: "4" },
-  { title: "Sachertorte", image: "/uploads/recipe-sachertorte.png", time: "90 Min.", servings: "8" },
-  { title: "Maultaschen", image: "/uploads/recipe-maultaschen.png", time: "90 Min.", servings: "4" },
-  { title: "Schlutzkrapfen", image: "/uploads/recipe-schlutzkrapfen.png", time: "60 Min.", servings: "4" },
+  { title: "Kaiserschmarrn", image: "/uploads/recipe-kaiserschmarrn.jpg", time: "25 Min.", servings: "2" },
+  { title: "Wiener Schnitzel", image: "/uploads/recipe-wiener-schnitzel.jpg", time: "30 Min.", servings: "4" },
+  { title: "Apfelstrudel", image: "/uploads/recipe-apfelstrudel.jpg", time: "60 Min.", servings: "6" },
+  { title: "Schweinshaxe", image: "/uploads/recipe-schweinshaxe.jpg", time: "180 Min.", servings: "4" },
+  { title: "Käsespätzle", image: "/uploads/recipe-kaesespaetzle.jpg", time: "45 Min.", servings: "4" },
+  { title: "Sachertorte", image: "/uploads/recipe-sachertorte.jpg", time: "90 Min.", servings: "8" },
+  { title: "Maultaschen", image: "/uploads/recipe-maultaschen.jpg", time: "90 Min.", servings: "4" },
+  { title: "Schlutzkrapfen", image: "/uploads/recipe-schlutzkrapfen.jpg", time: "60 Min.", servings: "4" },
 ];
 
 export function RecipeWidget() {

client/src/pages/article.tsx

@@ -73,7 +73,7 @@ function RelatedArticles({ currentSlug }: { currentSlug: string }) {
             <div className="group cursor-pointer" data-testid={`card-related-${article.id}`}>
               <div className="relative overflow-hidden rounded-md mb-3">
                 <img
-                  src={article.coverImage ? article.coverImage.replace(".webp", "-thumb.webp") : "/images/article-1.png"}
+                  src={article.coverImage ? article.coverImage.replace(".webp", "-thumb.webp") : "/images/article-1.jpg"}
                   alt={article.title}
                   className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105"
                   style={{ objectPosition: "center 25%" }}

client/src/pages/category.tsx

@@ -159,7 +159,7 @@ export default function CategoryPage() {
                       <div className="relative rounded-t-md">
                         <div className="overflow-hidden rounded-t-md">
                           <img
-                            src={article.coverImage || "/images/article-1.png"}
+                            src={article.coverImage || "/images/article-1.jpg"}
                             alt={article.title}
                             className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105"
                             style={{ objectPosition: "center 25%" }}

client/src/pages/home.tsx

@@ -66,7 +66,7 @@ interface GalleryImage {
 }
 
 function thumbUrl(src: string | null): string {
-  if (!src) return "/images/article-1.png";
+  if (!src) return "/images/article-1.jpg";
   if (src.endsWith(".webp")) return src.replace(".webp", "-thumb.webp");
   return src;
 }
@@ -88,7 +88,7 @@ function HeroCard({ article, focalPoints }: { article: Article; focalPoints?: Re
     <Link href={`/article/${article.slug}`}>
       <div className="relative group cursor-pointer rounded-lg overflow-hidden h-full" data-testid={`card-hero-${article.id}`}>
         <div className="relative h-full min-h-[280px]">
-          <SmartImage src={article.coverImage || "/images/article-1.png"} alt={article.title} className="transition-transform duration-700 group-hover:scale-105" focalPoints={focalPoints} />
+          <SmartImage src={article.coverImage || "/images/article-1.jpg"} alt={article.title} className="transition-transform duration-700 group-hover:scale-105" focalPoints={focalPoints} />
           {isVideo && (
             <div className="absolute inset-0 flex items-center justify-center z-10">
               <div className="w-14 h-14 rounded-full bg-primary/90 flex items-center justify-center group-hover:bg-primary transition-colors shadow-lg">

client/src/pages/recipes.tsx

@@ -28,7 +28,7 @@ const RECIPE_REGIONS: RecipeRegion[] = [
     recipes: [
       {
         title: "Kaiserschmarrn",
-        image: "/uploads/recipe-kaiserschmarrn.png",
+        image: "/uploads/recipe-kaiserschmarrn.jpg",
         time: "25 Min.",
         servings: "2 Portionen",
         category: "Nachspeise",
@@ -38,7 +38,7 @@ const RECIPE_REGIONS: RecipeRegion[] = [
       },
       {
         title: "Wiener Schnitzel",
-        image: "/uploads/recipe-wiener-schnitzel.png",
+        image: "/uploads/recipe-wiener-schnitzel.jpg",
         time: "30 Min.",
         servings: "4 Portionen",
         category: "Hauptspeise",
@@ -48,7 +48,7 @@ const RECIPE_REGIONS: RecipeRegion[] = [
       },
       {
         title: "Apfelstrudel",
-        image: "/uploads/recipe-apfelstrudel.png",
+        image: "/uploads/recipe-apfelstrudel.jpg",
         time: "60 Min.",
         servings: "6 Portionen",
         category: "Nachspeise",
@@ -58,7 +58,7 @@ const RECIPE_REGIONS: RecipeRegion[] = [
       },
       {
         title: "Tiroler Knödel",
-        image: "/uploads/recipe-tiroler-knoedel.png",
+        image: "/uploads/recipe-tiroler-knoedel.jpg",
         time: "40 Min.",
         servings: "4 Portionen",
         category: "Hauptspeise",
@@ -68,7 +68,7 @@ const RECIPE_REGIONS: RecipeRegion[] = [
       },
       {
         title: "Sachertorte",
-        image: "/uploads/recipe-sachertorte.png",
+        image: "/uploads/recipe-sachertorte.jpg",
         time: "90 Min.",
         servings: "8 Portionen",
         category: "Nachspeise",
@@ -78,7 +78,7 @@ const RECIPE_REGIONS: RecipeRegion[] = [
       },
       {
         title: "Kärntner Kasnudeln",
-        image: "/uploads/recipe-kaerntner-kasnudeln.png",
+        image: "/uploads/recipe-kaerntner-kasnudeln.jpg",
         time: "50 Min.",
         servings: "4 Portionen",
         category: "Hauptspeise",
@@ -88,7 +88,7 @@ const RECIPE_REGIONS: RecipeRegion[] = [
       },
       {
         title: "Germknödel",
-        image: "/uploads/recipe-germknoedel.png",
+        image: "/uploads/recipe-germknoedel.jpg",
         time: "120 Min.",
         servings: "4 Portionen",
         category: "Nachspeise",
@@ -98,7 +98,7 @@ const RECIPE_REGIONS: RecipeRegion[] = [
       },
       {
         title: "Tafelspitz",
-        image: "/uploads/recipe-tafelspitz.png",
+        image: "/uploads/recipe-tafelspitz.jpg",
         time: "180 Min.",
         servings: "6 Portionen",
         category: "Hauptspeise",
@@ -113,7 +113,7 @@ const RECIPE_REGIONS: RecipeRegion[] = [
     recipes: [
       {
         title: "Schweinshaxe",
-        image: "/uploads/recipe-schweinshaxe.png",
+        image: "/uploads/recipe-schweinshaxe.jpg",
         time: "180 Min.",
         servings: "4 Portionen",
         category: "Hauptspeise",
@@ -123,7 +123,7 @@ const RECIPE_REGIONS: RecipeRegion[] = [
       },
       {
         title: "Obatzda",
-        image: "/uploads/recipe-obatzda.png",
+        image: "/uploads/recipe-obatzda.jpg",
         time: "15 Min.",
         servings: "4 Portionen",
         category: "Vorspeise",
@@ -133,7 +133,7 @@ const RECIPE_REGIONS: RecipeRegion[] = [
       },
       {
         title: "Dampfnudeln",
-        image: "/uploads/recipe-dampfnudeln.png",
+        image: "/uploads/recipe-dampfnudeln.jpg",
         time: "90 Min.",
         servings: "4 Portionen",
         category: "Nachspeise",
@@ -143,7 +143,7 @@ const RECIPE_REGIONS: RecipeRegion[] = [
       },
       {
         title: "Käsespätzle",
-        image: "/uploads/recipe-kaesespaetzle.png",
+        image: "/uploads/recipe-kaesespaetzle.jpg",
         time: "45 Min.",
         servings: "4 Portionen",
         category: "Hauptspeise",
@@ -158,7 +158,7 @@ const RECIPE_REGIONS: RecipeRegion[] = [
     recipes: [
       {
         title: "Maultaschen",
-        image: "/uploads/recipe-maultaschen.png",
+        image: "/uploads/recipe-maultaschen.jpg",
         time: "90 Min.",
         servings: "4 Portionen",
         category: "Hauptspeise",
@@ -168,7 +168,7 @@ const RECIPE_REGIONS: RecipeRegion[] = [
       },
       {
         title: "Zwiebelrostbraten",
-        image: "/uploads/recipe-zwiebelrostbraten.png",
+        image: "/uploads/recipe-zwiebelrostbraten.jpg",
         time: "40 Min.",
         servings: "4 Portionen",
         category: "Hauptspeise",
@@ -178,7 +178,7 @@ const RECIPE_REGIONS: RecipeRegion[] = [
       },
       {
         title: "Flammkuchen",
-        image: "/uploads/recipe-flammkuchen.png",
+        image: "/uploads/recipe-flammkuchen.jpg",
         time: "30 Min.",
         servings: "4 Portionen",
         category: "Hauptspeise",
@@ -193,7 +193,7 @@ const RECIPE_REGIONS: RecipeRegion[] = [
     recipes: [
       {
         title: "Schlutzkrapfen",
-        image: "/uploads/recipe-schlutzkrapfen.png",
+        image: "/uploads/recipe-schlutzkrapfen.jpg",
         time: "60 Min.",
         servings: "4 Portionen",
         category: "Hauptspeise",
@@ -203,7 +203,7 @@ const RECIPE_REGIONS: RecipeRegion[] = [
       },
       {
         title: "Sauerbraten",
-        image: "/uploads/recipe-sauerbraten.png",
+        image: "/uploads/recipe-sauerbraten.jpg",
         time: "240 Min.",
         servings: "6 Portionen",
         category: "Hauptspeise",
@@ -213,7 +213,7 @@ const RECIPE_REGIONS: RecipeRegion[] = [
       },
       {
         title: "Schwarzwälder Kirschtorte",
-        image: "/uploads/recipe-schwarzwaelder-kirschtorte.png",
+        image: "/uploads/recipe-schwarzwaelder-kirschtorte.jpg",
         time: "120 Min.",
         servings: "12 Portionen",
         category: "Nachspeise",
@@ -228,7 +228,7 @@ const RECIPE_REGIONS: RecipeRegion[] = [
     recipes: [
       {
         title: "Grünkohl mit Pinkel",
-        image: "/uploads/recipe-gruenkohl.png",
+        image: "/uploads/recipe-gruenkohl.jpg",
         time: "120 Min.",
         servings: "6 Portionen",
         category: "Hauptspeise",
@@ -238,7 +238,7 @@ const RECIPE_REGIONS: RecipeRegion[] = [
       },
       {
         title: "Kartoffelpuffer",
-        image: "/uploads/recipe-kartoffelpuffer.png",
+        image: "/uploads/recipe-kartoffelpuffer.jpg",
         time: "30 Min.",
         servings: "4 Portionen",
         category: "Hauptspeise",

client/src/pages/videos.tsx

@@ -23,7 +23,7 @@ interface PaginatedResponse {
 function VideoCard({ article }: { article: Article }) {
   const thumbSrc = article.coverImage
     ? article.coverImage.replace(".webp", "-thumb.webp")
-    : "/images/article-1.png";
+    : "/images/article-1.jpg";
 
   return (
     <Link href={`/article/${article.slug}`}>