Site Oluşturma Aracı, Çerçeve ve İçerik Yönetim Sistemi

WordPress gibi içerik yönetim sistemlerinin ve diğer site oluşturma araçlarının bunu nasıl başarabileceğini keşfedin ve duyarlı resimleri kullanmak artık daha kolay.

Kesimlerin her birinin alternatif versiyonlarını manuel olarak kaydetmek ve Squoosh.app, geliştirme sürecinin bir adımı olarak resim sıkıştırmayı otomatikleştirmenin bazı sınırlamaları vardır. Birincisi, bir sitede kullanılan resimler üzerinde her zaman tam denetime sahiptir. Web'de kullanıcının gördüğü çoğu görsel içerikle daha çok ilgilidir. kullanıcılar veya editörler tarafından yüklenen videolardır. Geliştirme öğeleri ile birlikte bir depoda yaşamak yerine, JavaScript ve stil sayfaları.

Bu durum genellikle resim yönetimi için birden fazla işlem gerektirir: resim öğeleri için geliştirme düzeyinde bir görev. Bir site (arka planlar, simgeler, logolar vb.) oluşturup sürdürmenin yanı sıra kullanım aracılığıyla oluşturulan resim öğeleriyle ilgili başka bir konu (ör. editoryal ekip tarafından paylaşılan bir yayına yerleştirilen fotoğraflar veya kullanıcı tarafından yüklenen bir avatar). Bağlam aynı olan nihai hedeflerin aynı olduğunu unutmayın: geliştirme ekibi tarafından tanımlanan ayarlara dayalı 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ı, dilediğiniz sayıda kullanılabilir irdeleyelim. Duyarlı resim işaretlemeniz için hiçbir zaman herkese uyan tek bir yaklaşım söz konusu olmasa da bu sistemler, API kancalarını kullanarak bunların uygulanmasını kolaylaştırmak için varsayılanları, yapılandırma seçeneklerini ve API kancalarını kullanabilirsiniz.

Statik Site Oluşturucular

Görev yürüten kullanıcılara kıyasla Jekyll veya Eleventy gibi statik site oluşturucuların görsellere yaklaşımı konusunda bazı benzerlikler var. Kullanım Dağıtıma hazır bir web sitesi üretmek için bu araçların CSS küçültme veya dönüştürme ve paketleme dahil olmak üzere öğe yönetimini gerektiren yardımcı olur. Tahmin edebileceğiniz gibi bu, söz konusu araçların çoğu kitaplığı kullanarak resim öğelerini aynı şekilde işlemenize olanak tanır. ele alacağız.

Eleventy için resmi resim eklentisi, burada öğrendiğiniz bazı görevlerde olduğu gibi yeniden boyutlandırma, birden fazla kaynak boyutu oluşturma, yeniden kodlama ve sıkıştırma için Sharp'ı kullanır.

Görev çalıştırıcıların aksine, statik site oluşturma aracı hem bu kitaplıkların hem yapılandırma hem de kullanım ve üretim sitesi için oluşturulan işaretleme. Yani duyarlı görsellerimizi otomatikleştirmek için çok daha fazlasını yapabiliriz. işaretleme. Örneğin, resimleri görüntüleme kısa kodunun parçası olarak çağrıldığında bu eklenti, HTML dosyasını ve Sharp'a iletilen yapılandırma seçeneklerine göz atın.


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);
};

Bu kısa kod, daha sonra 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ı almak üzere yapılandırılırsa oluşturulan işaretleme aşağıdakileri içeren bir <picture> öğesi olur: karşılık gelen <source> öğeleri, type özellikleri ve srcset özellikleri zaten oluşturulmuş aday boyutlarıdır.

<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>

Bu eklenti nihai boyutu ve konumu bilemediği için tabii ki bu eklenti geçerli bir sizes özelliği oluşturamaz. ancak işaretlemenizi oluştururken birini giriş olarak kabul eder; RespImageLint için başka bir iş.

Çerçeveler

