เลือกขนาดภาพที่มีประโยชน์สำหรับการแสดงที่มีความหนาแน่นสูง

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

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

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

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

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

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

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