จัดการความละเอียดของภาพดิจิทัล วิธีนำไปใช้งานบน Website

ปรับปรุงล่าสุด 30 มิ.ย. 2566, 15:52 46 ครั้ง
เรียบเรียงโดย กฤติเดช ฉายจรุง

ปัญหาใหญ่ ! ระหว่าง Programer Web Design และ Graphic Designer

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

เทคนิคจัดการกับความละเอียดของภาพดิจิตอล

ภาพสไลด์คือผลการค้นหาที่เป็นสื่อสมบูรณ์ในรูปแบบลิสต์รายการซึ่งผู้ใช้เลื่อนดูในอุปกรณ์เคลื่อนที่ได้ โดยจะแสดงการ์ดต่างๆ จากเว็บไซต์เดียวกัน (เรียกอีกชื่อว่าภาพสไลด์ของโฮสต์) หากต้องการให้เว็บไซต์ของคุณมีสิทธิ์แสดงผลการค้นหาที่เป็นริชมีเดียแบบภาพสไลด์ ให้เพิ่ม Structured Data ItemList ร่วมกับประเภทเนื้อหาที่รองรับแบบใดแบบหนึ่งต่อไปนี้

อัตราส่วนภาพทั่วไปอย่าใส่ใจความละเอียดค่า dpi ควรคิดถึงสิ่งสำคัญดังนี้

คุณภาพในการแสดงผล / เพื่อลดปัญหาการตรวจสอบคุณภาพ SEO

ปฏิบัติตามหลักเกณฑ์ แนะนำสำหรับประเภทเนื้อหาที่เกี่ยวข้องกับภาพสไลด์ มีดังนี้

ภาพรวมของวิธีการเพิ่มข้อมูลที่มีโครงสร้างลงในเว็บไซต์ ดูคำแนะนำทีละขั้นตอนเกี่ยวกับวิธีเพิ่ม Structured Data ลงในหน้าเว็บได้ใน Codelab สำหรับ Structured Data เลือกหน้าเว็บที่จะมีข้อมูลที่มีโครงสร้างของภาพสไลด์ ซึ่งมี 2 ตัวเลือกดังนี้

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

เนื้อหาที่เกี่ยวข้อง "ทำอย่างไรเว็บไซต์ของคุณจะแสดงผลอยู่ในอันดับที่ดีของ Google Search"

ขนาดรูปภาพทั่วไปสำหรับเว็บ

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

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

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

อัตราส่วนภาพที่ต่างกัน จะส่งผลแตกต่างกันกับภาพที่ถูกใช้ ภาพที่มีอัตราส่วนภาพ 1:1 เทียบกับอัตราส่วนภาพ 5:4 จะเปลี่ยนองค์ประกอบและวิธีการรับรู้รูปภาพ

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

หมายเหตุ * 16:9 หรือ 9:16 เป็นอัตราส่วนสำหรับ Video เราเอามาดัดแปลงได้เช่นกัน

อัตราส่วนภาพ 1:1

อัตราส่วนภาพ 1:1 หมายความว่าความกว้างและความสูงของรูปภาพเท่ากัน ทำให้เกิดรูปสี่เหลี่ยมจัตุรัส อัตราส่วนภาพ 1:1 ทั่วไปบางส่วนคือรูปภาพขนาด 8″x8″, รูปภาพขนาด 1080 x 1080 พิกเซล หรือโดยทั่วไปแล้วเทมเพลตรูปภาพโปรไฟล์ใด ๆ ก็ตามบนเว็บไซต์ในโซเชียลมีเดีย อัตราส่วนภาพนี้มักถูกใช้สำหรับภาพถ่ายที่พิมพ์ออกมา หน้าจอมือถือ และแพลตฟอร์มโซเชียลมีเดีย แต่ไม่เหมาะสำหรับทีวีหรือรูปแบบดิจิทัลส่วนใหญ่

อัตราส่วนภาพ 3:2

อัตราส่วนภาพ 3:2 มีรากฐานมาจากภาพยนตร์ 35 มม. และภาพถ่าย และยังคงถูกใช้กันอย่างแพร่หลายสำหรับขนาดงานพิมพ์ รูปภาพที่มีขนาด 1080 x 720 พิกเซลหรือ 6 x 4 นิ้วถูกตั้งค่าไว้ในอัตราส่วนภาพนี้

อัตราส่วนภาพ 5:4

สุดท้ายแต่ไม่ท้ายสุด อัตราส่วนภาพนี้พบได้บ่อยในภาพถ่ายและงานพิมพ์ศิลปะ และกล้องฟิล์มขนาดใหญ่และขนาดกลาง เมื่อพิมพ์ภาพขนาด 8″x10″ และ 16″x20″ คุณจะต้องใช้อัตราส่วนภาพ 5:4

ไฟล์ภาพยิ่งละเอียด ยิ่งดี คือ ความคิดผิดๆ ของสาย Web Design
สิ่งสำคัญ ขนาดรูปภาพ ควรแสดงผล 100% ของขนาดหน้าจออุปกรณ์ หรือแปลงไฟล์ เป็นหลักสำคัญ โดยมีมาตราฐานดังนี้

