การสร้างภาพพื้นหลังที่ตอบสนองต่อการปรับขนาด

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

เนื่องจากรูปแบบของเว็บไซต์มีการเปลี่ยนแปลงและมีขนาดหน้าจอแตกต่างกันดังนั้นภาพพื้นหลังเหล่านี้จึงต้องปรับขนาดให้เหมาะสม ในความเป็นจริง "ภาพที่มีลักษณะเป็นของเหลว" เหล่านี้เป็นส่วนสำคัญของเว็บไซต์ที่ตอบสนองต่อความต้องการ (พร้อมด้วยตารางของเหลวและข้อความค้นหาสื่อ) ทั้งสามชิ้นนี้เป็นส่วนสำคัญของการออกแบบเว็บที่ตอบสนองต่อการใช้งานตั้งแต่เริ่มต้น แต่ในขณะที่การเพิ่มภาพอินไลน์แบบตอบสนองในไซต์ได้ค่อนข้างง่าย (ภาพแบบอินไลน์คือกราฟิกที่เข้ารหัสเป็นส่วนหนึ่งของมาร์กอัป HTML) เหมือนกับภาพพื้นหลัง (ซึ่งถูกจัดรูปแบบไว้ในหน้าเว็บโดยใช้คุณสมบัติพื้นหลังของ CSS) ได้ให้ความสำคัญกับนักออกแบบเว็บและนักพัฒนาเว็บแบบเบ็ดเตล็ดเป็นจำนวนมาก Thankfully, การเพิ่มคุณสมบัติ "background-size" ใน CSS ได้ทำให้เป็นไปได้

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

พื้นหลังขนาด: ปก;

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

วิธีใช้ พื้นหลังขนาด: ปก;

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

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

อัปโหลดภาพของคุณไปยังโฮสต์เว็บของคุณและเพิ่มลงใน CSS เป็นภาพพื้นหลัง:

ภาพพื้นหลัง: url (fireworks-over-wdw.jpg);background-repeat: ไม่ซ้ำ;background-position: ศูนย์กลางกลาง;พื้นหลังแนบ: ถาวร;

เพิ่มเบราเซอร์ก่อนหน้า CSS:

- เว็บเบราว์เซอร์ - พื้นหลังขนาด: ปก;-moz- พื้นหลังขนาด: ปก;-o พื้นหลังขนาด: ปก;

จากนั้นเพิ่มคุณสมบัติ CSS:

พื้นหลังขนาด: ปก;

การใช้ภาพที่แตกต่างกันซึ่งเหมาะสมกับอุปกรณ์ต่างๆ

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

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

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