เครื่องมือสร้างเว็บไซต์ เฟรมเวิร์ก และ CMS

ดูวิธีที่ CMS เช่น WordPress และเครื่องมือสร้างเว็บไซต์อื่นๆ ช่วยให้ใช้รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ได้ง่ายขึ้น

แม้ว่าจะมีการปรับปรุงมากกว่าการบันทึกการตัดภาพแต่ละภาพด้วยตนเองและการเพิ่มประสิทธิภาพด้วยตนเองโดยใช้เครื่องมืออย่าง Squoosh.app แต่การบีบอัดรูปภาพอัตโนมัติซึ่งเป็นขั้นตอนในกระบวนการพัฒนามีข้อจำกัดบางประการ ประการแรกคือ คุณอาจไม่สามารถควบคุมรูปภาพที่ใช้ทั่วทั้งเว็บไซต์ได้อย่างเต็มที่เสมอไป รูปภาพบนเว็บที่แสดงแก่ผู้ใช้ส่วนใหญ่นั้นเนื้อหากังวลมากกว่าข้อกังวลเกี่ยวกับการพัฒนาที่อัปโหลดโดยผู้ใช้หรือโปรแกรมแก้ไข แทนที่จะอยู่ในที่เก็บร่วมกับเนื้อหาการพัฒนาอย่าง JavaScript และสไตล์ชีต

ซึ่งโดยทั่วไปแล้วจะต้องมีกระบวนการมากกว่า 1 ขั้นตอนในการจัดการรูปภาพ ได้แก่ งานระดับการพัฒนาสำหรับเนื้อหารูปภาพที่ใช้ในการสร้างและดูแลรักษาเว็บไซต์ เช่น พื้นหลัง ไอคอน โลโก้ และอื่นๆ และอีกรายการเกี่ยวข้องกับชิ้นงานรูปภาพที่สร้างขึ้นจากการใช้งานเว็บไซต์ เช่น ภาพถ่ายที่ฝังอยู่ในโพสต์โดยทีมบรรณาธิการ หรือรูปโปรไฟล์ที่ผู้ใช้อัปโหลด แม้ว่าบริบทอาจแตกต่างกันไป แต่เป้าหมายสุดท้ายจะเหมือนกัน นั่นคือการเข้ารหัสและการบีบอัดอัตโนมัติตามการตั้งค่าที่ทีมพัฒนากำหนด

โชคดีที่ไลบรารีการประมวลผลรูปภาพที่คุณได้เข้าใจจากเวิร์กโฟลว์การพัฒนาในเครื่องสามารถนำไปใช้ได้ในหลายๆ บริบท แม้ว่าจะไม่มีวิธีที่เหมาะสมกับทุกอย่างสำหรับมาร์กอัปรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ แต่ระบบเหล่านี้จะมีค่าเริ่มต้นที่เหมาะสม ตัวเลือกการกำหนดค่า และฮุก API เพื่อช่วยให้ติดตั้งใช้งานได้ง่ายขึ้น

เครื่องมือสร้างไซต์แบบคงที่

เมื่อเทียบกับผู้เรียกใช้งานแล้ว ก็พบว่ามีความคล้ายคลึงกันบางอย่างเกี่ยวกับเครื่องมือสร้างเว็บไซต์แบบคงที่ เช่น รูปภาพวิธีการของ Jekyll หรือ Eleventy การใช้เครื่องมือเหล่านี้เพื่อสร้างเว็บไซต์ที่พร้อมสำหรับการทำให้ใช้งานได้นั้นจะต้องมีการจัดการเนื้อหา ซึ่งรวมถึงการลดขนาด CSS หรือการเปลี่ยนรูปแบบและการรวมกลุ่ม JavaScript คุณอาจคิดว่าเครื่องมือเหล่านี้ช่วยให้คุณสามารถประมวลผลเนื้อหารูปภาพได้ในลักษณะเดียวกันโดยใช้ไลบรารีมากมายที่คุณได้เรียนรู้มาแล้ว

ปลั๊กอินรูปภาพอย่างเป็นทางการสำหรับ Eleventy ใช้ Sharp ในการปรับขนาด สร้างขนาดต้นฉบับหลายขนาด การเข้ารหัสอีกครั้ง และการบีบอัด เช่นเดียวกับงานที่ได้อ่านไป

