Görsel optimizasyonu

Tam boyutlu bir görseli src/ ya da public/ içine bırakın, bir <img> etiketini ona yöneltin; sitelo onu yeniden boyutlandırır, modern bir biçime çevirir ve etiketi bir srcset ile yeniden yazar. İçe aktarılacak bir şey yok, öğrenilecek bir bileşen yok.

Etkinleştirme

export default {
  images: true,
}

Kodlamayı isteğe bağlı bir eş bağımlılık olan sharp yapar — görselleri açtığınızda onu sitelo ile birlikte kurun:

npm install -D sharp

Görsel optimizasyonunu atlayan siteler onu hiç kurmak zorunda değildir.

Düz bir <img> yazın

export default () => `
  <html lang="tr">
    <body>
      <img src="/images/hero.png" alt="Limanda gün doğumu">
    </body>
  </html>
`

import { html, body, img } from 'javascript-to-html'

export default () =>
  html({ lang: 'tr' },
    body(
      img({ src: '/images/hero.png', alt: 'Limanda gün doğumu' }),
    ),
  )

export default function Home() {
  return (
    <html lang="tr">
      <body>
        <img src="/images/hero.png" alt="Limanda gün doğumu" />
      </body>
    </html>
  )
}

3000×2000 boyutlu bir kaynak öbür uçtan şöyle çıkar:

<img src="/assets/img/hero.a1b2c3d4-3000.webp"
     alt="Limanda gün doğumu"
     sizes="100vw"
     width="3000" height="2000"
     loading="lazy" decoding="async"
     srcset="/assets/img/hero.9f8e7d6c-400.webp 400w,
             /assets/img/hero.5b4a3c2d-800.webp 800w,
             /assets/img/hero.7c6d5e4f-1200.webp 1200w,
             /assets/img/hero.a1b2c3d4-3000.webp 3000w">

400 piksele kadar genişlikteki bir ekran 400’lük dosyayı, 800’e kadar olanı 800’lüğü, 1200’e kadar olanı 1200’lüğü, daha genişi ise tam 3000’liği alır — tarayıcı görünümü karşılayan ilk basamağı seçer (2× ekranda iki katı).

Elinize geçenler

• Asla büyütmeyen yeniden boyutlandırma — kaynağınkinin altındaki yapılandırılmış her genişlik, üstüne de kaynağın kendi genişliği. widths: [400, 800, 1200] ile 750 piksellik bir kaynak 400 ve 750 üretir, orada durur.
• Modern biçimler — tek bir biçim düz bir <img srcset> verir; iki ya da daha fazlası onu özgün biçimde bir yedekle birlikte <picture> içine sarar.
• Yerleşim kayması yok — width ve height gerçek görselden doldurulur, ayrıca loading="lazy" ve decoding="async".
• Geliştirmede aynı biçimlendirme — sitelo (geliştirme) sayfaları yeniden yazar ve türevleri istendikçe sunar, böylece yayımlayacağınızı önizlersiniz.
• Paylaşılan bir önbellek — türevler node_modules/.sitelo/images içinde içerik özetiyle anahtarlanır, bu yüzden geliştirme ve yeniden derlemeler aynı görseli iki kez kodlamaz.

Yeniden yazma derlenmiş HTML üzerinde çalışır, bu yüzden src/ ve public/ içindeki görselleri aynı şekilde kapsar.

Bir etiket yeniden yazıldıktan sonra artık hiçbir şey özgününü göstermez, bu yüzden varsayılan olarak derlemeden budanır. Yalnızca gerçekten başvurulmayan dosyalar gider: derlemedeki her HTML, CSS, JS, XML ve JSON dosyası taranır, böylece bir <a href>, bir og:image, bir RSS eki, bir CSS url() ya da bir data-no-optimize etiketinden bağlanan özgün dosya kalır. Göremediği şeyler, bir betikte çalışma anında birleştirilen ya da bir sunucu adası tarafından işlenen URL’lerdir — bunlar varsa prune: false ayarlayın.

Seçenekler

export default {
  images: {
    widths: [400, 800, 1200],
    formats: ['avif', 'webp'],
    quality: { avif: 55, webp: 78, jpeg: 82 },
    exclude: ['**/og/**'],
  },
}

• widths — varsayılan [400, 800, 1200]; merdivenin tepesinde her zaman kaynağın kendi genişliği bulunur
• formats — varsayılan ['webp']; avif, webp, jpeg, png
• quality — varsayılan { avif: 55, webp: 78, jpeg: 82 }; biçim başına kodlayıcı kalitesi (png kalite değil, sıkıştırma kullanır)
• sizes — sizes özniteliği; etiketteki bir sizes her zaman kazanır
• dimensions — varsayılan true; width / height ekler
• lazy — varsayılan true; loading ve decoding ekler
• exclude — dokunulmayacak görsel URL’lerinin glob ya da RegExp deseni
• assetsDir — varsayılan 'assets/img'
• cacheDir — varsayılan 'node_modules/.sitelo/images'
• remote — varsayılan false; derleme sırasında https:// görsellerini optimize eder
• prune — varsayılan true; derlemede artık hiçbir şeyin başvurmadığı özgün dosyaları siler
• dev — varsayılan true; geliştirmede dokunulmamış özgünleri sunmak için false yapın
• concurrency — paralel kodlamalar, varsayılan CPU − 1 (en çok 8); uzak açıkken 1

İki biçim size verir

AVIF daha küçük ama WebP’den daha yeni, bu yüzden ikisini birden listelemek tarayıcının seçmesini sağlar ve eskiler için bir yedek bırakır:

