Sıkıştırmayı ve kodlamayı otomatikleştirme

Yüksek performanslı resim kaynakları oluşturmayı, kampanyanızın sorunsuz bir parçası haline getirin. sürecidir.

Resim verilerinin kodlanmasından yoğun bilgi yoğunluğuna kadar bu kurstaki tüm söz dizimleri duyarlı görüntülere güç veren, makinelerle iletişim kurma yöntemleridir. Bakiyeniz , bir istemci tarayıcısının ihtiyaçlarını bir sunucuya iletmesi ve bir sunucunun da aynı şekilde yanıt vermesi için çeşitli yöntemler keşfetmiştir. Duyarlı resim işaretlemesi (özellikle srcset ve sizes), nispeten büyük miktarda bilgiyle girin. Ne iyi ne de kötü, bu kısalık tasarımdan kaynaklanıyor: Bu söz dizimleri daha sade ve geliştiriciler için daha kolay hale geliyor. tarayıcının ayrıştırmasını zorlaştırabilirdi. Bir dizenin karmaşıklığı arttıkça potansiyel ayrıştırıcı hataları veya bir tarayıcıdan diğerine istenmeyen davranış farklılıkları olabilir.

Bununla birlikte, bu özneleri göz korkutucu hale getirebilecek aynı özellik size de çözümler sunabilir: kolay bir söz dizimi, okuma işlemi, makineler tarafından daha kolay yazılan bir söz dizimidir. Otomatik teklif stratejilerinin kullanıldığı, web kullanıcısı olarak görsel kodlama ve sıkıştırma: sosyal medya platformları, içerik bağlantıları ve sistemlerinin (İYS) ve hatta e-posta istemcilerinin bile tarafından sıkıştırılır.

Aynı şekilde eklentiler, harici kitaplıklar, bağımsız derleme işlemi araçları veya istemci tarafı kodlamanın sorumlu kullanımı aracılığıyla duyarlı resim işaretleme özelliği, otomasyona uygundur.

Bunlar, resim performansını otomatikleştirmeyle ilgili iki temel endişedir: resimlerin oluşturulmasını yönetmek; bunların kodlamalarını, sıkıştırması ve srcset özelliğini doldurmak ve kullanıcılara yönelik işaretlememizi oluşturmak için kullanacağınız alternatif kaynaklar. Bu modülde, modern bir iş akışının bir parçası olarak resimleri yönetmeye yönelik birkaç yaygın yaklaşım hakkında bilgi edineceksiniz. sitenizi çalıştıran çerçeve veya içerik yönetim sistemi aracılığıyla geliştirme sürecinizin otomatikleştirilmiş aşamasını ya da özel bir içerik yayınlama ağı ile neredeyse tamamen soyutlanır.

Sıkıştırmayı ve kodlamayı otomatik hâle getirme

Kendinizi, ideal kodlamayı ve düzeyi manuel olarak belirlemeye zaman ayırabileceğiniz bir konumda bulmanız pek olası değildir. resimlerinizin sıkıştırılmasına neden olabilir. Farklı görüntü aktarımı boyutlarınızı mümkün olduğunca küçük tutmak çok önemlidir ve üretim web sitesine gönderilecek her resim öğesi için alternatif kaynakların yeniden kaydedilmesi, günlük çalışmalarınızda büyük bir sıkıntıya yol açabilir.

Çeşitli resim biçimlerini ve sıkıştırma türlerini okurken öğrendiğiniz gibi, bir resim için en verimli kodlama, her zaman ve Duyarlı Resimler bölümünde öğrendiğiniz gibi resim kaynaklarınız için ihtiyaç duyacağınız alternatif boyutlar bu resimlerin sayfa düzeninde yerleştirdiği konuma göre belirlenir. Modern iş akışında bu kararlara bağlamlara en uygun şekilde, resimler için bir dizi makul varsayılan değer belirleyerek tek tek değil bütün olarak bunların kullanılması gerekir.

Fotoğrafik görsellerden oluşan bir dizin için kodlama seçildiğinde, kalite ve aktarım boyutu açısından açıkça AVIF tercih edilir. ancak sınırlı desteğe sahip olsa da WebP optimize edilmiş ve modern bir yedek sağlar. JPEG ise en güvenilir varsayılan seçenektir. Alternatif sayfa düzeninde bir kenar çubuğunu kaplayacak resimler için üretmemiz gereken boyutlar, . Sıkıştırma ayarlarında bulanıklığa doğru göz atılması gerekir ve sıkıştırma kusurları kullanır. Bu da her bir görüntüden mümkün olan her baytı bölmek için daha az alan bırakır. daha esnek ve güvenilir bir iş akışı sağlayacak. Özet olarak, izlediğiniz karar verme sürecini izlersiniz. büyük yazılar yazmalarını isteyebilirsiniz.