İstemci tarafı oluşturma çerçeveleri resim öğelerini düzenlemek, kodlamak ve sıkıştırmak için Webpack gibi bir görev yürütücü veya paketleyici gerektirir. . Örneğin, Duyarlı-yükleyici, resim öğelerini yeniden kaydetmek için Sharp kitaplığını da kullanır. Bu sayede ardından 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, React'in Resim bileşeni gibi soyutlamalarla veya duyarlı reklamlarınızı doldurmak için kullanılabilir doğrudan resim işaretlemeyi kullanabilirsiniz:

<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 yapan bir çerçeve, Lazysizes ve sizes="auto" için güçlü bir adaydır ve size neredeyse Otomatik duyarlı resimler.

İçerik Yönetim Sistemleri

WordPress, yerel duyarlı resim işaretlemenin ilk kullanıcılarından biriydi ve API o zamandan beri kademeli olarak iyileştirildi WebP desteği ve çıkış mime türü üzerinde kontrol sağlayarak WordPress 4.4'te kullanıma sunulmaktadır. WordPress çekirdeği, ImageMagick PHP uzantısından yararlanacak şekilde tasarlanmıştır. (veya bu olmadığında GD kitaplığı).

WordPress yönetici arayüzünden bir görüntü yüklendiğinde, söz konusu kaynak resim, web üzerinde kullanıcılara yönelik dosyalar oluşturmak için Tıpkı yerel makinenizde yaptığınız gibi. Varsayılan olarak, WordPress tarafından sunulan tüm resim çıktıları temanızda yapılandırılan resim boyutlarına göre oluşturulmuş bir srcset özelliği ile değiştirin.

Üretilen resimler için yapılandırılabilecek iki temel ayar, sıkıştırma kalitesi ve çıkış mime türü'dür.

Örneğin, oluşturulan tüm resimlerde varsayılan sıkıştırma kalitesini 70 olarak ayarlamak için şunu kullanın:

add_filter( 'wp_editor_set_quality', function() { return 70; } );

Daha iyi bir sıkıştırma için, yüklenen JPEG resimlerinin çıkış biçimini aşağıdakileri kullanarak WebP'ye dönüştürün:

add_filter( 'image_editor_output_format', function( $mappings ) {
  $mappings[ 'image/jpeg' ] = 'image/webp';
    return $mappings;
} );

WordPress'in tüm alternatif kesme dönemlerini tam olarak anladığı düşünülürse kodlarla yüklü olduğu varsayıldığında, "E" gibi yardımcı işlevler wp_get_attachment_image_srcset() - bir resim ekinin oluşturulan tam srcset değerini alma.

Bu noktada tahmin edeceğiniz üzere, sizes özelliğiyle çalışmak biraz daha zahmetli bir süreçtir. Herhangi bir bilgi eksik WordPress şu anda resimlerin bir düzende nasıl kullanılacağına dair varsayılan olarak sizes değerine "bu resmi en büyük kaynağın yerleşik boyutuna kadar, kullanılabilir görüntü alanının% 100'ünü kaplamalıdır" [bu, öngörülebilir bir varsayılandır ancak doğru değildir tek bir kod vardır. wp_calculate_image_sizes() kullanarak şablonlarınızda bağlam açısından uygun sizes özellikler ayarlayın.

Elbette geliştirme ekipleri ve kullanıcılar için modern görüntü iş akışlarını daha hızlı hale getirmeye yönelik sayısız WordPress eklentisi vardır. Belki de en heyecan vericisi Jetpack's Site Accelerator (eski adıyla "Photon") gibi eklentiler kodlamalar için sunucu tarafı görüşme sağlayarak kullanıcıların en küçük ve en verimli kodlamayı almasını sağlayabilirsiniz. tarayıcı, <picture> ve type işaretleme kalıbına gerek kalmadan destek sunabilir. Bunu yapmak için bir resim içeriği yani İYS'nizden bağımsız olarak kullanabileceğiniz bir teknolojidir.

Tüm bunlar Shopify gibi barındırılan İçerik Yönetim Sistemi çözümleri için de geçerlidir. Ancak mekanizmalar biraz farklılık gösterir: benzer ürün sunmak alternatif resim kaynakları ve karşılık gelen srcset özellikleri oluşturmak için kancalar ve <picture> öğesi aracılığıyla poster yönü.