เครื่องมือสร้างเว็บไซต์แบบคงที่แตกต่างจากเครื่องมือทำงานตรงที่ให้ข้อมูลเชิงลึกโดยตรงทั้งเกี่ยวกับการกำหนดค่าและการใช้งานไลบรารีเหล่านั้น รวมถึงมาร์กอัปที่สร้างขึ้นสำหรับเว็บไซต์เวอร์ชันที่ใช้งานจริง ทำให้เครื่องมือดังกล่าวทำให้มาร์กอัปรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ทำงานโดยอัตโนมัติได้อย่างมาก ตัวอย่างเช่น เมื่อมีการเรียกเป็นส่วนหนึ่งของรหัสย่อสำหรับการแสดงภาพ ปลั๊กอินนี้จะแสดง HTML ตามตัวเลือกการกำหนดค่าที่ส่งไปยัง Sharp

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

จากนั้นสามารถใช้รหัสย่อนี้แทนไวยากรณ์รูปภาพเริ่มต้นได้

{‌% respimg "img/butterfly.jpg", "Alt attribute.", "(min-width: 30em) 800px, 80vw" %}

หากกำหนดค่าให้แสดงผลการเข้ารหัสหลายรายการ ตามที่กล่าวมาข้างต้น มาร์กอัปที่สร้างขึ้นจะเป็นองค์ประกอบ <picture> ที่มีองค์ประกอบ <source>, แอตทริบิวต์ type และแอตทริบิวต์ srcset ที่เกี่ยวข้องพร้อมรายการขนาดตัวเลือกที่สร้างขึ้นอย่างสมบูรณ์แล้ว

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

แน่นอนว่าปลั๊กอินนี้จะไม่สามารถgenerateแอตทริบิวต์ sizes ที่ใช้งานได้ เนื่องจากไม่ทราบขนาดและตำแหน่งสูงสุดของรูปภาพในการจัดวางที่แสดงผล แต่ปลั๊กอินจะยอมรับแอตทริบิวต์หนึ่งเป็นอินพุตเมื่อสร้างมาร์กอัป ซึ่งเป็นงานหนึ่งของ RespImageLint

กรอบการทำงาน

เฟรมเวิร์กการแสดงผลฝั่งไคลเอ็นต์จะต้องมีตัวเรียกใช้งานหรือ Bundler เช่น Webpack เพื่อแก้ไข เข้ารหัส และบีบอัดเนื้อหารูปภาพด้วยตนเอง ตัวอย่างเช่น ตัวโหลดที่ปรับเปลี่ยนตามอุปกรณ์ยังใช้ไลบรารี Sharp เพื่อบันทึกชิ้นงานรูปภาพอีกครั้ง จากนั้นจะให้คุณ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';

รูปภาพที่นำเข้าเหล่านี้จะใช้ผ่านนามธรรม เช่น คอมโพเนนต์รูปภาพของ React หรือเพื่อสร้างมาร์กอัปรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ได้โดยตรง ดังนี้

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

เฟรมเวิร์กที่แสดงภาพฝั่งไคลเอ็นต์เป็นตัวเลือกที่ยอดเยี่ยมสําหรับ Lazysizes และ sizes="auto" ซึ่งทําให้คุณใช้รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์แบบอัตโนมัติได้เกือบทั้งหมด

ระบบจัดการเนื้อหา

WordPress เป็นหนึ่งในผู้ใช้กลุ่มแรกๆ ที่ใช้มาร์กอัปรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์และ API ได้รับการปรับปรุงอย่างค่อยเป็นค่อยไปนับตั้งแต่เปิดตัวใน WordPress 4.4 โดยมีการรองรับ WebP และการควบคุมประเภท MIME เอาต์พุต แกนหลักของ WordPress ออกแบบมาเพื่อใช้ส่วนขยาย ImageMagick PHP (หรือไม่มีไลบรารี GD เลย)

