ดูวิธีที่ 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>