Webp ? AVIF? JPEG ? PNG?? ?? ??? ??? ?? ? ??? AVIF? JPEG?? ?? 50% ???? HDR ? ?? ? ? ??? ?????. 2. ??? ???? ?? ???? ???? ?? Webp ? JPEG/PNG ???? AVIF? ?????. 3. CWEBP, Avifenc, Squoosh ?? CMS ????? ?? ??? ???? ??? ??? ????? ??? ??? ?? ?? ?? 70-85? ???????. 4. ?? ??? ???? ???? = "???"?? ?? ??? ??? ????? ? ?? ?? ? ?? ???? ??? ?? ??? ??? API? ??????. 5. ???? ??? ???? ??? ?? ?? ???? ???? ?? ?? ?? ?? ??? ?????. 6. ?? ??, ?? ? SRCSET ? ??? ??? ????? ??? ???? CDN? ???? ?? ??? ??????? ??? ??? ??? ??? ???? ?? ? ? ??? ??? ?????.

?? ???? ????? ?? ?? ? ?? ??? ?? ??? ??? ?? ???? ???? ??? ??? ??? ???? ????. ? ?????? ??????? ??? ??? ?? ??? ??? ?????? ??, ??? ?? ? ??? ??? ?? ??? ? ? ????. ??? Webp, AVIF ? Lazy Loading? ?? ??? ?? ??? ??? ?????.

Webp? Avif? JPEG ? PNG?? ?? ??

JPEG ? PNG? ?? ???? ??? ?? ? ?? ???? ?? ??? ?? ???????.

Google?? ?? ? Webp ? ??? ?????.

• ??? ???? JPEG?? ?? ??? 25–35% ? ????
• PNG? ?? ???? ?? ??? ????? ??? ?? ? ????.
• ?? ? ??? ?? ??
• ??? ???? ?? (Chrome, Firefox, Edge, Safari 14)

AVIF (AV1 ??? ?? ??)? ? ??? ?????.

• JPEG?? ?? 50% ?? ??? ?? ????.
• HDR, ?? ? ? ?? ? ?? ?? ??? ?????
• ???? ???? ?????
• ???? ???? ?? (Chrome, Firefox, Edge - ??? 2024 ? ?? ???? ??)

? ?? ? : ???? ??? AVIF? ???? Webp? ?? ? ?? ?? ????? ?? JPEG/PNG? ??????.

<picture></picture> ??? ???? ?? ? ? ????.

 <??>
  <?? srcset = "image.avif"type = "image/avif">
  <?? srcset = "image.webp"type = "image/webp">
  <img src = "image.jpg"alt = "?? ???">
</??>

??? ??? ?????? ???? ?????.

???? ? ? AVIF? ???? ??

?? ???? ???? ?? ? ??? ????. ???????.

Webp :

• cwebp (Google? ?? ? ??) ?? :
  cwebp -q 80 input.jpg -o output.webp
• ?? Imagemagick, Squoosh ?? Webpack ????? ?? ?? (? : imagemin-webp )

AVIF? ?? :

• avifenc (libavif)? ??????.
  avifenc --min 60 --max 70 --cpu-used 4 input.jpg output.avif
• squoosh.app? ?? ??? ??? ??? ??? ????? ??? ? ????.
• CMS ???? (? : WordPress? ??)? ???? ??? ? ? ????

? ??? ? : 70-85 ??? ??? ??????. 90 ?????? ?? ?? ?? ??? ?? ???? ??? ?? ???.

????? : ?? ?? ??? ???? ??????

??? ? ?????? ? ?????? ???? ?????. ?????? ???? ??? ??? ??? ??? ??????.

?? ??? ?? (?? ???) : <img alt="?? ??? ??? : Webp, Avif ? Lazy Loading" > ??? loading="lazy" ??????.

 <img src = "photo.jpg"alt = "Beach Sunset"?? = "Lazy">

• ?? ??? ?????? ?????
• JavaScript? ???? ????
• ?? ?? ???? ?? ?????

??? ??? (? : Custom Shotollers, ?? ???? ??) : ??? ??? API? ??????.

 const images = document.querySelectorall ( 'IMG [data-src]');

const imageObserver = new intersectionObserver ((entries) => {
  entries.foreach (entry => {
    if (EntrysInterSecting) {
      const img = Entry.Target;
      img.src = img.dataset.src;
      img.classlist.remove ( 'Lazy');
      imageObserver.unobserve (IMG);
    }
  });
});

images.foreach (img => imageObserver.observe (img));

HTML? ?? :

 <img  data-src = "image.webp"src = "placeholder.jpg"class = "Lazy"Alt = "..." alt="?? ??? ??? : Webp, Avif ? Lazy Loading" >

? ?? ?? :

• ???? ??? ???? ?? ?? width ? height ??? ??
• ??? ??? ?? ?? ? (LQIP) ?? ?? ??? ??????
• ?? ?? ?? ?? ?? ??? ?? ???? ???? ????.

??? : ??? ???? ???? ??? ????

?? ?? ??? ?? ??? ??? ??? ?????? ?????.

1. ?? ???? AVIF? ?? (Webp ?? ??)
2. ???? ?? -??? ???? ???? ???? ????
3. ??? ?? ??? ?? srcset ???? ?? ? ???? ?????
4. ????? ?? ??? ?? ??
5. ?? ??? ??? (? : Cloudinary, Imgix ?? CloudFlare ???)? ?? CDN? ?????? .

?? ? ? ????? ? :

 <??>
  <source srcset = "large.avif"media = "(min-width : 1200px)"type = "image/avif">
  <?? srcset = "medium.avif"media = "(min-width : 768px)"type = "image/avif">
  <?? srcset = "large.webp"media = "(min-width : 1200px)"type = "image/webp">
  <?? srcset = "medium.webp"media = "(min-width : 768px)"type = "image/webp">
  <img src = "small.jpg"loading = "lazy"width = "300"height = "200"alt = "respondive image">
</??>

? ???? ????? ?? ??? ??? ????. ??? ??, ?? ? ?? ? ???? ??? ?????? ????. Webp ? Avif? ?? ??? ???? ???? ?????? ?? ???? ?? ????. ?? ???? ? ?? ??, ? ??? ??? ? ? ?? ?? ? ?? ??? ? ? ????.

????? ??? ????? ??? JPEG? ???? ??? ???? ??? ??? ????.

? ??? ?? ??? ??? : Webp, Avif ? Lazy Loading? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!