วิธีการสร้างภาพเรตินาพร้อมสำหรับเว็บไซต์ของคุณ

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

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

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

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

แต่ก่อนที่คุณจะเริ่มใช้เวลาดู วิธีการติดตั้งธีม WordPress, วิธีการหลายปลั๊กอินที่ฉันควรจะติดตั้งบน WordPress.

งั้นมาทำงานกันเถอะ!

การสร้างไฟล์ภาพหลายไฟล์

เริ่มต้นด้วยพื้นฐาน วิธีที่ง่ายที่สุดในการรองรับโหมด Retina สำหรับเว็บไซต์ของคุณคือ สร้างรูปแบบรูปภาพหลายรูปแบบด้วยความละเอียดที่แตกต่างกัน. ซึ่งหมายความว่าสำหรับความละเอียดแต่ละประเภท (เช่น 1x) คุณต้องสร้างคลิปนั้นในเวอร์ชันความละเอียดสูง (เช่น 2x)

โดยทั่วไปคุณสามารถสร้างไฟล์เดียวกันได้หลายเวอร์ชันและใช้ปลั๊กอินเช่น WP Retina 2x หรือสคริปต์เช่น retina.js เพื่อสร้างเวอร์ชัน "@ 2x" ของแต่ละขนาดรูปภาพโดยอัตโนมัติหรือค้นหารูปภาพ "@ 2x" และแสดง ขนาดที่สอดคล้องกับแต่ละอุปกรณ์

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

ปลั๊กอินเช่น " Retinize It ซึ่งเป็นชุดการทำงานของ Photoshop ที่ช่วยให้คุณปรับแต่งการออกแบบของคุณสำหรับจอภาพ Retina ได้อย่างง่ายดาย หากคุณใช้ Photoshop รุ่นเก่ากว่า (ก่อน CC) คุณสามารถใช้สิ่งต่างๆเช่น " สี่ ซึ่งโดยพื้นฐานแล้วจะทำทุกอย่างที่เครื่องมือ Photoshop Generator ปัจจุบันทำ แต่สำหรับ Photoshop เวอร์ชันเก่ากว่า

กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ (SVG)

วิธีที่ง่ายที่สุดในการใช้โหมด Retina คือการใช้ Scalable Vector Graphics (SVG) บนเว็บไซต์ของคุณ SVG เป็นรูปแบบภาพเวกเตอร์ที่ใช้ XML ตามชื่อที่แนะนำภาพ SVG สามารถปรับขนาดได้ซึ่งหมายความว่าสามารถยืดภาพได้ไกล (หรือน้อยที่สุด) ตามต้องการในขณะที่ยังคงความคมชัด อาจเป็นวิธีที่ง่ายและรวดเร็วสำหรับคุณในการใช้งาน Retina Mode โดยไม่ต้องใช้ความพยายามมากนัก

อ่าน: วิธีให้ภาพ WebP แทน PNG และ JPG แบบเดิม

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

ข้อเสียประการที่สองของการใช้ SVG บน WordPress คือไม่ใช่รูปแบบที่เข้ากันได้อย่างเป็นทางการกับ WordPress เนื่องจากปัญหาด้านความปลอดภัย เนื่องจากไฟล์ SVG เป็นไฟล์ XML เป็นหลักสิ่งนี้จึงเปิดขึ้นมา ช่องโหว่ที่รู้จักทั้งหมดที่เกี่ยวข้องกับรูปแบบไฟล์ XMLเช่นการวิเคราะห์แบบบีบบังคับ, XML External Entity Attacks (XEE), การโจมตี XML Denial of Service Attack (XDoS) เป็นต้น

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

วิธีเปิดใช้งาน SVG อย่างปลอดภัยบน WordPress

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

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

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

ปลั๊กอินบางตัวเพื่อรวมความเข้ากันได้กับ Retina เข้ากับ WordPress

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

1 - เรตินา js

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

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

