คุณลดขนาดไฟล์รูปภาพสำหรับเว็บไซต์ได้อย่างไร

เผยแพร่แล้ว: 2022-12-02
สารบัญ
  • เหตุใดการปรับรูปภาพให้เหมาะสมสำหรับเว็บจึงเป็นสิ่งสำคัญ
  • การบีบอัดภาพทำงานอย่างไร
  • 5 วิธีในการลดขนาด MB ของรูปภาพสำหรับเว็บไซต์
  • บทสรุป

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

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

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

เหตุใดการปรับรูปภาพให้เหมาะสมสำหรับเว็บจึงเป็นสิ่งสำคัญ

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

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

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

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

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

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

การบีบอัดภาพทำงานอย่างไร

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

ในทำนองเดียวกัน การบีบอัดรูปภาพเกี่ยวข้องกับ การลดขนาดไฟล์ของภาพถ่าย หรือกราฟิกประเภทอื่นๆ ในขณะที่พยายามรักษาคุณภาพ

มีวิธีการบีบอัดภาพหลักสองประเภทที่คุณสามารถใช้ได้:

  1. Lossless: การบีบอัดประเภทนี้มีวัตถุประสงค์เพื่อลดขนาดไฟล์ภาพโดยไม่กระทบต่อคุณภาพ
  2. การสูญเสีย: การบีบอัดประเภทนี้อาจทำให้ขนาดไฟล์เล็กลงมาก แต่ก็ส่งผลต่อคุณภาพของภาพในกระบวนการด้วย

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

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

5 วิธีในการลดขนาด MB ของรูปภาพสำหรับเว็บไซต์

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

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

1. ใช้เว็บไซต์ปรับแต่งรูปภาพ

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

ตัวอย่างเช่น TinyPNG ช่วยให้คุณสามารถอัปโหลดไฟล์ PNG, JPEG และ WebP ที่มีขนาดไม่เกิน 5 MB คุณสามารถอัปโหลดภาพหลายภาพพร้อมกันและไซต์จะปรับให้เหมาะสมสำหรับคุณ:

เล็ก

โปรดทราบว่าบริการปรับแต่งภาพที่แตกต่างกันจะใช้การบีบอัดประเภทต่างๆ ตัวอย่างเช่น TinyPNG ใช้การบีบอัดแบบสูญเสีย

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

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

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

2. ใช้ปลั๊กอินปรับแต่งรูปภาพ

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

ตัวอย่างหนึ่งของปลั๊กอินดังกล่าวคือ Smush:

ปลั๊กอิน Smush

เมื่อคุณเปิดใช้งาน Smush ปลั๊กอินจะปรับแต่งรูปภาพที่คุณอัปโหลดไปยัง WordPress โดยอัตโนมัติ สิ่งนี้ใช้กับรูปภาพที่คุณอัปโหลดไปยังไลบรารีสื่อโดยตรงและกับไฟล์ที่คุณเพิ่มลงในไซต์ของคุณในขณะที่ใช้ Block Editor

หากคุณนำทางไปยัง ไลบรารีสื่อ แท็บ คุณจะเห็นการประหยัด MB สำหรับแต่ละภาพ:

ไลบรารีสื่อ WordPress

ปลั๊กอินเหล่านี้ส่วนใหญ่ไม่ฟรีทั้งหมด ตัวอย่างเช่น Smush จะช่วยให้คุณสามารถปรับแต่งภาพได้ไม่จำกัดจำนวน แต่เฉพาะในกรณีที่ภาพเหล่านั้นมีน้ำหนักต่ำกว่า 5 MB

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

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

3. ปรับขนาดไฟล์รูปภาพในคอมพิวเตอร์ของคุณ

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

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

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

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

ปรับขนาดไฟล์รูปภาพ

ตามกฎทั่วไป เว็บไซต์ส่วนใหญ่ไม่ต้องการรูปภาพที่มี ความกว้างเกิน 1,000-2,000 พิกเซล คุณสามารถปรับขนาดรูปภาพเป็นกรณีๆ ไป ตราบใดที่คุณให้ความสำคัญกับคุณภาพเป็นพิเศษ

หากคุณใช้ WordPress ปลั๊กอินปรับแต่งรูปภาพบางตัวสามารถช่วยคุณปรับขนาดรูปภาพโดยอัตโนมัติเมื่อคุณอัปโหลด ตัวอย่างของปลั๊กอินที่สามารถทำได้ ได้แก่ Smush, Resize Image After Upload และ Imagify

4. ใช้รูปภาพ WebP

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

WebP เป็นรูปแบบรูปภาพที่ค่อนข้างใหม่ที่พัฒนาโดย Google ในแง่ของขนาดไฟล์ ไฟล์ WebP แบบไม่สูญเสียข้อมูลจะเบากว่าไฟล์ PNG ถึง 26 เปอร์เซ็นต์โดยเฉลี่ย ในขณะเดียวกัน การใช้อิมเมจ WebP ที่สูญเสียจะทำให้ขนาดไฟล์ลดลง 25-34 เปอร์เซ็นต์เมื่อเทียบกับ PNG

เบราว์เซอร์สมัยใหม่ส่วนใหญ่รองรับ WebP แล้ว รวมถึง Chrome, Safari, Firefox, Edge และ Opera ซึ่งหมายความว่าผู้เข้าชมไซต์ส่วนใหญ่ของคุณไม่ควรประสบปัญหาใดๆ หากคุณตัดสินใจเปลี่ยนไปใช้ WebP สำหรับรูปแบบภาพหลักของเว็บไซต์ของคุณ

หากคุณเป็นผู้ใช้ WordPress คุณควรทราบว่าระบบจัดการเนื้อหา (CMS) รองรับ WebP ทันที นอกจากนี้ ยังมีแผนที่จะใช้ WebP เป็นรูปแบบรูปภาพเริ่มต้นสำหรับ WordPress ในเวอร์ชันต่อๆ ไป

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

5. ลบข้อมูลเมตา EXIF ​​ออกจากรูปภาพ

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

การลบข้อมูลนั้นออกจากรูปภาพสามารถลดขนาดไฟล์ได้ หากคุณเป็นผู้ใช้ Windows ให้คลิกขวาที่ไฟล์ ไปที่ Properties แล้วเลือก Details แท็บ

ภายในคุณจะพบตัวเลือกที่อ่าน Remove Properties และ ข้อมูลส่วนตัว :

การลบข้อมูลเมตาของรูปภาพใน Windows

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

บทสรุป

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

มีหลายวิธีในการลดขนาดไฟล์รูปภาพ ไม่ว่าคุณจะใช้ WordPress หรือไม่ก็ตาม

นี่คือวิธีการที่คุณสามารถใช้ได้:

  1. ใช้เว็บไซต์ปรับแต่งรูปภาพ เช่น TinyPNG
  2. ใช้ปลั๊กอินปรับแต่งรูปภาพ เช่น Smush
  3. ปรับขนาดไฟล์รูปภาพในคอมพิวเตอร์ของคุณ
  4. ใช้ภาพ WebP
  5. ลบข้อมูลเมตา EXIF ​​ออกจากรูปภาพ

คุณมีคำถามใดๆ เกี่ยวกับวิธีลดขนาดภาพเป็น MB สำหรับเว็บไซต์หรือไม่? แจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง!