Add initial width and height

src/components/blog/SinglePost.astro

@@ -28,7 +28,10 @@ const { post, url } = Astro.props;
 						widths={[400, 900]}
 						sizes="(max-width: 900px) 400px, 900px"
 						alt={post.description}
-						aspectRatio="16:9"
+						loading="eager"
+						aspectRatio={16/9}
+						width={900}
+						height={506}
 					/>
 				) : (
 					<div class="max-w-3xl mx-auto px-4 sm:px-6">
@@ -47,7 +50,7 @@ const { post, url } = Astro.props;
 			<SocialShare
 				url={url}
 				text={post.title}
-				class="mt-5 sm:mt-1 align-middle text-gray-400 dark:text-slate-600"
+				class="mt-5 sm:mt-1 align-middle text-gray-500 dark:text-slate-600"
 			/>
 		</div>
 	</article>

src/components/widgets/Hero.astro

@@ -51,8 +51,10 @@ import { Picture } from '@astrojs/image/components'
 						widths={[400, 768, 1480]}
 						sizes="(max-width: 767px) 400px, (max-width: 1479px) 768px, 1480px"
 						alt="Hero Image"
-						aspectRatio="16:9"
+						aspectRatio={1480/833}
 						loading="eager"
+						width={1480}
+						height={833}
 					/>
 				</div>
 			</div>