เป็นเวลาค่อนข้างน้อยตั้งแต่หน้าจอ Retina บนอุปกรณ์ iOS เปิดตัวครั้งแรก แต่ยังมีเว็บไซต์จำนวนมากที่ยังไม่พร้อมใช้งานบนจอประสาทตาแม้ในขณะที่นักออกแบบและนักพัฒนาได้รับความนิยมอย่างแท้จริงบนมือถือ โลกที่เป็นมิตร
นี่คือสิ่งที่คุณต้องรู้เกี่ยวกับตัวเลือกสำหรับการทำให้งานของคุณดูดีที่สุดบนจอแสดงผลเรตินาที่ใช้กันทั่วไปมากขึ้น ข่าวดีก็คือว่ามันดูน่ากลัว แต่ก็ไม่ได้ซับซ้อนอะไร
$config[code] not foundเตรียมเว็บไซต์ของคุณสำหรับรูปภาพที่พร้อมใช้กับ Retina
เพิ่มความสนุกเป็นสองเท่า
ในความเป็นจริงมีหลายวิธีที่คุณสามารถทำให้แมวตัวนี้พูดได้ ในครั้งแรกคุณจะต้องเพิ่มความคมชัดของ CSS สักเล็กน้อยและรวมถึงเวอร์ชันของรูปภาพด้วยความละเอียดปกติสองเท่า CSS จะกำหนดรูปภาพที่จะแสดงตามอุปกรณ์ที่ไซต์ของคุณกำลังดูอยู่
การอัปเดต CSS ที่คุณต้องการจะแตกต่างกันไปขึ้นอยู่กับเบราว์เซอร์เป้าหมายของคุณ แต่ข่าวดีก็คือตอนนี้มันไม่ซับซ้อนอย่างยิ่งและจะง่ายขึ้น เราจะปล่อยการเข้ารหัสที่แท้จริงไว้ให้อีกวันหนึ่ง
สิ่งหนึ่งที่ต้องคำนึงถึง: คุณอาจต้องการพัฒนารูปแบบการตั้งชื่อสำหรับภาพเรตินาของคุณเพื่อให้คุณสามารถเชื่อมโยงรูปภาพทั้งสองเวอร์ชันได้อย่างง่ายดายในกรณีที่จำเป็นต้องแก้ไขในภายหลัง
SVG
อีกวิธีคือ SVG หรือกราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ ตามที่ระบุไว้ชื่อเหล่านี้ถูก จำกัด กราฟิกแบบเวกเตอร์และจะไม่ทำงานกับรูปภาพที่ถ่ายภาพ แต่กราฟิก SVG ไม่จำเป็นต้องใช้ไฟล์ภาพสองไฟล์สำหรับกราฟิกแต่ละรายการในไซต์ของคุณ อีกครั้งมีหลายรูปแบบจากเบราว์เซอร์ไปยังเบราว์เซอร์ดังนั้นคุณจะต้องทำการวิจัยเพิ่มเติมตามความต้องการของคุณ
และตามที่ระบุไว้ข้างต้น SVG อาจไม่สามารถใช้งานได้กับโซลูชันเฉพาะของคุณในเว็บไซต์ส่วนใหญ่เว้นแต่ว่าเว็บไซต์นั้นไม่มีภาพประเภทภาพถ่าย
กำลังดุร้าย
แน่นอนคุณสามารถถ่ายโอนไฟล์ความละเอียดต่ำและเพียงแค่แสดงรูปภาพที่พร้อมใช้กับ Retina เราแนะนำสิ่งนี้สำหรับการใช้งานกับผู้ชมที่กำหนดไว้อย่างแน่นหนาเท่านั้น หากคุณรู้ว่าแบนด์วิดธ์จะไม่เป็นปัญหานี่อาจเป็นเส้นทางที่ถูกต้อง แต่แน่นอนว่าไม่ใช่วิธีปฏิบัติที่ดีที่สุด
โซลูชันการเข้ารหัสอื่น ๆ
ในตอนท้ายของความพยายามและคลื่นความถี่ที่สง่างามคือวิธีการเข้ารหัสที่อาศัยการเปลี่ยนแปลงด้านเซิร์ฟเวอร์ (เช่นรายการไฟล์. htaccess) พร้อมกับการเข้ารหัส PHP และ Javascript
นี่อาจเป็นวิธีที่ดีที่สุดของคุณแม้ว่าความพยายามที่เกี่ยวข้องอาจไม่คุ้มค่ากับโครงการขนาดเล็ก
โดยรวมแล้ววิธีการที่คุณใช้จะขึ้นอยู่กับผู้ชมลักษณะของภาพเว็บไซต์ของคุณและระดับความเชี่ยวชาญด้านเทคนิคของทีมพัฒนาของคุณ มีวิธีแก้ปัญหาที่ดีสำหรับทุกสถานการณ์ ทางออกที่ไม่ดีเพียงอย่างเดียวคือเพิกเฉยจอแสดงผล Retina ทั้งหมด
ถ่ายภาพ NASDAQ ผ่าน Shutterstock
