เมื่อใดที่ไม่ควรคัดลอกรูปภาพบนเว็บของคุณ [วิดีโอ]

หากต้องการคิดอย่างมีกลยุทธ์เกี่ยวกับเนื้อหาภาพบนเว็บของคุณคุณต้องทำมากกว่าเลือกภาพที่จะใช้ คุณต้องตรวจสอบให้แน่ใจว่าภาพเหล่านั้นใช้ได้กับหน้าจอขนาดใหญ่และเล็ก

หากรูปภาพใช้ได้กับทุกขนาดหน้าจอก็เยี่ยมมาก อัปโหลดไฟล์เดียว (แหล่งเดียวของภาพ) และคุณก็พร้อมใช้งาน

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

Buddy Scalera ผู้อำนวยการอาวุโสฝ่ายกลยุทธ์เนื้อหาของ The Medicines Company กล่าว ในการพูดคุยเกี่ยวกับ Intelligent Content Conference การสร้างและดำเนินกลยุทธ์เนื้อหาภาพที่ปรับขนาดได้บัดดี้บอกเราว่าเขาทั้งหมดมาจากแหล่งเดียว ... ยกเว้นเมื่อเขาไม่ได้ทำ เขาสนับสนุนสิ่งที่เขาและคนอื่น ๆ เรียกว่า "COPE-M) (COPE-M) โดยเฉพาะอย่างยิ่งเมื่อพูดถึงภาพ

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

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

นั่นคือจุดที่ M ใน COPE-M เข้ามา“ แม้ว่าจะเป็นเป้าหมายที่ดีในการเตรียมเนื้อหาของคุณสำหรับการใช้ซ้ำหลายช่อง แต่เนื้อหาทั้งหมดไม่สามารถปรับขนาดได้อย่างมีประสิทธิภาพในรูปแบบ COPE” บัดดี้กล่าว

ในบทความนี้ฉันสรุปคำแนะนำของบัดดี้จากการพูดคุยของ ICC ของเขา รูปภาพทั้งหมดในโพสต์นี้มาจากสไลด์ของเขาและคำพูดทั้งหมดมาจากคำพูดของเขาและจากการสนทนาในภายหลังของฉันกับเขา

เหตุใดจึงยากที่จะคัดลอกบางภาพ

บัดดี้ทิ้งสิ่งที่เขาเรียกว่า "ระเบิดความจริง" เกี่ยวกับรูปภาพ: ไม่เหมือนกับข้อความ

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

ไม่เป็นเช่นนั้นกับภาพ พวกเขาไม่สามารถแยกออกจากรูปลักษณ์ภายนอกได้ สำหรับรูปภาพขนาดเดียวอาจไม่พอดีกับทั้งหมดเสมอไป

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

วิธีคิดเกี่ยวกับรูปภาพหลายแหล่ง

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

เบรกพอยต์คือจุดที่ระบบหยุดดึงภาพหนึ่งและดึงอีกภาพหนึ่งแทนซึ่งจะใหญ่กว่าหรือเล็กกว่าขึ้นอยู่กับความละเอียดของอุปกรณ์ ภาพประกอบนี้แสดงจุดพักที่เป็นไปได้สามจุด: 320 พิกเซลสำหรับโทรศัพท์มือถือ, 720 พิกเซลสำหรับแท็บเล็ตหรือโทรศัพท์ขนาดใหญ่และ 1,024 พิกเซลสำหรับแล็ปท็อป

เบรกพอยต์ถูกกำหนดตามความกว้างของอุปกรณ์เนื่องจากเรามีความสามารถในการเลื่อนในแนวตั้งที่ไม่สิ้นสุด แต่มีความกว้าง จำกัด

บัดดี้อธิบายช่วงเวลาที่หนึ่งในทีมเนื้อหาใน บริษัท ของเขาพิมพ์โบรชัวร์ที่มีกราฟตอบคำถามของแพทย์เกี่ยวกับผลิตภัณฑ์บางอย่าง

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