1920 x 1080 พิกเซล

ขนาดรูปภาพมาตรฐานนี้มีให้เห็นอย่างแพร่หลายในทีวีที่มีความคมชัดสูง งานนำเสนอ และภาพถ่ายออนไลน์บนโซเชียลมีเดีย มันเป็นไปตามอัตราส่วนภาพ 16:9

1280 x 720 พิกเซล

ขนาดนี้เป็นไปตามรูปแบบ HD มาตรฐานในภาพถ่ายและภาพยนตร์ ซึ่งพอดีกับอัตราส่วนภาพ 16:9

1080 x 1080 พิกเซล

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

เทคนิคจัดการกับความละเอียดของภาพดิจิตอล

Resolution ความละเอียด คือ ความหนาแน่นของพิกเซล กล่าวคือ จำนวนพิกเซลใน 1 นิ้ว (dpi)
วิธีการคิดความละเอียด บนจอภาพ มีลักษณะ แตกต่างกันออกไป
ในการแสดงผล บนจอ 15 นิ้ว ส่วนมากจะกำหนดความละเอียด 600 x 800 pixels หรือ 72 dpi โดยประมาณ
ในการแสดงผล บนจอ 17 นิ้ว กำหนดความละเอียด 1024 x 768 pixels หรือ 92 dpi โดยประมาณ

ภาพขนาด 600 x 1200 pixels เมื่อพิมพ์ ด้วยความละเอียด 150 dpi จะได้ภาพ ขนาดเท่าไหร่

150 จุด = 1 นิ้ว
600 จุด = 1x 600 / 150 = 4 นิ้ว
1200 จุด = 1x 1200 / 150 = 8 นิ้ว

กรณี จอที่ฉาย บน Projector ก็เปลี่ยนไปตามระยะ ห่างจากโปรเจคเตอร์ ถึง จอรับภาพ

ขนาดไฟล์ ซึ่งวัดเป็นไบต์ (กิโลไบต์, เมกะไบต์)
ขนาด คือ ความกว้าง x ความสูง ในหน่วยการวัด คือ พิกเซลสำหรับรูปภาพดิจิทัล | นิ้วหรือเซนติเมตรสำหรับงานพิมพ์
ความละเอียด ซึ่งวัดเป็นจุดต่อนิ้วสำหรับงานพิมพ์ (DPI) และ พิกเซลต่อนิ้วสำหรับภาพดิจิทัล (PPI)
สิ่งที่ต้องคำนึก คือ ความรวดเร็วในการแสดงผล การลด Image size การวางแผนจำนวนภาพในการแสดงผล และการ Load ภาพจากแหล่งข้อมูลเดียวกันเพื่อประหยัดแคช Memory
คำนึกถึงความคมชัดในระดับการใช้งาน ต่อ ขนาดจอภาพ สัดส่วนคือสิ่งสำคัญ (ขนาดภาพ >= ขนาดจอภาพ บวก/ลบ 30 px

ขั้นตอนการเลือกประเภท กำหนดคุณสมบัติ

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

อัตราส่วนวิดีโอ

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

อัตราส่วนภาพ 16:9

ส่วนใหญ่จะเห็นอัตราส่วนภาพ 16:9 บนสไลด์การนำเสนอ หน้าจอคอมพิวเตอร์ หรือทีวีจอกว้าง มาตรฐานสากลนี้เพิ่งมาแทนที่อัตราส่วนภาพ 4:3 สำหรับจอภาพและหน้าจอทีวี โดยสร้างรูปร่างสี่เหลี่ยมที่บางกว่าและยาวกว่าเมื่อเทียบกับรูปแบบ 4:3 ความละเอียดทั่วไปในอัตราส่วนภาพ 16:9 คือ 1920 x 1080 พิกเซล และ 1280 x 720 พิกเซล

อัตราส่วนภาพ 9:16

อัตราส่วนแบบผกผันของอัตราส่วนภาพ 16:9 คืออัตราส่วน 9:16 ซึ่งนิยมใช้สำหรับแพลตฟอร์มโซเชียลมีเดียที่มีความสามารถในการสร้างเรื่องราวผ่านวิดีโอ เช่น Instagram, Facebook และ Snapchat ขนาดทั่วไปที่นิยมมากที่สุดในอัตราส่วนภาพนี้คือ 1080×1920 พิกเซล ซึ่งเท่ากับขนาดหน้าจอในแนวตั้งของสมาร์ทโฟน

เรียนรู้ SEO เนื้อหาการทำงานของ Google Searech เพื่อการปรับแต่งภาพถ่าย วิดีโอที่มีคุณภาพและเหมาะสม

SEO คืออะไร ทำไมเราต้องใสใจ

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

ปรับปรุงลักษณะที่เว็บไซต์ปรากฏใน Google

หากเข้าใจพื้นฐานของ SEO ดีอยู่แล้ว ยังมีอะไรอีกมากที่คุณสามารถทำเพื่อปรับปรุงลักษณะที่เว็บไซต์ปรากฏใน Google ดังนี้

ตรวจสอบประสิทธิภาพด้วย Search Console

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

จองวันและเวลา ขอสาธิต Solution รายละเอียดเพิ่มเติม