optimize images

astro.config.mjs

@@ -9,7 +9,7 @@ import { escape } from "html-escaper";
 import solid from "@astrojs/solid-js";
 import mdx from "@astrojs/mdx";
 import sitemap from "@astrojs/sitemap";
-// import image from "@astrojs/image";
+import image from "@astrojs/image";
 import compress from "astro-compress";
 
 /**
@@ -44,7 +44,7 @@ export default defineConfig({
 				},
 			},
 		}),
-		// image(),
+		image(),
 		compress(),
 		mdx({
 			remarkPlugins: [remarkGfm, remarkSmartypants],

src/components/ArticlePost/ArticlePost.astro

@@ -1,6 +1,5 @@
 ---
-// import { Image } from "@astrojs/image/components";
-// import * as utils from "@utils/string";
+import { Image, Picture } from "@astrojs/image/components";
 import { createDateFormatter } from "@root/utils";
 import ArticleComments from "@components/ArticleComments";
 import "./ArticlePost.scss";
@@ -39,13 +38,15 @@ const { title, coverImage, tags, author, published_at } = data;
 			coverImage && (
 				<div>
 					<figure>
-						{coverImage && <img itemprop="image" src={coverImage} width="700" height="400" alt={title} />}
-						{/* Render remote or local image */}
-						{/* utils.isURL(coverImage) ? (
-							<Image itemprop="image" src={coverImage} width={700} height={400} aspectRatio={"16:9"} format={"webp"} alt={data.title} />
-						) : (
-							<Image itemprop="image" src={cover.default.src} width={700} height={400} aspectRatio={"16:9"} format={"webp"} alt={data.title} />
-						)*/}
+						<Picture
+							itemprop="image"
+							src={coverImage}
+							sizes="(max-width: 500px) 500px, 700px"
+							widths={[500, 700]}
+							formats={["webp"]}
+							aspectRatio={"16:9"}
+							alt={title}
+						/>
 					</figure>
 				</div>
 			)

src/layouts/article.astro

@@ -8,6 +8,7 @@ import BaseLayout from "@components/BaseLayout";
 import ArticleContent from "@components/ArticleContent";
 import ArticlePost from "@components/ArticlePost";
 import { SITE_METADATA } from "@root/config";
+import { isURL } from '@utils/string'
 import "@styles/global.scss";
 
 export interface Props extends BaseHeadProps {
@@ -27,7 +28,7 @@ const { lang = "ru", content, canonicalUrl } = Astro.props as Props;
 		<meta property="og:type" content="article" />
 		<meta property="og:url" content={canonicalUrl} />
 		{content.coverImage && (
-			<meta property="og:image" content={`${Astro.url.origin}${content.coverImage}`} />
+			<meta property="og:image" content={isURL(content.coverImage) ? content.coverImage : `${Astro.url.origin}${content.coverImage}`} />
 			<meta property="og:image:width" content="700" />
 			<meta property="og:image:height" content="400" />
 			<meta property="og:image:type" content={`${mime.lookup(extname(content.coverImage))}`} />