รูปภาพที่ตอบสนองตามศิลปะโดยอัตโนมัติ? ที่นี่คุณไป

ในหลายโครงการ รูปภาพที่ตอบสนองไม่ได้เป็นปัญหาทางเทคนิคแต่เป็นปัญหา เชิงกลยุทธ์ การแสดงภาพที่แตกต่างกันไปยังหน้าจอต่างๆ เป็นไปได้ในทางเทคนิคด้วย srcset และขนาด และองค์ประกอบ <picture> และ Picturefill (หรือ polyfill ที่คล้ายกัน) แต่รูปภาพทั้งหมดจะต้องสร้าง ปรับแต่ง และหลอมรวมเข้ากับตรรกะของ CMS ที่มีอยู่ และนั่นไม่ใช่เรื่องง่าย

ยิ่งไปกว่านั้น มาร์กอัปรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์จะต้องสร้างและเพิ่มลงใน HTML เช่นกัน และหากมีรูปแบบรูปภาพใหม่เข้ามาเล่นในบางจุด (เช่น รูปแบบไฟล์ เช่น WebP หรือรูปแบบแนวนอน/แนวตั้งขนาดใหญ่) มาร์กอัปจะมี ที่จะปรับปรุง ปริมาณงานพิเศษที่ต้องใช้มักจะทำให้เกิดปัญหา ดังนั้นหากคุณมีช็อตผลิตภัณฑ์ที่สมบูรณ์แบบ คุณต้องสร้างตัวเลือกต่างๆ ด้วยตนเองสำหรับมือถือและแนวตั้งและแนวนอนและมุมมองที่ใหญ่ขึ้น หรือสร้างปลั๊กอินและส่วนขยายเพื่อทำให้กระบวนการเป็นไปโดยอัตโนมัติ

บางครั้งวิธีแก้ปัญหาก็ใช้ได้ดีเช่นกัน หนึ่งในนั้นคือภาพที่บีบอัด ซึ่งเป็นเทคนิคที่ชาญฉลาดซึ่งแสดงให้เห็นว่า ระดับการบีบอัดสร้างความแตกต่างได้ มากกว่าขนาดทางกายภาพ ดังนั้น ในคำพูดของ Scott Jehl "จากภาพที่เหมือนกันสองภาพที่แสดงในขนาดเดียวกันบนเว็บไซต์ ภาพหนึ่งอาจมีขนาดเล็กกว่าขนาดไฟล์อื่นๆ อย่างมาก หากภาพมีการบีบอัดสูงและมีขนาดใหญ่กว่าที่แสดงอย่างมาก ”

อ่านเพิ่มเติม เกี่ยวกับ SmashingMag:

• รูปภาพที่ตอบสนองอย่างง่ายด้วยรูปภาพพื้นหลัง CSS
• ทำให้รูปภาพที่ตอบสนองของคุณเป็นอัตโนมัติด้วย Mobify.js
• วิธีแก้ไขรูปภาพที่ปรับเปลี่ยนได้ในการออกแบบเว็บที่ตอบสนอง
• รูปภาพที่ตอบสนองใน WordPress พร้อม Art Direction
  

โดยพื้นฐานแล้ว เราสามารถขยายภาพที่กำหนด บันทึกด้วยคุณภาพที่แย่ที่สุดใน Photoshop และปล่อยให้เบราว์เซอร์ทำการปรับขนาด โดยเฉลี่ยแล้ว รูปภาพจริงที่ส่งลงเครือข่ายจะมีขนาดใหญ่กว่า แต่ มีขนาดเล็กกว่าประมาณ 50–65% ขนาดไฟล์ ทีนี้ มันค่อนข้างแตกต่าง และใช้งานได้จริงในโครงการ

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

ปีศาจอยู่ใน… แบ็คเอนด์!

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

"การครอบตัด" เป็นเรื่องที่ยุ่งยาก และหากคุณสามารถปรับขนาดภาพโดยไม่มีทิศทางของภาพได้อย่างสมบูรณ์ และอนุญาตให้เบราว์เซอร์เลือกภาพที่รู้สึกว่าเหมาะสมที่สุด จะไม่ยุ่งยากมาก — คุณทำได้ ใช้ ImageMagick หรือเครื่องมือแก้ไขรูปภาพอื่นๆ สำหรับการปรับขนาด หรือปลั๊กอิน CMS สามารถดูแลให้คุณได้ เช่น Mobify.js API, Responsive Images ใน WordPress core และมีวิธีแก้ปัญหาสำหรับ Drupal ด้วย

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

ดังนั้นตัวเลือกคืออะไร?

เราสามารถเรียกใช้การประมวลผลแบบกลุ่มผ่านการเติมการรับรู้เนื้อหาใน Photoshop หรือใช้เครื่องมือเช่น Smartcrop.js ซึ่งเป็นการใช้งานที่ค่อนข้างง่ายในการ ครอบตัดรูปภาพที่รับรู้เนื้อหา ด้วย JavaScript เป็นไปได้ที่เรายังสามารถรวม smartcrop-cli (พร้อมกับ ImageOptim-CLI) เข้ากับกระบวนการสร้างเสียงฮึดฮัดและอึกของเราและครอบตัดรูปภาพได้ทันที คุณสามารถใช้ imgix กับการครอบตัดจุดสนใจอัตโนมัติได้ นั่นเป็นการเริ่มต้นที่ดีอยู่แล้ว แต่เราจำเป็นต้องเขียนมาร์กอัปสำหรับตัวแปรเหล่านั้นทั้งหมดด้วยตนเอง

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

ตามที่ Eric Portis อธิบายในบทความของเขา เมื่อใช้ Cloudinary API คุณสามารถระบุ crop_mode ซึ่งอนุญาตให้คุณเลียนแบบ background-size: cover ใน CSS นอกจากการระบุความสูงและความกว้างแล้ว คุณยังสามารถระบุจุดโฟกัสโดยใช้พารามิเตอร์ gravity ปัจจัยการซูม และอัตราส่วนกว้างยาวของวัสดุ ซึ่งจะทำให้ URL อ่านง่ายขึ้นเล็กน้อย อันที่จริง API รองรับการตรวจจับใบหน้า ดังนั้นหากรูปภาพของคุณมีใบหน้ามนุษย์ ทิศทางศิลปะก็สามารถทำได้โดยอัตโนมัติโดยมีความเป็นไปได้สูงที่จะครอบตัดที่เหมาะสม

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

สรุป

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

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