<picture>
  <source type="image/avif" srcset="/assets/img/hero.*-400.avif 400w, ..." sizes="...">
  <source type="image/webp" srcset="/assets/img/hero.*-400.webp 400w, ..." sizes="...">
  <img src="/assets/img/hero.*-3000.png" alt="..." srcset="..." width="3000" height="2000">
</picture>

Adıyla tek bir boyut

Karusel küçük görselleri, avatarlar, kart ızgarası — bazı görseller yalnızca tek bir boyutta gösterilir ve koca bir merdiven onlara israftır. Türev dosya adları bir içerik özeti taşır, bu yüzden onları elle yazamazsınız; bunun yerine genişliği URL üzerinde adlandırın, etiket o tek dosyayla çıksın:

<img src="/images/hero.png?w=400" alt="Limanda gün doğumu">
<img src="/images/hero.png?w=400&format=jpeg" alt="Limanda gün doğumu">
<img src="/images/hero.png?w=200&h=200" alt="Limanda gün doğumu">
<img src="/images/hero.png?w=200&h=200&fit=contain" alt="Limanda gün doğumu">
<img src="/images/hero.png?w=200&h=200&background=fff" alt="Limanda gün doğumu">
<img src="/images/hero.png?w=200&h=200&position=top" alt="Limanda gün doğumu">

<img src="/assets/img/hero.9f8e7d6c-400.webp"
     alt="Limanda gün doğumu"
     width="400" height="267"
     loading="lazy" decoding="async">

• w — piksel cinsinden genişlik. Yalnızca widths içindekiler değil, her genişlik işe yarar; daha küçük bir kaynak büyütülmek yerine kendi boyutunu korur.
• h — piksel cinsinden yükseklik. Tek başına genişlik en-boy oranını izler; w ile birlikte görsel o kutuyu dolduracak biçimde ölçeklenir ve ona kırpılır — ?w=200&h=200 kare bir küçük görseldir.
• fit — bir w×h kutusunun nasıl karşılanacağı: cover (varsayılan) onu doldurur ve kırpar; contain görselin tamamını içine sığacak biçimde ölçekler, kırpma yok, dolgu yok — ne çıktığını width/height söyler.
• background — bir contain sonucunu tam kutuya kadar doldurur ve fit=contain anlamına gelir. # olmadan onaltılık (fff, 1a1a1a, ffffff80), bir CSS renk adı ya da transparent — bu sonuncusu alfa destekleyen bir biçim gerektirir; jpeg’de siyah çıkar.
• position — bir cover kırpmasının hangi bölümü tutacağı. Varsayılan ortalanmış; bir kenar ya da köşe (top, left, right-bottom, …) ya da sharp’ın içeriğe duyarlı entropy / attention stratejileri.
• format — avif, webp, jpeg ya da png. Tek başına merdivenin tamamını, o tek biçimde korur.

Birden çok formats yapılandırıldığında sabitlenmiş bir genişlik yine size <picture> verir, her <source> için bir dosyayla. Adlar vite-imagetools’un kullandığı adlardır. Uzak URL’ler hiçbir zaman ayrıştırılmaz — sorgu dizeleri kaynağa aittir — ve images kapalıyken statik sunucular sorguyu yok sayıp özgünü sunar.

Kırpmayı resmin kendisine seçtirmek

Bir kenar ya da köşe öngörülebilirdir, ama karışık fotoğraflardan oluşan bir karuselde özne nadiren iki kez aynı yerdedir. entropy ve attention, sharp’tan her resme bakmasını ve kırpma penceresini korunmaya değer bir şey bulduğu yere kaydırmasını ister:

<img src="/images/hero.png?w=300&h=300&position=entropy" alt="Limanda gün doğumu">
<img src="/images/team.jpg?w=300&h=300&position=attention" alt="Ekip">

• entropy en çok ayrıntı taşıyan bölgeyi tutar — kenarlar, doku, renk değişimi. Düz gökyüzü, boş duvarlar ve sade arka planlar önce gider. Manzaralar, ürünler ve “yoğun” olanın “ilginç” demek olduğu her şey için iyidir.
• attention kırpmayı doygun renge, yüksek frekanslı parlaklığa ve ten tonlarına doğru ağırlıklandırır — bir insanın nereye bakacağına dair bir sezgisel yöntem. İnsan fotoğrafları için iyidir: yüzleri ve özneleri bulma eğilimindedir.

İkisi de düz sezgisel yöntemlerdir — model yok, eğitim yok — bu yüzden onları tek bir görsel için güvence değil, pek çok görsel için makul bir varsayılan sayın. Önemsediğiniz bir kapak görseli için kenarı siz adlandırın. Seçim yalnızca resme bağlıdır, dolayısıyla belirlenimcidir ve diğer türevler gibi önbelleğe alınır.

Devre dışı bırakmak

Zaten bir srcset taşıyan, bir <picture> içinde duran ya da bir SVG, hareketli GIF veya uzak URL gösteren etiketlere dokunulmaz. Geri kalan her şey için bunu siz söyleyin:

<img src="/images/exact.png" alt="Piksel sanatı" data-no-optimize>

Sosyal kart ve site simgesi görselleri <meta> ve <link> içinde yaşar; burası onları hiç yeniden yazmaz — sabit URL’lerini korurlar.

Uzak görseller

Bir CMS’ten içe aktarılan içerik çoğu zaman başkasının sunucusunu gösterir. remote seçeneğini açın; o görseller indirilir, optimize edilir ve kendi alan adınızdan sunulur:

export default {
  images: {
    remote: true,
  },
}

Başarısız olan bir getirme etiketi olduğu gibi bırakır ve bir uyarı verir — kararsız bir kaynak derlemenizi asla düşürmez. prune ardından artık hiçbir şeyin başvurmadığı yerel özgünleri kaldırır.