İşlemenin kendisine gelince, işleme yönelik çok sayıda açık kaynak görüntü işleme kitaplığı vardır. dönüştürme, düzenleme ve resimleri toplu olarak düzenleme; hız, verimlilik ve güvenilirlik açısından rekabet eder. Bu işlenen kitaplıklar, tüm resim dizinlerine tek seferde kodlama ve sıkıştırma ayarları uygulamanıza olanak tanır. ve bu ayarların gerektiği durumlarda orijinal resim kaynaklarınızı koruyacak şekilde resim düzenleme yazılımı açmanız gerekir. anında ayarlanmasını sağlar. Bu geliştirmeler, yerel geliştirme ortamınızdan, geliştirme ve üretim, web sunucusunun kendisidir (örneğin, bir paket için sıkıştırma odaklı ImageMin Node.js, bir dizi eklenti aracılığıyla belirli uygulamalara uygun olacak şekilde genişletilebilir. Platformlar arası ImageMagick ve Node.js tabanlı Sharp hemen kullanmaya başlayabileceğiniz olağanüstü sayıda özellik sunuyor.

Bu resim işleme kitaplıkları, geliştiricilerin resimleri sorunsuz bir şekilde optimize etmeye yönelik araçlar oluşturmasına olanak tanır. Standart geliştirme süreçlerinizin bir parçası olarak: Projenizin her zaman üretime hazır görüntüye atıfta bulunmasını sağlayın. ek yüklenici kaynaklar oluşturun.

Yerel geliştirme araçları ve iş akışları

Grunt, Gulp veya Webpack gibi görev çalıştırıcılar ve paketleyiciler aşağıdakileri yapmak için kullanılabilir: Resim öğelerini CSS ve JavaScript'i küçültme gibi performansla ilgili diğer yaygın görevlerle birlikte optimize etme. Alıcı: Nispeten basit bir kullanım örneğini ele alalım: Projenizdeki bir dizin, onlarca fotoğraf görüntüsü içeriyor. web sitesinde kullanılmak üzere tasarlanmıştır.

Öncelikle, bu görseller için tutarlı ve verimli bir kodlama uygulamanız gerekir. Önceki modüllerde öğrendiğiniz üzere WebP, hem kalite hem de dosya boyutu açısından fotoğrafik resimler için verimli bir varsayılandır. WebP iyi destekleniyor. ancak evrensel olarak desteklenmediğinden progresif JPEG biçimindeki bir yedek de eklemeniz önerilir. Ardından, Bu öğelerin etkili bir şekilde teslim edilmesi amacıyla srcset özelliğinden yararlanabilmek için birden fazla her kodlama için alternatif boyutlar oluşturabilirsiniz.

Resim düzenleme yazılımıyla bitirilmesi halinde bu, tekrar eden ve zaman alıcı bir iş olsa da görev yürütücüler, Gulp, tam olarak bu tür tekrarları otomatikleştirecek şekilde tasarlanmıştır. gulp-duyarlı eklentisi olan Sharp eklentisi, benzer bir kalıbı izleyen birçok seçenekten biridir: kaynak dizindeki tüm dosyaları toplayıp yeniden kodlayın ve aynı standartlaştırılmış "kaliteye" göre sıkıştırın Resim Biçimleri ve Sıkıştırma konusunda öğrendiğiniz bir kısaltmadır. Elde edilen dosyalar, daha sonra tanımladığınız bir yola çıkartılır ve orijinal dosyalarınızda değişiklik yapmadan önce, kullanıcılara yönelik img öğelerinizin src özelliklerinde referanslanmaya hazırdır.

const { src, dest } = require('gulp');
const respimg = require('gulp-responsive');

exports.webp = function() {
  return src('./src-img/*')
    .pipe(respimg({
      '*': [{
        quality: 70,
        format: ['webp', 'jpeg'],
        progressive: true
      }]
  }))
  .pipe(dest('./img/'));
}

Böyle bir süreç uygulandığında, projedeki bir kişi kasıtlı olarak üretim ortamına zarar vermezse ne olursa olsun orijinal resim kaynaklarınızı içeren dizine büyük bir gerçek renkli PNG olarak kodlanmış bir fotoğraf ekledi bu görev, verimli bir WebP ve güvenilir progresif JPEG yedeği oluşturur ve sırasında kolayca ayarlanabilen bir sıkıştırma seviyesidir. Elbette bu işlem, orijinal resminizin dosyalar projenin geliştirme ortamında saklanır. Bu, ayarların herhangi bir zamanda ve yalnızca otomatik çıktının üzerine yazılır.

Birden çok dosya çıktısı almak için birden çok yapılandırma nesnesini iletirsiniz. Bunların tümü, bir width anahtarı ve piksel cinsinden bir değer:

const { src, dest } = require('gulp');
const respimg = require('gulp-responsive');

exports.default = function() {
  return src('./src-img/*')
    .pipe(respimg({
    '*': [{
            width: 1000,
            format: ['jpeg', 'webp'],
            progressive: true,
            rename: { suffix: '-1000' }
            },
            {
            width: 800,
            format: ['jpeg', 'webp'],
            progressive: true,
            rename: { suffix: '-800' }
            },
            {
            width: 400,
            format: ['jpeg', 'webp'],
            progressive: true,
            rename: { suffix: '-400' },
        }]
        })
    )
    .pipe(dest('./img/'));
}

Yukarıdaki örnekte, orijinal resim (monarch.png) 3,3 MB'tan büyüktür. tarafından oluşturulan en büyük dosya bu görev (monarch-1000.jpeg) yaklaşık 150 KB'tır. En küçük, monarch-400.web, yalnızca 32 KB'tır.

[10:30:54] Starting 'default'...
[10:30:54] gulp-responsive: monarch.png -> monarch-400.jpeg
[10:30:54] gulp-responsive: monarch.png -> monarch-800.jpeg
[10:30:54] gulp-responsive: monarch.png -> monarch-1000.jpeg
[10:30:54] gulp-responsive: monarch.png -> monarch-400.webp
[10:30:54] gulp-responsive: monarch.png -> monarch-800.webp
[10:30:54] gulp-responsive: monarch.png -> monarch-1000.webp
[10:30:54] gulp-responsive: Created 6 images (matched 1 of 1 image)
[10:30:54] Finished 'default' after 374 ms

Elbette, görünür sıkıştırma kusurları için sonuçları dikkatli bir şekilde incelemek veya sıkıştırmayı artırmak teşvik edebilirsiniz. Bu görev zarar vermediğinden bu ayarlar kolayca değiştirilebilir.

Dikkatli bir manuel mikro optimizasyon ile kaldırabileceğiniz birkaç kilobayt karşılığında, elinizde hem verimli hem de esnek olan, yüksek performanslı resim öğeleri hakkındaki bilgilerinizi sorunsuz bir şekilde kullanan bir araçtır. tüm projeyi başarıyla uygulayabilmenizi sağlar.

Pratikte duyarlı resim işaretleme

srcset özelliklerinin doldurulması genellikle basit bir manuel işlemdir. Çünkü özellik yalnızca şu verileri yakalar: kaynaklarınızı oluştururken zaten yapmış olduğunuz yapılandırma bilgileri. Yukarıdaki görevler kapsamında özelliğimizin kullanacağı dosya adları ve genişlik bilgileri:

srcset="filename-1000.jpg 1000w, filename-800.jpg 800w, filename-400.jpg 400w"

srcset özelliğinin içeriğinin belirleyici değil, açıklayıcı olduğunu unutmayın. Bir videoyu srcset özelliğini kullanmanız gerekir. srcset özelliği URI'yi içerebilir gereksiz isteklere neden olmadan sunucu tarafından oluşturulan her alternatif kesmenin genişliği ve genişliği ve daha fazla adayın kaynaklarımızdan birini kullanırsanız, tarayıcı istekleri o kadar verimli bir şekilde uyarlayabilir.

Duyarlı Resimler bölümünde öğrendiğiniz gibi, WebP'yi sorunsuz şekilde yönetmek için <picture> öğesini kullanmanız gerekir. veya JPEG yedek deseni. Bu durumda type özelliğini srcset ile uyum içinde kullanacaksınız.

<picture>
  <source type="image/webp" srcset="filename-1000.webp 1000w, filename-800.webp 800w, filename-400.webp 400w">
  <img srcset="filename-1000.jpg 1000w, filename-800.jpg 800w, filename-400.jpg 400w" sizes="…" alt="…">
</picture>

Daha önce öğrendiğiniz gibi, WebP'yi destekleyen tarayıcılar type özelliğinin içeriğini tanır ve <source> öğesinin srcset özelliğini, resim adaylarının listesi olarak ayarlar. image/webp öğesini geçerli bir medya olarak tanımayan tarayıcılar türü, bu <source> öğesini yoksayar ve bunun yerine iç <img> öğesinin srcset özelliğini kullanır.

Tarayıcı desteği ile ilgili bir konu daha var: Duyarlı resim işaretleme desteği olmayan tarayıcılar veya özellikle eski göz atma bağlamlarında bozuk resim riskiyle karşı karşıya kalabiliriz. Çünkü <picture>, <source> ve srcset bu tarayıcılarda yoksayıldığından iç <img> içinde varsayılan bir kaynak belirtmek isteyeceğiz src özelliği.

Bir resmi aşağı ölçeklendirme görsel olarak sorunsuz olduğu ve JPEG kodlaması evrensel olarak desteklendiği için en büyük JPEG mantıklı bir seçim olabilir.

<picture>
  <source type="image/webp" srcset="filename-1000.webp 1000w, filename-800.webp 800w, filename-400.webp 400w">
  <img src="filename-1000.jpg" srcset="filename-1000.jpg 1000w, filename-800.jpg 800w, filename-400.jpg 400w" sizes="…" alt="…">
</picture>

sizes ile başa çıkması biraz daha zor olabilir. Öğrendiğiniz gibi, sizes her zaman bağlamsaldır. özelliği, resmin oluşturulan düzende kaplayacağı alan miktarını bilmeden dolduramaz. Örneğin, mümkün olan en verimli istekleri sağlayabilmek için, bu isteklerin gönderildiği sırada işaretlememizde doğru bir sizes özelliğinin bulunması gerekir. sayfa düzenini yöneten stiller istenmeden çok önce son kullanıcı tarafından yapıldığından emin olun. sizes tamamen atlanıyor HTML spesifikasyonunun ihlalinin yanı sıra sizes="100vw" ile eşdeğer olan varsayılan davranışla sonuçlanır. tarayıcı, bu resmin yalnızca görüntü alanının kendisiyle sınırlandığını ve mümkün olan en büyük aday kaynaklarının seçiliyor.

Özellikle külfetli web geliştirme görevlerinde olduğu gibi, bu görevleri soyutlamak için geliştirilmiş birçok araç mevcuttur. sizes özelliklerini el yazısıyla yazmaya yönelik süreçtir. respImageLint kesinlikle sizes özelliklerinizi doğruluk açısından incelemek ve iyileştirme önerileri sunmak için tasarlanmış temel kod snippet'i URL, resminizi içeren tam oluşturulmuş sayfayı işaret ederken, tarayıcınızda çalıştırdığınız bir yer işareti uygulaması olarak çalışır. öğeler. Tarayıcının sayfa düzenini tam olarak anladığı bir bağlamda, neredeyse mükemmel bir resmin bu düzende kaplayacağı alanın olası her görüntü boyutu boyutunda algılanmasını sağlar.

sizes özelliklerinizi incelemek için kullanabileceğiniz bir araç kesinlikle faydalıdır ancak bunları toptan yapmaya yarayan bir araç olarak daha da fazla değer sunar. Bildiğiniz gibi srcset ve sizes söz dizimi, resim öğesi isteklerini görsel açıdan sorunsuz bir şekilde optimize etmek için tasarlanmıştır. Bununla birlikte üretimde hiçbir zaman kullanılmaması gereken bir şey olmadığından, 100vw varsayılan sizes yer tutucu değeri son derece makuldür. yerel geliştirme ortamınızda bir sayfanın düzeni üzerinde çalışırken. Düzen stilleri oluşturulduktan sonra respImageLint komutunu çalıştırın. size, çok daha ayrıntılı bir ayrıntı düzeyinde kopyalayıp işaretlemenize yapıştırabileceğiniz özelleştirilmiş sizes özellikleri sağlar elle yazılanlardan çok daha iyidir:

Sunucu tarafından oluşturulan işaretleme tarafından başlatılan resim istekleri, JavaScript'in istemci tarafı sizes özelliği oluşturamayacağı kadar hızlı gerçekleşse de Bu istekler istemci tarafında başlatılıyorsa aynı mantık geçerli değildir. Lazysizes projesi, Örneğin, resim isteklerini düzen oluşturulana kadar tamamen ertelemenize olanak sağlar. Böylece, JavaScript sizes için sunduğumuz değerler sayesinde hem size büyük rahatlıkla hem de kullanıcılarınızdan olası en verimli isteklerin gerçekleştirilmesini sağlayabilirsiniz. Bununla birlikte, bu yaklaşımın sunucu tarafından oluşturulan işaretlemenin güvenilirliğinden ve hızından ödün vermek anlamına geldiğini unutmayın. tarayıcıdaki yerleşik optimizasyonlar vardır ve bu isteklerin yalnızca sayfa oluşturulduktan sonra başlatılması, LCP skorunuzu olumsuz etkiler.

React veya Vue gibi istemci taraflı bir oluşturma çerçevesine zaten bağlıysanız elbette bu, zaten sahip olduğunuz bir borçtur. gerekir. Bu durumlarda Lazysizes'ı kullanmak, sizes özelliklerinizin neredeyse tamamen soyutlanabileceği anlamına gelir. Daha da iyisi: geç yüklenen resimlerdeki sizes="auto", fikir birliğine varır ve Lazysizes, yeni standartlaştırılmış tarayıcı davranışı için etkili bir çoklu dolgu haline gelecektir.