ดูเพิ่มเติมที่: GIF, Emojis หรือ Memes: เป็นความคิดที่ดีสำหรับเว็บไซต์ WordPress ใช่ไหม

2 - หนาแน่น

คล้ายกับ retina.js หนาแน่น เป็นปลั๊กอิน jQuery ที่นำเสนอวิธีง่ายๆในการแสดงภาพในรูปแบบอัตราส่วนพิกเซล สคริปต์เรียกวิธีการเริ่มต้น $ .fn.dense () ซึ่งกำหนดเป้าหมายแท็ก "img" ที่จะใช้เป็นภาพที่เข้ากันได้กับโหมด Retina ตามต้องการ

ดังนั้นจึงเป็นการแทนที่รูปภาพทั้งหมดด้วยเวอร์ชันความละเอียดสูงเช่นเดียวกับสคริปต์ retina.js

3 - WP Retina 2x

หลังสามารถเปรียบได้กับเครื่องสร้างภาพเรตินาที่มีมนต์ขลัง

WP Retina 2x เป็นปลั๊กอินที่สร้างไฟล์ภาพที่ต้องการโดยอุปกรณ์ High-DPI และแสดงต่อผู้เยี่ยมชมของคุณ ไม่เหมือนกับสองสคริปต์ก่อนหน้านี้คือสร้างภาพที่มีความละเอียดแตกต่างกันจากภาพเริ่มต้น ดังนั้นหากคุณไม่พอใจกับการสร้างภาพด้วยตนเองด้วยความละเอียดที่แตกต่างกันตัวเลือกนี้เหมาะสำหรับคุณ

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

ค้นพบปลั๊กอิน WordPress พรีเมียมบางอย่าง  

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

เราเสนอปลั๊กอิน WordPress พรีเมี่ยมให้คุณที่นี่ซึ่งจะช่วยคุณได้

1 รายชื่อผู้แต่ง Fancy WordPress

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

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

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

2. สารบัญง่าย ๆ

Ce WordPress ปลั๊กอิน ใช้งานง่ายช่วยให้คุณสามารถแทรกสารบัญในโพสต์ หน้า และประเภทโพสต์ที่กำหนดเอง มีคุณสมบัติมากมาย โดยหลักๆ คือ

การจัดการสารบัญอัตโนมัติรองรับแท็ก , การสนับสนุนปลั๊กอิน Rankin Math, ความเข้ากันได้กับโปรแกรมแก้ไขเพจต่างๆเช่น Gutenberg, Divi, Elementor, ตัวสร้างหน้าเว็บ WPBakery และอื่น ๆ ความเป็นไปได้ในการเลือกหน้าสิ่งพิมพ์ที่คุณต้องการแสดงการแทรกสารบัญอัตโนมัติในบางหน้าและอื่น ๆ อีกมากมาย

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

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

3 การแก้ไขเป็นกลุ่มขั้นสูงของ WooCommerce

คุณแก้ไขแคตตาล็อกสินค้าของคุณเป็นประจำหรือไม่? ไม่ว่าคุณจะมีสินค้า 100 ชิ้น หรือ 10.000 ชิ้นก็ตามนี้ WordPress ปลั๊กอิน พรีเมี่ยมอยู่ในความเห็นต่ำต้อยของฉัน "ต้องมี": (นั่นคือคำแรกที่นึกถึง)

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

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

ทรัพยากรที่แนะนำ

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

• แหล่งการจราจร 5 คุณอาจจะรู้
• กรณีศึกษา: การตลาดเนื้อหาวิธีการเรียนรู้จากความผิดพลาด
• เหตุใดคนทำงานอิสระจึงต้องมีตารางประจำวัน
• ด้าน 7 ที่จะช่วยให้คุณสร้างบล็อกที่ประสบความสำเร็จ

สรุป

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

อย่างไรก็ตามคุณสามารถปรึกษาได้ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเรา การสร้างบล็อก WordPress

หากคุณมีข้อเสนอแนะหรือข้อสังเกตไว้ในส่วนของเรา ความเห็น.

...