4 Temel Görüntü Optimizasyonu İpuçları

Feb 3, 2026

Nasıl Yapılır

Birkaç şanslı geliştirici ve bu yazar, Addy Osmani'nin yeni Image Optimizasyon ebook'unu Teknik Düzenle düzenlemesi fırsatı buldu, Temel Görüntü Optimizasyonu , kesinlikle okumalısın.

Daha iyi performans için görüntüleri optimize etmenin 10 yolu

Tam boyutlu inşa ederken e-ticaret web siteleri veya sadece sizin için çevrimiçi bir ev yapmak tasarım portföyü Bu makalede, resimlerinizi daha zayıf ve daha hızlı hale getirmeye yardımcı olacak Addy'nin kitabından birkaç ipucu öğreneceksiniz.

Seçici olun ve kritik görüntüleri önyükleyin

Sitenize bir göz atın ve kritik bir görüntü varlığını tanımlayın. Çoğu için, bu mümkün olan en kısa sürede kılmak istediğiniz bir logo veya kahraman görüntüsü olurdu.

Burası nerede preload Kaynak ipucu geliyor. preload Tarayıcı ayrıştırıcısı başka türlü keşfedilmeden önce bir varlığın alınması gerektiği müşteriye bir imkanın bir yoludur. Hemen hemen her şey için kullanabilirsiniz, ancak kritik görüntülerin önceden yüklenmesi için görkemli bir şekilde çalışır. İşte HTML'de kullanımda bir örnek & lt; head & gt; Bir kahraman afiş görüntüsünü ön yüklemek için öğe:

<link rel="preload" href="/img/logo.svg" as="image">

Ayrıca bir HTTP başlığında preload de kullanabilirsiniz:

Link: </img/logo.svg>; rel=preload; as=image

Aşağıda, Chrome'da aynı sayfanın yüklenmesinin iki ekran görüntüsü rulosunu görebilirsiniz. Bir senaryo kullanır preload Bir kahraman afiş görüntüsü yüklemek için, diğeri değil.

The effect of using preload on a hero banner — Bir kahraman afişinde preload kullanmanın etkisi

Örnekte preload , Afiş görüntüsü tarayıcı penceresinde yarım ikinci sırada görünür. Hepsi tarayıcıya bir kafa başlatan hızlı bir astar yüzünden.

SVG sanatınızı otomatik olarak basitleştirin

Illustrator’s Simplify tool, showing the number of anchor points before and after as Curve Precision is lowered — Illustrator'ın aracı basitleştirerek, eğri hassasiyetinden önce ve sonra bağlantı noktaları sayısını gösteren aracı

SVG'lerin optimize edilmesi, diğer görüntü türlerinden farklıdır, çünkü JPEGS veya PNGS'den farklı olarak, SVGS, özellikle XML işaretlemesi metinden oluşur. Bu, metin tabanlı varlıklara uygulanacağınız tipik optimizasyonların (örneğin, Madem, Gzip / Brotli Sıkıştırma), SVGS'ye de uygulanabileceği anlamına gelir. Bunun ötesinde, SVGO'lar gibi SVGO gibi bir optimizyon cihazı kullanabilirsiniz.

Ama ya sadece vektör sanat eserini tüketmiyorsan, ama yaratmak? Bir illüstratör kullanıcıysanız, resimlerdeki bağlantı noktalarının miktarını basitleştirin iletişim penceresinden kolaylaştırmak için resminizi otomatik olarak basitleştirebilirsiniz.

Bu iletişim kutusu bulunabilir İllustrator cc Nesneye giderek menüsü, yol ve gt; basitleştirin. Eğri hassasiyetini azaltarak (ve isteğe bağlı olarak açı eşiğini ayarlama), resminizdeki ekstra yol noktalarını kaldırmak mümkündür. Bu durumda,% 6'nın% 6'sının% 6'sının azaltılmasında bir azalmanın 54 yol noktasını kaldırdığını unutmayın. Muhtemel olarak kullanılır, sanat eserinizin görünümünü bile geliştirebilirdi.

The savings that path simplification can afford — Yolun basitleştirilmesinin tasarruf sağlayabileceği tasarruflar

Bilge olarak kelime - bu araçla ne kadar agresif olduğuna dikkat edin. Daha düşük eğri hassasiyeti çok fazla ve bir kez dikkatlice hazırlanmış sanatlarınız bir blob haline gelecektir. Yine de doğru dengeyi vurun ve ödülleri toplayacaksınız.

Animasyonlu GIF'leri videoya dönüştürün

With FFmpeg you can turn flabby GIFs into svelte video — FFMPEG ile flabby gifleri svelte videosuna dönüştürebilirsiniz.

Hepimiz iyi bir animasyonlu gif seviyoruz. Etkili bir şekilde neredeyse herhangi bir duyguyu iletmek, ancak gerçekten çok büyük olabilirler. Gifsicle gibi görüntü optimizatörleri, aşırı kilobaytları parçalamaya yardımcı olabilir, ancak bilet bu gifleri videolara dönüştürmek ve bunları HTML5'e gömmektir. & lt; video ve gt; etiket. ffmpeg Komut Satırı Yardımcı Programı bu görev için çok uygundur:

 ffmpeg -i animated.gif -b: v 512k animated.webm
ffmpeg -i animated.gif -b: v 512k animated.ogv
ffmpeg -i animated.gif -b: v 512k animated.mp4

Yukarıdaki komutlar kaynak GIF ( animasyonlu GIF ) -I argümanında girdi olarak ve 512kbps maksimum bir değişken bit hızı ile video çıktı. Kendi bizimize bir testte, 989kb animasyonlu GIF alabildik ve onu 155kb MP4, 109KB OGV ve 85KB bir webm'ye düşürdük. Tüm video dosyaları, kaynak GIF'ye kalite ile karşılaştırılabilirdi. Ubiquity yüzünden & lt; video ve gt; Tag desteği Tarayıcılarda, bu üç video formatları böylece kullanılabilir:

 & lt; video preload = "Yok" & gt;
  & lt; source src = "/ videolar / animated.webm" Type = "Video / WebM" & GT;
  & lt; source src = "/ videolar / animated.ogv" Type = "Video / OGG" & GT;
  & lt; source src = "/ videolar / animated.mp4" Type = "Video / MP4" & GT;
& lt; / video & gt;

Bu rotaya gitmeye karar verirseniz, siparişinizi sipariş ettiğinizden emin olun. Source & gt; Etiketler, böylece en optimum formatın önce belirtilmiş olması ve en az en uygun olanı son belirtilir. Çoğu durumda, bu, önce WebM videolarıyla başlayacağınız anlamına gelir, ancak her videonun çıktı dosya boyutunu kontrol edip ilk önce en küçük olanı kontrol edin ve en büyük olanı sonlandırın.

FFMPEG'iniz yoksa veya ne olduğunu bilmiyorsanız, bunu kontrol et . Homebrew veya çikolatalı gibi çoğu işletim sistemi paketi yöneticilerinin üzerinden kurulumu kolaydır.

InterSectionObserver ile tembel yük

Tembel yükleme görüntüleri zaten yapabileceğiniz bir şeydir, ancak birçok tembel yükleme komut dosyası CPU-yoğun kaydırma olay işleyicilerini kullanır. Bu tür yöntemler, bir sayfadaki etkileşimlere katkıda bulunur. Daha az işleme gücü olan eski donanım, bu tür kodun kötü etkilerine daha da yatkındır. Yürütme azaltma bir dereceye yardımcı olur, ancak öğelerin görünümde ne zaman olduğunda belirlemek için hala dağınık ve oldukça verimsiz bir geçici çözümdür.

Neyse ki, Kavşak Gözlemcisi API, bize elementlerin görünümde ne zaman olduğunu belirlemek için daha basit ve çok daha verimli bir yol sunuyor. İşte bazı temel tembel yükleme resim işaretlemesine bir örnek:

 & lt; img class = "tembel" data-src = "/ images / lazy loaded-image.jpg" src = "/ images.jpg" src = "/ images / placeholder.jpg" alt = "Tembelim." genişlik = "320" yükseklik = "240" & gt;

Burada, bir yer tutucu görüntüsü yükleriz. src öznitelik ve sonra url'yı tembel olarak yüklemek istediğimiz resim için saklayın. Veri-SRC öznitelik. Hepsini kapatmak için, biz veriyoruz & lt; img & gt; kolay erişim için tembel bir sınıf queryselectorall . Oradan, bu kodu kullanıyoruz:

 belge.addeventlistener ("domcontentloaded", fonksiyon () {
  Penceredeki ve amp'ta & amp; & amp; & amp; "intersectionObServertry" penceresinde & amp; "InterSectionObServertry" i ise ("intersectionRatio" penceresinde "intersectionRatio" if;
    Elements = document.queryselectorall ("img.lazy");

    var imageObserver = Yeni InterSectionObserver (İşlev (girişler, gözlemci) {
      girdaps.foreach (işlev (giriş) {
        if (giriş.isintersecting) {
          giriş.target.setattribute ("SRC", giriş.target.getattribute ("Veri-SRC"));
          giriş.target.classlist.remove ("tembel");
          imageObserver.unobserve (giriş.target);
        }
      });
    });

    Elements.Fireach (İşlev (Resim) {
      imageObserver.Observe (resim);
    });
  }
});

Burada, kodu bağlıyoruz. belge nesne Domcontentloaded Etkinlik. Bu kod, kesişme gözlemcisinin geçerli tarayıcı tarafından desteklenip desteklenmediğini görmek için kontrol eder. Eğer ortaya çıkıyorsa, hepsini alıyoruz img sınıfı olan elemanlar tembel ile queryselectorall ve sonra onlara gözlemcileri takın.

Gözlemci, gözlemlediğimiz unsurlara referanslar içerir ( girdileri ) ve gözlemcinin kendisi ( gözlemci ). Bu kod her gözlemci girişinde menteşeler isminginging değer. Gözlemlenen eleman görünümün dışındayken, isminginging İadeler 0 . Eleman Viewport'a girerken, ancak daha büyük bir değer döndürür. 0 . Bu noktada, görüntünün içeriğini değiştirdik. Veri-SRC içine öznitelik src öznitelik ve kaldır tembel sınıf. Belirli bir görüntü tembel yüklerinden sonra, gözlemcinin gözlemcisiyle çıkarılır. unutmamak yöntem.

Bu süreç kaydırma işleyicileri ile etrafta mucking yapmaktan çok daha kolaydır, ancak kavşak gözlemcisi evrensel desteğin tadını çıkarmadan, onlara geri düşmeniz gerekebilir. Eğer bir komut dosyası kapmak ve gitmek için sıralama iseniz, kesişme gözlemcisini kullanan, aynı zamanda Yesterear'ın yöntemlerine de geri düşeriz. Onu alabilirsin İşte .

Bu makale başlangıçta 301 sayısında yayınlandı. ağ , dünyanın web tasarımcıları ve geliştiricileri için en çok satan dergisi. Sayı 301 burada satın al veya abone olun .

İlgili Makaleler:

SVG için tam kılavuz
Vektör Araçları Kullanımı: Bir Web Tasarımcısı'nın Yaklaşımı
Javascript ile SVG'yi Animate

4 Temel Görüntü Optimizasyonu İpuçları

Seçici olun ve kritik görüntüleri önyükleyin

SVG sanatınızı otomatik olarak basitleştirin

Animasyonlu GIF'leri videoya dönüştürün

InterSectionObserver ile tembel yük

Nasıl Yapılır - En Popüler Makaleler

Çarpıcı baskı promosyon malzemesi işçiliği için 3 ipuçları

EM tabanlı boyutlandırma ile duyarlı bir site tasarlayın

Procreate ile klasik bir masal sahnesini boya

Afinite Tasarımcısı ile Retro Logo Nasıl Oluşturulur

Kendi tuval panolarınızı nasıl yapılır

Yağlarda bir portre boya

Fotogerçekçi bir gökyüzü nasıl oluşturulur

Animasyonlu bir kahraman nasıl tasarlanır

Kategoriler