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

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

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

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

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

เครื่องกำเนิดไฟฟ้าบริเวณก่อสร้างแบบคงที่

เมื่อเทียบกับผู้ดำเนินการงาน มีความคล้ายคลึงกันในแง่ของเครื่องมือสร้างเว็บไซต์แบบคงที่ เช่น Jekyll หรือ Eleventy Image การใช้ เครื่องมือเหล่านี้ในการสร้างเว็บไซต์ที่พร้อมสำหรับการติดตั้งใช้งานต้องมีการจัดการชิ้นงาน ซึ่งรวมถึงการลดขนาดหรือการแปลงและรวมกลุ่ม 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>

แน่นอนว่าปลั๊กอินนี้จะไม่สามารถสร้างแอตทริบิวต์ 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';

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

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