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.