WordPress gibi İYS'lerin ve diğer site oluşturucuların duyarlı resimlerin kullanımını nasıl kolaylaştırabileceğini keşfedin.
Her resmin alternatif kesitlerini manuel olarak kaydetme ve Squoosh.app gibi bir araçla bunları elle optimize etme konusunda kesinlikle iyileştirme yapılsa da, geliştirme sürecinde bir adım olarak resim sıkıştırmayı otomatikleştirmenin bazı sınırlamaları vardır. Örneğin, site genelinde kullanılan resimler üzerinde her zaman tam denetime sahip olmayabilirsiniz. Web'de kullanıcılara yönelik resimlerin çoğu, JavaScript ve stil sayfaları gibi geliştirme öğeleriyle birlikte bir veri havuzunda kalmak yerine, kullanıcılar veya düzenleyiciler tarafından yüklenen, geliştirme sorunlarından çok içerik ile ilgilidir.
Bu durum genellikle resim yönetimi için birden fazla işlem gerektirir: Site oluşturma ve bakımında kullanılan resim öğeleri (arka planlar, simgeler, logolar vb.) için geliştirme düzeyinde bir görev, sitenin kullanılarak oluşturulan resim öğeleri (ör. bir yayın ekibi tarafından bir yayına yerleştirilmiş fotoğraflar veya bir kullanıcı tarafından yüklenen avatarlar) için olan resim öğeleri için. Bağlam farklı olsa da nihai hedefler aynıdır: Geliştirme ekibi tarafından tanımlanan ayarlara göre otomatik kodlama ve sıkıştırma.
Neyse ki yerel geliştirme iş akışlarınızdan anladığınız görüntü işleme kitaplıkları, istenilen sayıda bağlamda kullanılabilir. Duyarlı resim işaretlemeniz için herkese uyan tek bir yaklaşım söz konusu olmasa da bu sistemler, uygulanmasını kolaylaştırmak için makul varsayılanlar, yapılandırma seçenekleri ve API kancaları sağlar.
Statik Site Oluşturucular
Görev yöneticileriyle karşılaştırıldığında Jekyll veya Eleventy gibi statik site oluşturma araçlarının görüntülere yaklaşımında bazı benzerlikler vardır. Dağıtıma hazır bir web sitesi oluşturmak için bu araçları kullanmak, CSS küçültme veya JavaScript'i çevirme ve paket haline getirme gibi öğelerin yönetilmesini gerektirir. Tahmin edebileceğiniz gibi bu, bu araçların öğrendiğiniz kitaplıkların çoğunu kullanarak resim öğelerini aynı şekilde işlemenizi sağladığı anlamına gelir.
Eleventy'nin resmi resim eklentisi, burada öğrendiğiniz görevlerden bazıları gibi yeniden boyutlandırma, birden fazla kaynak boyutu oluşturma, yeniden kodlama ve sıkıştırma işlemleri gerçekleştirmek için Sharp'ı kullanır.
Görev çalıştırıcının aksine statik site oluşturma aracı, hem bu kitaplıkların yapılandırması ve kullanımı hem de üretim sitesi için oluşturulan işaretleme hakkında doğrudan bilgiye sahiptir. Bu da duyarlı resim işaretlememizi otomatik hale getirmek için çok daha fazlasını yapabileceği anlamına gelir. Örneğin, resimleri görüntülemek için bir kısa kodun parçası olarak çağrıldığında, bu eklenti Sharp'a iletilen yapılandırma seçeneklerine göre HTML çıktısı verir.
const Image = require("@11ty/eleventy-img");
module.exports = function(eleventyConfig) {
async function imageShortcode(src, alt, sizes="100vw") {
let metadata = await Image(src, {
formats: ["avif", "webp", "jpeg"],
widths: [1000, 800, 400],
outputDir: "_dist/img/",
filenameFormat: function( id, src, width, format, options ) {
const ext = path.extname( src ),
name = path.basename( src, ext );
return `${name}-${width}.${format}`
}
});
let imageAttributes = {
alt,
sizes,
loading: "lazy"
};
return Image.generateHTML(metadata, imageAttributes);
}
eleventyConfig.addAsyncShortcode("respimg", imageShortcode);
};
Daha sonra bu kısa kod, varsayılan resim söz diziminin yerine kullanılabilir:
{% respimg "img/butterfly.jpg", "Alt attribute.", "(min-width: 30em) 800px, 80vw" %}
Yukarıda olduğu gibi birden fazla kodlama çıktısı sağlayacak şekilde yapılandırılırsa oluşturulan işaretleme, karşılık gelen <source> öğelerini, type özelliklerini ve srcset özelliklerini içeren bir <picture> öğesi olur ve zaten oluşturulmuş aday boyutlarının listesi ile önceden doldurulmuş olur.
<picture><source type="image/avif" srcset="/img/butterfly-400.avif 400w, /img/butterfly-800.avif 800w, /img/butterfly-1000.avif 1000w" sizes="(min-width: 30em) 800px, 80vw"><source type="image/webp" srcset="/img/butterfly-400.webp 400w, /img/butterfly-800.webp 800w, /img/butterfly-1000.webp 1000w" sizes="(min-width: 30em) 800px, 80vw"><source type="image/jpeg" srcset="/img/butterfly-400.jpeg 400w, /img/butterfly-800.jpeg 800w, /img/butterfly-1000.jpeg 1000w" sizes="(min-width: 30em) 800px, 80vw"><img alt="Alt attribute." loading="lazy" src="/img/butterfly-400.jpeg" width="1000" height="846"></picture>
Elbette bu eklenti, oluşturulan düzendeki resmin nihai boyutunu ve konumunu bilemediği için geçerli bir sizes özelliği generate ancak işaretlemenizi oluştururken bir girdi olarak kabul eder. Bu, RespImageLint için başka bir iştir.
Çerçeveler
İstemci tarafı oluşturma çerçeveleri, resim öğelerinin kendisini düzenlemek, kodlamak ve sıkıştırmak için Webpack gibi bir görev çalıştırıcı veya paketleyici gerektirir. Örneğin, duyarlı yükleyici, resim öğelerini yeniden kaydetmek için Sharp kitaplığını da kullanır. Daha sonra, resimlerinizi
nesne olarak import.
import imageAVIF from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000&format=avif';
import imageWebP from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000&format=webp';
import imageDefault from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000';
İçe aktarılan bu resimler, daha sonra React'ın Resim bileşeni gibi soyutlamalarla veya duyarlı resim işaretlemenizi doğrudan doldurmak için kullanılabilir:
<picture>
<source type='image/avif' srcSet={imageAVIF.srcSet} sizes='…' />
<source type='image/webp' srcSet={imageWebp.srcSet} sizes='…' />
<img
src={imageDefault.src}
srcSet={imageDefault.srcSet}
width={imageDefault.width}
height={imageDefault.height}
sizes='…'
loading="lazy"
/>
İstemci tarafı oluşturma özelliğini yapan bir çerçeve, Geçkenler ve sizes="auto" için güçlü bir adaydır. Bu sayede neredeyse tamamen otomatik duyarlı resimler elde edersiniz.
İçerik Yönetim Sistemleri
WordPress, yerel duyarlı resim işaretlemenin ilk kullanıcılarından biridir. API, WebP desteği ve çıkış mime türü üzerinde kontrol sağlayarak WordPress 4.4'te kullanıma sunulmasından bu yana kademeli olarak iyileştirilmiştir. WordPress Core, ImageMagick PHP uzantısını (veya bu uzantı yoksa GD kitaplığını) kullanacak şekilde tasarlanmıştır.
WordPress yönetici arayüzü üzerinden bir resim yüklendiğinde, söz konusu kaynak görüntü, yerel makinenizde olduğu gibi sunucuda kullanıcılara yönelik dosyalar oluşturmak için kullanılır. Varsayılan olarak WordPress'in her resim çıkışı, temanızda yapılandırılan resim boyutlarına göre oluşturulmuş bir srcset özelliğiyle birlikte gelir.
Oluşturulan resimler için yapılandırılabilen iki temel ayar, sıkıştırma kalitesi ve çıktı mime türüdür.
Örneğin, oluşturulan tüm resimler için varsayılan sıkıştırma kalitesini 70 olarak ayarlamak üzere aşağıdakileri kullanın:
add_filter( 'wp_editor_set_quality', function() { return 70; } );
Daha iyi bir sıkıştırma için, aşağıdaki adımları uygulayarak yüklenen JPEG resimlerinin çıkış biçimini WebP olarak değiştirin:
add_filter( 'image_editor_output_format', function( $mappings ) {
$mappings[ 'image/jpeg' ] = 'image/webp';
return $mappings;
} );
WordPress, yüklenen bir resimden oluşturduğu tüm alternatif kesimleri ve kodlamaları tam olarak anladığı göz önünde bulundurulduğunda, bir resim ekinin oluşturulan srcset değerini tam olarak almak için wp_get_attachment_image_srcset() gibi yardımcı işlevler sağlayabilir.
Bu noktada tahmin edeceğiniz üzere, sizes özelliğiyle çalışmak biraz daha karmaşıktır. Resimlerin bir düzende nasıl kullanılacağına dair herhangi bir bilgi olmadığında WordPress, şu anda varsayılan olarak "bu resim, en büyük kaynağın doğal boyutuna kadar mevcut görüntü alanının% 100'ünü kaplamalı" şeklinde etkili bir şekilde sizes değerini kullanır. Bu, tahmin edilebilir bir varsayılandır, ancak gerçek dünyadaki herhangi bir uygulama için doğru bir varsayılan değildir. Şablonlarınızda içeriğe uygun sizes özellikleri ayarlamak için wp_calculate_image_sizes() kullandığınızdan emin olun.
Elbette, modern görüntü iş akışlarını hem geliştirme ekipleri hem de kullanıcılar için daha hızlı hale getirmek üzere tasarlanmış sayısız WordPress eklentisi vardır.
Belki de en heyecan verici şey, Jetpack's Site Accelerator (eski adıyla "Photon") gibi eklentiler, kodlamalar için sunucu tarafı pazarlık yaparak kullanıcıların, <picture> ve type işaretleme kalıbına gerek kalmadan tarayıcılarının destekleyebileceği en küçük, en verimli kodlamayı almasını sağlar. Bunu, resim içeriği yayınlama ağını kullanarak yapar. Bu, İYS'nizden bağımsız olarak kendinizden yararlanabileceğiniz bir teknolojidir.
Bunların tümü Shopify gibi barındırılan İYS çözümleri için de geçerlidir ancak mekanizmaların kendileri bir şekilde farklılık gösterecektir: Alternatif resim kaynakları oluşturmak için benzer kancalar ve bunlara karşılık gelen srcset özellikleri ve <picture> öğesi aracılığıyla sanat yönetimi için benzer kancalar sunmak.