วิธีปรับขนาดรูปภาพสำหรับเว็บ

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

เหตุใดเราจึงปรับขนาดรูปภาพสำหรับเว็บ

เราต้องการทำให้รูปภาพดูดีบนหน้าจอและดาวน์โหลดอย่างรวดเร็วสำหรับผู้เยี่ยมชมเว็บไซต์

เว็บไซต์ที่มีรูปภาพโหลดเร็วจะมีอันดับสูงกว่าในเครื่องมือค้นหา

เพราะเสิร์ชเอ็นจิ้นต้องการส่งผู้ใช้ไปยังเว็บไซต์ที่ให้ประสบการณ์ที่ดี

มีสองขั้นตอนในการโหลดรูปภาพอย่างรวดเร็ว:

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

การดำเนินการทั้งสองนี้ - การปรับขนาดและการบีบอัด - เรียกว่าการปรับรูปภาพให้เหมาะสมสำหรับเว็บ

ฉันจะแสดงแนวทางปฏิบัติที่ดีที่สุดสำหรับการปรับขนาดรูปภาพและวิธีดำเนินการ

ความซับซ้อนของภาพที่ตอบสนอง

เริ่มต้นด้วยการดูรูปภาพที่ตอบสนอง - ภาพที่ปรับขนาดให้ดูดีในขนาดหน้าจอต่างๆ

เราออกแบบสำหรับมือถือก่อน ดังนั้นฉันจะเริ่มต้นด้วยการอ้างอิงเว็บไซต์เวอร์ชันมือถือ

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

สำหรับอุปกรณ์พกพา ความกว้างที่ดีมากสำหรับรูปภาพคือ 640 พิกเซล ความสูงสามารถเป็นอะไรก็ได้ที่คุณต้องการ

แต่การปรับขนาดภาพไม่ได้สิ้นสุดเพียงแค่นั้น ขนาดเดียวไม่พอดีทั้งหมด

รูปภาพบนอุปกรณ์ต่าง ๆ

ลองนึกถึงภาพเดียวกันนั้นบนจอภาพขนาดใหญ่พิเศษหรือหน้าจอทีวี – ใช่แล้ว ขณะนี้เว็บไซต์สามารถเข้าถึงได้ผ่านสมาร์ททีวีของคุณ

รูปภาพอาจอยู่ในคอลัมน์ทางด้านซ้ายของข้อความ

อาจขยายความกว้างของหน้าจอเหมือนกับในเวอร์ชันมือถือ เราเรียกภาพฮีโร่เหล่านี้

ลองนึกภาพว่าตอนนี้ภาพนั้นจะต้องใหญ่แค่ไหน?

สำหรับทีวี ภาพที่สมบูรณ์แบบพิกเซลจะมีความกว้าง 1920 พิกเซลหรือมากกว่านั้น

หากคุณลดขนาดรูปภาพลง 640 พิกเซลสำหรับมือถือแล้ว จะดูแย่มากหากคุณพยายามขยายขนาดภาพเป็น 1920 พิกเซล คุณจะยืดมันมากกว่า 400%

การเพิ่มขนาดภาพดูไม่ดี – พิกเซลยืดออกและภาพดูคลุมเครือ

การตั้งค่าเพื่อรักษาภาพที่ 1920 พิกเซลก็ไม่สามารถแก้ปัญหาได้เช่นกัน การดาวน์โหลดเหล่านี้ช้ามาก โดยเฉพาะอย่างยิ่งในการเชื่อมต่ออินเทอร์เน็ตที่ช้า

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

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

ปลั๊กอิน WordPress สำหรับรูปภาพที่ปรับเปลี่ยนได้

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

โดยทั่วไป รูปภาพขนาดเล็กจะดาวน์โหลดก่อน - ไม่ว่าจะเป็นขนาดหรือความละเอียด

หากความละเอียดหน้าจอใหญ่ ปลั๊กอินจะให้เวอร์ชันที่ใหญ่กว่า ซึ่งจะทำให้เวลาในการรอผู้มาเยือนเร็วขึ้น

นี่เป็นวิธีแก้ปัญหาหากคุณต้องการใช้อิมเมจฮีโร่ตัวใหญ่แต่กังวลเรื่องเวลาในการดาวน์โหลด

ต่อไปนี้คือปลั๊กอินรูปภาพแบบปรับได้สองตัวที่ฉันชอบ:

• ภาพดัดแปลงสำหรับ WordPress โดย Nevma
  เพียงส่งรูปภาพในเวอร์ชันที่เล็กกว่าไปยังอุปกรณ์มือถือ ดังนั้นปลั๊กอินพื้นฐานที่ใช้งานได้จริงเมื่อบันทึกการตั้งค่าหลังจากเปิดใช้งาน
• Shortpixel Adaptive Image โดย ShortPixel
  ปลั๊กอินนี้ฉลาด มันจะเริ่มครอบตัดและบีบอัดรูปภาพสำหรับหน้าจอต่างๆ ทันทีที่เปิดใช้งาน แม้ว่าคุณจะสามารถควบคุมได้มากขึ้นหากจำเป็น เอกสารประกอบ ShortPixel ยังครอบคลุมอีกด้วย คุณยังสามารถเปรียบเทียบภาพก่อนและหลังการบีบอัดด้วยการทดสอบการบีบอัดภาพได้อีกด้วย
  

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

