วิธีระบุขนาดรูปภาพใน HTML5

โดย Ed Title, Chris Minnick

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



ใช้ส่วนสูงและความกว้างคุณลักษณะที่มี เพื่อให้เบราว์เซอร์รู้ว่ารูปภาพสูงหรือกว้างเพียงใด (หน่วยเริ่มต้นคือพิกเซลหรือพิกเซล):



ทรัมเป็ตทองเหลือง

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



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

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

การใช้ส่วนสูงและความกว้างคุณลักษณะคือการสร้างเส้นสีบนหน้าโดยใช้สี่เหลี่ยมสีขนาดเล็ก ตัวอย่างเช่น มาร์กอัปนี้เพิ่มกล่องสีน้ำเงินขนาด 10-x-10-px ลงในหน้าเว็บ:



 blue box

ใช้ ธาตุส่วนสูงและความกว้างคุณสมบัติเพื่อกำหนดความสูงและความกว้างของภาพ ดังนั้น คุณใช้ค่าเหล่านี้เพื่อสร้างกล่องสีน้ำเงินขนาด 10 x 10 พิกเซลในหน้าต่างเบราว์เซอร์ (แสดงที่ด้านบนของรูป) แม้ว่าภาพต้นฉบับจะมีขนาด 600 x 600 พิกเซล

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

image0.jpg

รูปนี้แสดงกล่องที่มีขนาด 20 x 20 และ 50 x 50 พิกเซล นี่คือการเปลี่ยนแปลงของค่าสำหรับส่วนสูงและความกว้างในมาร์กอัปเพื่อผลิตอีกสองกล่อง:

 blue box  blue box

เมื่อใช้เทคนิคนี้ คุณสามารถเปลี่ยนรูปภาพเดียว เช่น กล่องสีน้ำเงิน (ขนาดเพียง 2.39K) ให้เป็นเส้นต่างๆ หรือแม้แต่กล่องต่างๆ ได้:

  • เทคนิคนี้ช่วยให้มั่นใจได้ว่าตัวแบ่งและองค์ประกอบเส้นขอบอื่นๆ ทั้งหมดบนหน้าเว็บของคุณใช้สีเดียวกัน เนื่องจากทั้งหมดใช้กราฟิกเดียวกัน

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

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

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

image1.jpg

ทรัมเป็ตทองเหลือง

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