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

มันมากจริงๆ ธีมที่เรียบง่ายและเราใช้เวลาไม่นานนัก

เพื่อให้รูปภาพของคุณตอบสนอง คุณเพียงแค่ต้องเพิ่มคุณสมบัติ max-width=100% ให้กับรูปภาพเหล่านั้น

ไอจี (
ความกว้างสูงสุด: 100%;
}

ทั้งหมด! ตอนนี้ภาพของเราจะไม่ขยายเกินคอนเทนเนอร์หลักและจะปรับตามความละเอียดของหน้าจอ

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

Img ฝัง วัตถุ วีดีโอ (
ความกว้างสูงสุด: 100%;
}

ทุกอย่างจะเรียบร้อยดี แต่ใช้งานได้เฉพาะใน IE7+ หากคุณต้องการรองรับ IE6 คุณสมบัตินี้จะใช้งานได้ในรายการต่อไปนี้:

ไอจี (
ความกว้าง: 100%;
}

เหล่านั้น. แทนที่จะเป็น max-width ให้เขียน width

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

การแก้ปัญหานี้สำหรับ IE นั้นง่ายมาก

โลโก้ (
พื้นหลัง: ไม่มี;
ตัวกรอง: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/path/to/logo.png",sizingMethod="scale");
}

เหล่านั้น. คุณสมบัติตัวกรองช่วยให้เราแก้ไขปัญหานี้ได้

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

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

เพิ่มรายการต่อไปนี้ในสไตล์ชีตของคุณ:

Img (ความกว้างสูงสุด: 100%; )

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

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

Img (ความกว้างสูงสุด: 50%; )

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

Img, วิดีโอ, ฝัง, วัตถุ (ความกว้างสูงสุด: 100%; )

สิ่งต่างๆ จะซับซ้อนมากขึ้นหากคุณฝังวิดีโอโดยใช้ส่วนขยาย . จากนั้นวิธีการข้างต้นใช้ไม่ได้ที่นี่ คุณจะต้องหันไปใช้ JavaScript หรือโค้ด CSS ที่ฉลาดกว่านี้

หากคุณเลือกตัวเลือกที่สอง คุณจะต้องวางแท็กในคอนเทนเนอร์เพิ่มเติม ตัวอย่างเช่น:

จากนั้นเพิ่มโค้ด CSS ต่อไปนี้:

วิดีโอ ( ความสูง: 0; ตำแหน่ง: สัมพันธ์; ระยะห่างจากขอบด้านล่าง: 56.25%; ) .video iframe ( ตำแหน่ง: สัมบูรณ์; ซ้าย: 0; ด้านบน: 0; ความกว้าง: 100%; ความสูง: 100%; )

ดังที่คุณสังเกตเห็นว่ามีคุณสมบัติ padding-bottom ในโค้ดที่มีค่าแปลก ๆ อยู่ที่ 56.25% สิ่งนี้หมายความว่าอย่างไร? ค่า Padding-bottom ที่ระบุเป็นเปอร์เซ็นต์ จะถูกคำนวณโดยสัมพันธ์กับความกว้างของบล็อก เราได้ตัวเลข 56.25 โดยการกำหนดอัตราส่วนภาพของวิดีโอที่ฝังไว้ (16:9) และหารหมายเลขด้านสั้นด้วยหมายเลขด้านยาว แล้วคูณผลลัพธ์ด้วย 100

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

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

เคล็ดลับนี้คือการตั้งค่าเปอร์เซ็นต์ให้กับช่องว่างภายในขององค์ประกอบ วิธีการนี้ได้รับการเผยแพร่ครั้งแรกในบทความบล็อกเก่า A List Apart แต่ก็ยังใช้งานได้ดี

สมมติว่าคุณมีภาพพื้นหลังขนาด 800 x 450 พิกเซล และคุณต้องการทำให้เป็นพื้นหลังด้วยอัตราส่วนคงที่ที่ 16:9 โค้ดด้านล่างใช้ px สำหรับการเยื้อง แต่จะใช้ได้กับ em เช่นกัน นอกจากนี้ยังมีองค์ประกอบรูป HTML5 เพื่อให้ทำงานได้อย่างถูกต้องในเบราว์เซอร์รุ่นเก่า คุณสามารถใช้ HTML5 shiv ได้

Div.column ( ความกว้างสูงสุด: 800px; ) รูป.อัตราส่วนคงที่ ( padding-top: 56.25%; /* 450px/800px = 0.5625 */ )

Div.column ( /* ภาพพื้นหลังต้องมีความกว้าง 800px */ ความกว้างสูงสุด: 800px; ) figure.fixedratio ( padding-top: 56.25%; /* 450px/800px = 0.5625 */ background-image: url(http: //voormedia.com/examples/north-sea-regatta.jpg); ขนาดพื้นหลัง: ปก; -moz-พื้นหลังขนาด: ปก; /* Firefox 3.6 */ ตำแหน่งพื้นหลัง: กึ่งกลาง;

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

ตัวอย่างเช่น รูปภาพที่มีความกว้าง 800 x 200 พิกเซล (4:1) บนหน้าจอขนาดเล็กที่มีความกว้าง 300 พิกเซล ควรลดลงเหลือ 150 พิกเซล (2:1) เรามานับความสูงและแอตทริบิวต์การเสริมด้านบนกัน:

รูปภาพนี้แสดงอัตราส่วนภาพของภาพพื้นหลังที่มีความกว้างต่างกัน ความชันของกราฟสอดคล้องกับแอตทริบิวต์ padding-top และความสูงเริ่มต้นสอดคล้องกับแอตทริบิวต์ความสูง รหัสผลลัพธ์คือ:

Div.column ( /* ภาพพื้นหลังต้องมีความกว้าง 800px */ ความกว้างสูงสุด: 800px; ) รูป.fluidratio ( padding-top: 10%; /* ความชัน */ ความสูง: 120px; /* ความสูงเริ่มต้น */ พื้นหลัง- รูปภาพ: url(http://voormedia.com/examples/amsterdam.jpg); ขนาดพื้นหลัง: ปก; -moz-พื้นหลัง-ขนาด: ปก; /* Firefox 3.6 */ ตำแหน่งพื้นหลัง: กึ่งกลาง /* Internet Explorer 7 /8 */ )

/* คำนวณอัตราส่วนของเหลวตามสองมิติ (ความกว้าง/ความสูง) */ @mixin Fluid-ratio($large-size, $small-size) ( $width-large: nth($large-size, 1); $width -ขนาดเล็ก: nth($ขนาดเล็ก, 1); $height-large: nth($ขนาดใหญ่, 2); $height-small: nth($ขนาดเล็ก, 2); / ($width-large - $width-small); $height-small - $width-small * $slope; 100%; ; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ ) รูป.fluidratio ( /* องค์ประกอบนี้จะมีอัตราส่วนของเหลวจาก 4:1 ที่ 800px ถึง 2:1 ที่ 300px. */ @ รวมอัตราส่วนของเหลว (800px 200px, 300px 150px); ภาพพื้นหลัง: url (http://voormedia.com/examples/amsterdam.jpg);

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

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

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

ตัวอย่างง่ายๆ: สมมติว่าคุณต้องการให้โลโก้ขนาด 250 x 250 พิกเซลแสดงอย่างถูกต้องบนหน้าจอที่มีความหนาแน่นเป็นสองเท่า ในกรณีนี้ คุณต้องสร้างรูปภาพโลโก้อีกรูปที่มีขนาดเป็นสองเท่าที่คุณต้องการบนหน้าจอ เช่น 500 x 500 พิกเซล

ตอนนี้เราต้องแก้ไขปัญหาหลัก - จะแน่ใจได้อย่างไรว่าการแสดงภาพยังคงเหมือนเดิมอยู่เสมอ เช่น ขนาดของมันคือ 250 x 250 px เสมอ

บางทีอาจมีคนเกิดความคิดที่จะเขียนโค้ด CSS แบบง่าย ๆ ขึ้นมาทันทีบางสิ่งเช่นนี้:

Img (ความกว้างสูงสุด: 250px; )

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

div img (ความกว้างสูงสุด: 250px; )

ข้อเสียของวิธีนี้คืออะไร?

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

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

อย่างไรก็ตามหากคุณต้องการเปลี่ยนการออกแบบไซต์เล็กน้อยขึ้นอยู่กับความเร็วการเชื่อมต่อในฝั่งไคลเอ็นต์คุณสามารถใช้ ยูทิลิตี้พิเศษ Foresight.js โดย Adam Bradley ซึ่งวัดความเร็วในการโหลดรูปภาพขนาด 50K

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

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

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

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

โดยทั่วไป มาร์กอัป HTML สำหรับสคริปต์นี้มีลักษณะดังนี้:

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

สคริปต์นั้นเชื่อมต่อกันโดยการเพิ่มโค้ด:

$(เอกสาร).ready(function())( $(".hisrc").hisrc(); ));

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

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

วิธีที่น่าสนใจในการสร้าง ภาพที่ปรับตัวได้เสนอบริการ Sencha.io Src (ในขณะที่เขียนบทความนี้ยังคงใช้งานได้) ซึ่งไม่ต้องการการตั้งค่าใด ๆ บนเซิร์ฟเวอร์เลย บริการนี้ทำงานบนพื้นฐานพร็อกซี

เพียงใส่คำนำหน้า http://src.sencha.io/ หน้าที่อยู่รูปภาพของคุณในแอตทริบิวต์ src จากนั้น Sencha.io Src จะจัดการส่วนที่เหลือ นี้ บริการฟรีซึ่งแก้ปัญหาได้มากที่สุด เว็บที่ทันสมัยนักออกแบบ

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

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

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

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

กระดาษห่อ img (กว้าง: 100%; )

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

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

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

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

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

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

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

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

ลักษณะเฉพาะคือแทนที่จะใช้ src จะใช้ srcset และใช้สิ่งที่คล้ายกับการสืบค้นสื่อ รูปภาพขนาดเล็กถูกโหลดด้วยความละเอียดน้อยกว่า 319px รูปภาพเฉลี่ยที่มีความละเอียดตั้งแต่ 320px ถึง 480px เป็นต้น

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

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

เพื่อที่จะใช้ประโยชน์จากแท็กนี้ในตอนนี้ คุณต้องใช้สคริปต์ขนาดเล็ก (ระหว่างแท็ก head) picturefill.js

ขณะนี้อุปกรณ์ทั้งหมดควรสนับสนุนโครงสร้างนี้สำหรับเค้าโครงของภาพที่ปรับเปลี่ยนได้ จริงอยู่ ฉันยังไม่ได้ทดสอบบน Mac (ฉันยังไม่มี)

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