ประวัติโดยย่อของรูปภาพบนเว็บ

ไม่ว่าคุณจะเรียนรู้เพื่อออกแบบและพัฒนาเว็บได้ไกลแค่ไหน แต่องค์ประกอบ <img> ก็ต้องมีข้อมูลเบื้องต้นเพียงเล็กน้อย เปิดตัวใน Netscape (“Mosaic” ในเวลานั้น) ในปี 1993 และเพิ่มลงในข้อกำหนดของ HTML ในปี 1995 <img> มีบทบาทที่เรียบง่ายแต่มีประสิทธิภาพภายในแพลตฟอร์มเว็บมาอย่างยาวนาน นักพัฒนาซอฟต์แวร์เพิ่มไฟล์ภาพ "แหล่งที่มา" ที่มีแอตทริบิวต์ src และให้ทางเลือกข้อความที่มีแอตทริบิวต์ alt ในกรณีที่ระบบแสดงผลรูปภาพไม่ได้หรือเทคโนโลยีความช่วยเหลือขอตัวเลือกอื่น จากตรงนั้น เบราว์เซอร์มีเพียงงานเดียวคือ รับข้อมูลรูปภาพ แล้วแสดงผลโดยเร็วที่สุด

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

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

รูปภาพในเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์

นอกจากเลย์เอาต์ที่ยืดหยุ่นและการใช้คำค้นหาสื่อ CSS แล้ว "รูปภาพและสื่อที่ยืดหยุ่น" เป็นหนึ่งใน 3 ปัจจัยสำคัญของการออกแบบเว็บที่ตอบสนองตามอุปกรณ์ เพื่อให้รูปภาพมีความยืดหยุ่น นักพัฒนาซอฟต์แวร์จึงเริ่มใช้ CSS เพื่อตั้งค่า max-width: 100% ในรูปภาพ (หรือรูปภาพทั้งหมดทั้งเว็บไซต์) เพื่อบอกเครื่องมือแสดงผลของเบราว์เซอร์เพื่อป้องกันไม่ให้รูปภาพล้นคอนเทนเนอร์หลักด้วยการปรับขนาดลง รูปลักษณ์นี้จะทำงานได้ดีเยี่ยม ลดการปรับขนาดรูปภาพแรสเตอร์ให้มีความต่อเนื่องของภาพ ด้วย CSS 1-2 บรรทัด รูปภาพที่ปรับขนาดลงจะมีลักษณะเหมือนเราได้ระบุแหล่งที่มาของรูปภาพที่ควรแสดงเป็นขนาดดังกล่าวเสมอ เมื่อเครื่องมือแสดงภาพได้รับข้อมูลภาพมากเกินกว่าที่จำเป็นสำหรับพื้นที่ที่ภาพใช้ในการจัดวาง เครื่องมือดังกล่าวจะสามารถตัดสินใจโดยมีข้อมูลประกอบเกี่ยวกับวิธีแสดงภาพที่ลดลง และสามารถทำเช่นนั้นได้โดยไม่ต้องแสดงภาพหรือเบลอใดๆ

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

การใช้ img { max-width: 100% } หมายความว่าเมื่อใช้การปรับขนาดคอนเทนเนอร์ที่ยืดหยุ่น รูปภาพจะถูกลดขนาดลงตามความเหมาะสม นอกจากนี้ยังต่างจากการตั้งค่า width: 100% ที่เคร่งครัดกว่าตรงที่ ซึ่งจะทำให้รูปภาพไม่ปรับขนาดเกินขนาดจริง เป็นเวลานานแล้วที่ว่านี่คือกฎในการทำงานกับรูปภาพ ซึ่งได้แก่ ใช้รูปแบบที่เบราว์เซอร์เข้าใจ ใช้การบีบอัดที่เหมาะสม และไม่ปรับเพิ่มขนาดรูปภาพให้สูงขึ้น

แต่เพราะวิธีการนี้เรียบง่ายและมีประสิทธิภาพ เนื่องจากเป็นวิธีการทำงานที่เห็นได้ชัดเจนอยู่แล้ว ทำให้มีค่าใช้จ่ายที่ส่งผลต่อประสิทธิภาพอย่างมาก เนื่องจาก <img> รองรับแหล่งที่มาของข้อมูลรูปภาพเพียงแหล่งเดียว วิธีการนี้จึงกําหนดให้เราต้องให้ชิ้นงานรูปภาพที่มีขนาดใหญ่เท่ากับขนาดใหญ่สุดที่จะแสดงได้ รูปภาพที่ตั้งใจจะใช้พื้นที่ในเลย์เอาต์อาจเป็นขนาดใดก็ได้ตั้งแต่ 300px ถึง 2000px ความกว้าง ทั้งนี้ขึ้นอยู่กับขนาดวิวพอร์ตของผู้ใช้ ซึ่งจำเป็นต้องมีแหล่งที่มาของรูปภาพที่มีความกว้างภายในอย่างน้อย 2000px สำหรับผู้ใช้ที่ดูหน้าเว็บผ่านวิวพอร์ตขนาดเล็กเท่านั้น ทุกอย่างจะมีลักษณะตามที่คาดไว้ รูปภาพจะปรับปรับขนาดได้ ในหน้าที่แสดงผล รูปภาพต้นฉบับขนาดใหญ่แต่ลดขนาดลงจะดูไม่แตกต่างจากรูปภาพที่มีขนาดเหมาะสม อย่างไรก็ตาม บริษัทยังคงโอนและแสดงภาพขนาด 2000px ขนาดใหญ่ ซึ่งมีการใช้แบนด์วิดท์และพลังในการประมวลผลจำนวนมหาศาลโดยไม่เกิดประโยชน์ที่จับต้องได้

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

ในตัวอย่างนี้ นักพัฒนาซอฟต์แวร์สามารถอาศัยความสามารถของเครื่องมือแสดงผลในการปรับลดขนาดรูปภาพได้อีกครั้ง เมื่อจัดเตรียมรูปภาพต้นฉบับแบบกว้าง 800px ใน src ให้กับเบราว์เซอร์ และระบุว่าควรแสดงมีความกว้าง 400px ด้วย CSS ผลลัพธ์คือรูปภาพที่แสดงผลโดยมีความหนาแน่นของพิกเซลเป็น 2 เท่า ดังนี้

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

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