ในหลาย ๆ กรณีคุณสามารถอัปโหลดรูปภาพขนาดใหญ่หนึ่งภาพไปยังเว็บไซต์ของคุณได้ (หรืออีกนัยหนึ่งคือรูปภาพที่มาจากแหล่งเดียว) และให้เบราว์เซอร์ปรับขนาดให้คุณ ในกรณีอื่น ๆ ภาพแทบจะอ่านไม่ออกเมื่อบีบลงในหน้าต่างหรือหน้าจอขนาดเล็ก เพื่อแสดงให้เห็นถึงประเด็นนี้บัดดี้จะแสดงให้เห็นว่าเกิดอะไรขึ้นเมื่อเบราว์เซอร์ปรับขนาดภาพลูกสาวที่มีความกว้าง 800 พิกเซล:

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

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

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

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

หากต้องการสัมผัสพฤติกรรมนี้ในเบราว์เซอร์ของคุณเองโปรดไปที่หน้าตัวอย่างของ Buddy บนอุปกรณ์ที่ช่วยให้คุณสามารถเปลี่ยนความกว้างของหน้าต่างได้

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

สิ่งสำคัญที่ต้องสังเกต (ดูระหว่างแท็ก "รูปภาพ") คือบัดดี้ได้ระบุแหล่งที่มาสามภาพ:

• GirlsDog_200w.jpg
• GirlsDog_400w.jpg
• GirlsDog_800w.jpg

ไฟล์ JPG แต่ละไฟล์ถูกกำหนดให้กับเบรกพอยต์:

• ความกว้างสูงสุด: 499px
• ความกว้างสูงสุด: 799px
• ความกว้างต่ำสุด: 800px

คุณควรสร้างเบรกพอยต์กี่จุด คุณกำหนดความกว้างสูงสุดและต่ำสุดได้อย่างไร? ไม่มีกฎเกณฑ์ใด ๆ ในบทความที่ยอดเยี่ยมที่ Buddy ชี้ไปที่ Jason Grigsby กล่าวว่า“ การเลือกจุดพักภาพเป็นสิ่งที่ทุกคนต้องเผชิญและตรงไปตรงมาฉันไม่มีคำตอบที่ดีสำหรับคุณ”

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

เป็นที่น่าสังเกตว่าระบบการจัดการสินทรัพย์ดิจิทัล (DAM) บางระบบสามารถสร้างเอาต์พุตหลายภาพในขนาดและอัตราส่วนที่แตกต่างกัน มันจะไม่ทำซ้ำสิ่งที่บัดดี้ทำกับภาพถ่ายแยกกัน แต่คุณควรสำรวจว่าระบบซอฟต์แวร์ของคุณนำเสนออะไร

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

สำหรับสิ่งที่ Buddy กล่าวเพิ่มเติมเกี่ยวกับการสร้างและดำเนินกลยุทธ์ที่ปรับขนาดได้สำหรับเนื้อหาภาพของคุณโปรดดูการนำเสนอ ICC ที่มีคำอธิบายประกอบของเขา

เมื่อใดที่จะใช้หลายแหล่งที่มาของภาพของคุณ

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

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

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

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

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

สรุป

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

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

นี่คือข้อความที่ตัดตอนมาจากคำพูดของ Buddy:

ลงทะเบียนเพื่อรับจดหมายข่าวกลยุทธ์เนื้อหาสำหรับนักการตลาดรายสัปดาห์ของเรา ซึ่งนำเสนอเรื่องราวและข้อมูลเชิงลึกพิเศษจาก Robert Rose หัวหน้าที่ปรึกษาเนื้อหาของ CMI หากคุณเป็นเหมือนนักการตลาดคนอื่น ๆ ที่เราพบเจอคุณจะรออ่านความคิดของเขาทุกวันเสาร์

ภาพปกโดย Joseph Kalinowski / Content Marketing Institute