ข้ามไปยังเนื้อหาหลัก

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

Divi: ธีม WordPress ที่ใช้ง่ายที่สุด

Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

ขึ้น ดาวน์โหลด 701.000 แล้วDivi เป็นธีม WordPress ที่ได้รับความนิยมมากที่สุดในโลก สมบูรณ์และใช้งานง่ายและมาพร้อมกับเทมเพลตฟรีมากกว่า 62 [แนะนำ]

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

แม้ว่าจะมีให้บริการเพียงไม่กี่ปี แต่จอภาพ Retina คือหนทางแห่งอนาคต ความหนาแน่นของพิกเซลสูงในจอภาพ 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 แบบเดิม

เวกเตอร์ Retina vsraster

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

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

Elementor ช่วยให้คุณสร้างการออกแบบเว็บไซต์ได้อย่างง่ายดายด้วยรูปลักษณ์แบบมืออาชีพ หยุดจ่ายเงินแพงสำหรับสิ่งที่คุณสามารถทำได้ด้วยตัวเอง [ฟรี]

ข้อเสียประการที่สองของการใช้ 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

คุณกำลังมองหาธีมและปลั๊กอิน WordPress ที่ดีที่สุดหรือไม่?

ดาวน์โหลดปลั๊กอินและธีม WordPress ที่ดีที่สุดใน Envato และสามารถสร้างเว็บไซต์ของคุณได้ง่ายๆ ดาวน์โหลดมากกว่า 49.720.000 [EXCLUSIVE]

3 - WP Retina 2x

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

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

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

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

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

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

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

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

ปลั๊กอิน WordPress รายชื่อผู้เขียนแฟนซี

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

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

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

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

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

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

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

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

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

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

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

สร้างร้านค้าออนไลน์ได้อย่างง่ายดาย

ดาวน์โหลดฟรี WooCommerce ปลั๊กอินอีคอมเมิร์ซที่ดีที่สุดในการขายผลิตภัณฑ์ทางกายภาพและดิจิทัลของคุณบน WordPress [แนะนำ]

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

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

สรุป

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

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

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

... 

บทความนี้ประกอบด้วยข้อคิดเห็น 0

แสดงความคิดเห็น

ที่อยู่อีเมล์ของคุณจะไม่ถูกเผยแพร่ ช่องที่ต้องการถูกทำเครื่องหมาย *

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

กลับไปด้านบน