เมื่ออัปโหลดรูปภาพผ่านอินเทอร์เฟซผู้ดูแลระบบ WordPress ระบบจะใช้อิมเมจต้นฉบับดังกล่าวในการสร้างไฟล์ที่แสดงต่อผู้ใช้ในเซิร์ฟเวอร์ในลักษณะเดียวกันกับที่คุณทำในเครื่อง โดยค่าเริ่มต้น เอาต์พุตรูปภาพโดย WordPress จะมาพร้อมกับแอตทริบิวต์ srcset ที่สร้างขึ้นตามขนาดรูปภาพที่กำหนดค่าไว้ในธีมของคุณ

การตั้งค่าหลัก 2 อย่างที่กำหนดค่าได้สำหรับรูปภาพที่สร้างขึ้นคือคุณภาพการบีบอัดและประเภท MIME ของเอาต์พุต

เช่น หากต้องการตั้งค่าคุณภาพการบีบอัดเริ่มต้นเป็น 70 สำหรับรูปภาพที่สร้างขึ้นทั้งหมด ให้ใช้รายการต่อไปนี้

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

เปลี่ยนรูปแบบเอาต์พุตสำหรับรูปภาพ JPEG ที่อัปโหลดเป็น WebP เพื่อการบีบอัดที่ดียิ่งขึ้นไปอีกโดยใช้รายการต่อไปนี้

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

เนื่องจาก WordPress เข้าใจการตัดทางเลือกและการเข้ารหัสทั้งหมดที่สร้างจากรูปภาพที่อัปโหลดอย่างถ่องแท้ จึงให้ฟังก์ชันตัวช่วยอย่างเช่น wp_get_attachment_image_srcset() เพื่อเรียกดูค่า srcset ที่สร้างขึ้นทั้งหมดของไฟล์แนบรูปภาพได้

คุณน่าจะเดาได้เมื่อถึงจุดนี้ การทำงานกับแอตทริบิวต์ sizes จะยุ่งยากมากขึ้นเล็กน้อย ไม่มีข้อมูลเกี่ยวกับการใช้รูปภาพในเลย์เอาต์ ปัจจุบัน WordPress มีค่าเริ่มต้นเป็น sizes ซึ่งบอกได้อย่างมีประสิทธิภาพว่า "รูปภาพนี้ควรใช้พื้นที่ 100% ของวิวพอร์ตที่ใช้ได้ ไปจนถึงขนาดภายในของแหล่งที่มาที่ใหญ่ที่สุด" ซึ่งเป็นค่าเริ่มต้นที่คาดการณ์ได้ แต่ไม่ใช่ค่าเริ่มต้นสำหรับแอปพลิเคชันในชีวิตจริง อย่าลืมใช้ wp_calculate_image_sizes() เพื่อตั้งค่าแอตทริบิวต์ sizes ที่มีบริบทเหมาะสมตามบริบทในเทมเพลต

และแน่นอนว่ามีปลั๊กอิน WordPress มากมายที่ทุ่มเทเพื่อทำให้เวิร์กโฟลว์รูปภาพสมัยใหม่เร็วขึ้นสำหรับทีมพัฒนาและผู้ใช้ เรื่องที่น่าตื่นเต้นที่สุดก็คือ ปลั๊กอินอย่าง Jetpack's Site Accelerator (เดิมคือ "Photon") ช่วยเจรจาการเข้ารหัสแบบฝั่งเซิร์ฟเวอร์ เพื่อให้มั่นใจว่าผู้ใช้จะได้รับการเข้ารหัสที่เล็กและมีประสิทธิภาพที่สุดที่เบราว์เซอร์รองรับได้โดยไม่ต้องใช้รูปแบบมาร์กอัป <picture> และ type ซึ่งดำเนินการผ่านเครือข่ายนำส่งเนื้อหารูปภาพ ซึ่งเป็นเทคโนโลยีที่คุณนำมาใช้ได้ด้วยตัวเองโดยไม่ต้องพึ่ง CMS

ทั้งหมดนี้ก็ถูกต้องสำหรับโซลูชัน CMS ที่โฮสต์ไว้ เช่น Shopify ด้วย แม้ว่ากลไกเองจะแตกต่างกันเล็กน้อย นั่นก็คือการนำเสนอฮุกที่คล้ายกันสำหรับการสร้างแหล่งที่มาของรูปภาพอื่นและแอตทริบิวต์ srcset ที่เกี่ยวข้องและทิศทางศิลปะผ่านองค์ประกอบ <picture>