diff --git a/frontend/public/images/diploma_bachelor_preview.jpg b/frontend/public/images/diploma_bachelor_preview.jpg
new file mode 100644
index 0000000..790c50a
Binary files /dev/null and b/frontend/public/images/diploma_bachelor_preview.jpg differ
diff --git a/frontend/public/images/diploma_bachelor_preview.png b/frontend/public/images/diploma_bachelor_preview.png
deleted file mode 100644
index a424cb2..0000000
Binary files a/frontend/public/images/diploma_bachelor_preview.png and /dev/null differ
diff --git a/frontend/public/images/diploma_retraining_preview.jpg b/frontend/public/images/diploma_retraining_preview.jpg
new file mode 100644
index 0000000..a2c0f9e
Binary files /dev/null and b/frontend/public/images/diploma_retraining_preview.jpg differ
diff --git a/frontend/public/images/diploma_retraining_preview.png b/frontend/public/images/diploma_retraining_preview.png
deleted file mode 100644
index c1b4409..0000000
Binary files a/frontend/public/images/diploma_retraining_preview.png and /dev/null differ
diff --git a/frontend/src/pages/home/components/AboutSection.tsx b/frontend/src/pages/home/components/AboutSection.tsx
index 7aa048f..ff5dff4 100644
--- a/frontend/src/pages/home/components/AboutSection.tsx
+++ b/frontend/src/pages/home/components/AboutSection.tsx
@@ -2,8 +2,8 @@ import { useState } from "react";
 import ScrollReveal from "@/components/feature/ScrollReveal";
 
 const diplomas = [
-  { label: "Диплом о высшем образовании", pdf: "/documents/diploma_bachelor.pdf", preview: "/images/diploma_bachelor_preview.png" },
-  { label: "Диплом о проф. переподготовке", pdf: "/documents/diploma_retraining.pdf", preview: "/images/diploma_retraining_preview.png" },
+  { label: "Диплом о высшем образовании", pdf: "/documents/diploma_bachelor.pdf", preview: "/images/diploma_bachelor_preview.jpg", width: 864, height: 576 },
+  { label: "Диплом о проф. переподготовке", pdf: "/documents/diploma_retraining.pdf", preview: "/images/diploma_retraining_preview.jpg", width: 864, height: 576 },
 ];
 
 export default function AboutSection() {
@@ -64,7 +64,14 @@ export default function AboutSection() {
                 <img
                   src="/images/psychologist.jpg"
                   alt="Ирина — практикующий психолог"
+                  width={1024}
+                  height={1024}
+                  fetchPriority="high"
+                  decoding="async"
                   className="w-full h-full object-cover"
+                  onError={(e) => {
+                    (e.target as HTMLImageElement).style.display = 'none';
+                  }}
                 />
               </div>
             </ScrollReveal>
@@ -80,7 +87,14 @@ export default function AboutSection() {
                     <img
                       src={d.preview}
                       alt={d.label}
+                      width={d.width}
+                      height={d.height}
+                      loading="lazy"
+                      decoding="async"
                       className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+                      onError={(e) => {
+                        (e.target as HTMLImageElement).style.display = 'none';
+                      }}
                     />
                     <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                     <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">