ปรับขนาดรูปภาพก่อนและบีบอัดให้น้อยที่สุดเพื่อลด KB ลง เมื่อคุณอัปโหลดไปยัง WordPress ปลั๊กอินรูปภาพที่ปรับเปลี่ยนได้จะจัดการส่วนที่เหลือเอง

มาเริ่มปรับขนาดรูปภาพสำหรับเว็บกัน

ปรับขนาดรูปภาพสำหรับเว็บ – เป็นพิกเซล

ด้วยทุกสิ่งที่เราพูดถึงในใจแล้ว ให้เลือกความกว้างของภาพ

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

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

• เว็บไซต์ของฉันไม่เคยใช้รูปภาพแบบเต็มความกว้าง ฉันชอบที่จะทำให้ทุกอย่างรวดเร็วจริงๆ
• ธุรกิจของฉันไม่มีภาพให้เห็นเป็นพิเศษ ผู้คนไม่จำเป็นต้องเห็นรูปภาพของฉันที่ความละเอียดสูงขนาดนั้น
• ฉันใช้รูปภาพขนาดที่แน่นอนแยกต่างหากสำหรับ Open Graph และนั่นไม่ต้องการอะไรที่ใหญ่กว่า 1200
• จาก Google Analytics ฉันรู้ว่าผู้คนเข้าชมไซต์ของฉันกำลังใช้อุปกรณ์พกพาหรือแล็ปท็อป ข้อมูลที่เป็นประโยชน์.

ฉันปล่อยให้มันขึ้นอยู่กับดุลยพินิจของคุณ

ซอฟต์แวร์แก้ไขรูปภาพฟรี

มีเครื่องมือฟรีมากมายสำหรับคุณทางออนไลน์ รวมถึงโปรแกรมแก้ไขรูปภาพที่สามารถดาวน์โหลดได้

สำหรับภาพถ่ายนั้นใช้รูปแบบไฟล์ JPEG และนั่นคือสิ่งที่เราจะกล่าวถึงที่นี่

สำหรับเวกเตอร์ให้เลือก PNG หรือ SVG – และนั่นคือสำหรับบทช่วยสอนในอนาคต

ซอฟต์แวร์แก้ไขภาพ GIMP

'GIMP' (โปรแกรมจัดการรูปภาพของ GNU) เป็นโปรแกรมแก้ไขรูปภาพที่ไม่มีค่าใช้จ่ายใด ๆ ทั้งสิ้น

ดาวน์โหลด GIMP เวอร์ชันเสถียรปัจจุบันจากเว็บไซต์

GIMP มีบทช่วยสอนเกี่ยวกับการเปลี่ยนขนาด (ขนาด) ของรูปภาพ (สเกล)

โปรแกรมแก้ไขรูปภาพออนไลน์

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

ผลลัพธ์แรกที่ฉันพบคือ resizeimage.net ใช้งานง่ายมาก - ครอบตัด ปรับขนาด และบีบอัดรูปภาพ

หากคุณต้องการครอบตัดรูปภาพ ให้ใช้ตัวเลือกหมายเลข 2 แต่ฉันข้ามไปที่ตัวเลือกหมายเลข 4 ซึ่งฉันสามารถปรับขนาดเป็นพิกเซลได้

ใส่ 1200 ลงในช่องความกว้าง ความสูงน่าน แล้วทำเครื่องหมายที่ช่อง Keep Aspect Ratio

รูปแบบภาพที่ส่งออกจะเป็น JPG

เลือกตัวเลือกการบีบอัด

การบีบอัดแบบโปรเกรสซีฟจะแสดง JPEG ในรูปแบบพิกเซลทันทีที่ผู้เยี่ยมชมอยู่ในหน้า ข้อมูลที่เหลือจะค่อยๆ ดาวน์โหลดเพื่อสร้างภาพสุดท้าย ฉันชอบตัวเลือกนี้มากเพราะผู้มาเยี่ยมรู้ว่าต้องรอ

ลดคุณภาพของภาพลงประมาณ 75% อีกครั้งขึ้นอยู่กับว่าคุณอยากจะโหดเหี้ยมแค่ไหน

การปรับขนาดรูปภาพเป็น KB – การบีบอัด

การบีบอัดแตกต่างจากการปรับขนาดมาก รูปภาพทั้งหมดควรถูกบีบอัดก่อนอัปโหลด แม้ว่าคุณจะใช้ปลั๊กอินรูปภาพแบบปรับได้ก็ตาม

การบีบอัดจะลดขนาดไฟล์ของภาพโดยการลดพิกเซลลง ดังนั้นจึงดาวน์โหลดได้เร็วขึ้น

ในระหว่างขั้นตอนการบีบอัด พยายามอย่าทำให้คุณภาพของภาพลดลงมากเกินไป

พยายามสร้างสมดุลระหว่างภาพที่ดูดีและการดาวน์โหลดอย่างรวดเร็ว

สามารถบีบอัดรูปภาพโดยใช้ซอฟต์แวร์ GIMP ได้เช่นกัน

GIMP กวดวิชาเกี่ยวกับการเปลี่ยนขนาด (ขนาดไฟล์) ของ Jpeg