วิธีเพิ่มประสิทธิภาพรูปภาพ – 9 เครื่องมือเพื่อเพิ่มความเร็วให้กับไซต์ของคุณและรับ Google Love

เผยแพร่แล้ว: 2020-01-31

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

หากคุณไม่ทราบวิธีเพิ่มประสิทธิภาพภาพของคุณ ให้อ่านและค้นหาวิธีที่ดีที่สุดในการเร่งความเร็วเว็บไซต์ของคุณ

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

ทำไมคุณต้องปรับแต่งภาพ

Google ชอบเว็บไซต์ที่รวดเร็วและลูกค้าก็เช่นกัน

ในปัจจุบัน การค้นหาภาพที่มีคุณภาพดีที่นำเสนอบนเว็บไซต์ของคุณเป็นสิ่งสำคัญ

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

หากคุณโหลดรูปภาพไปยังร้านค้าของคุณโดยตรง คู่มือนี้เหมาะสำหรับคุณ

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

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

วิธีเพิ่มประสิทธิภาพภาพ

image optimization techniques

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

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

ในคู่มือนี้ เราจะแบ่งปันเครื่องมือเพิ่มประสิทธิภาพรูปภาพที่ดีที่สุดสำหรับการบีบอัดรูปภาพ

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

การเพิ่มประสิทธิภาพภาพแบบไม่สูญเสียข้อมูลหมายความว่าคุณลดขนาดไฟล์โดยไม่สูญเสียคุณภาพของภาพ

สารบัญ


ทำไมต้องปรับภาพให้เหมาะสม?
รูปภาพประเภทต่างๆ
การเพิ่มประสิทธิภาพภาพอย่างถูกวิธี
เครื่องมือเพิ่มประสิทธิภาพรูปภาพ

  • เครื่องมือเพิ่มประสิทธิภาพ JPEG
  • Optimizilla
  • คราเคน
  • PNG จิ๋ว
  • Compressor.io
  • GiftOfSpeed
  • รีสมูชิต
  • ShortPixel
  • บีบอัดเลย

วิธีปรับภาพให้เหมาะสมบน Mac หรือ PC ของคุณ

ทำไมต้องปรับภาพให้เหมาะสม

optimize images for speed seo

Goog le บอกคุณว่าคุณต้องการวิธีปรับแต่งภาพให้เหมาะสมและทำไมคุณจึงควร

จาก การศึกษา ของ Microsoft พบว่าช่วงความสนใจของมนุษย์โดยเฉลี่ยลดลงจาก 12 วินาทีเหลือ 7 วินาที สิ่งที่น่าตกใจยิ่งกว่านั้นคือข้อเท็จจริงที่การวิจัยจาก Jampp พบว่า ช่วงความสนใจเฉลี่ยลดลงอย่างมากถึง 88 เปอร์เซ็นต์ในแต่ละปี

สิ่งนี้หมายความว่าอย่างไรสำหรับคุณในฐานะบล็อกเกอร์หรือหากคุณเปิดร้านอีคอมเมิร์ซ

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

เว็บไซต์ที่ช้าหมายความว่าคุณอาจสูญเสียผู้มีโอกาสเป็นลูกค้าก่อนที่จะโหลด

image optimization tools

จากการวิจัยกรณีศึกษาที่เกี่ยวข้องกับ Amazon, Google และไซต์ขนาดใหญ่อื่นๆ ความล่าช้า 1 วินาทีในการโหลดหน้าเว็บอาจทำให้สูญเสีย Conversion 7%, การดูหน้าเว็บน้อยลง 11% และความพึงพอใจของลูกค้าลดลงอย่างมาก 16%

วิธีตรวจสอบความเร็วและรูปภาพของคุณ

หลายคนเพิ่งเริ่มต้นไม่ทราบว่าความเร็วของเว็บไซต์มีความสำคัญเพียงใด

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

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

อันที่จริงแล้ว เนื่องจากสถานที่โฮสต์ไซต์มีความสำคัญ ผู้คนในประเทศต่างๆ จะมีเวลาในการโหลดต่างกันโดยสิ้นเชิง

ทดสอบเว็บไซต์ของคุณโดยใช้เครื่องมืออย่าง Pingdom

วิธีเพิ่มประสิทธิภาพรูปภาพประเภทต่างๆ

optimize images jpg and png

ไฟล์หลักสองประเภทที่คุณต้องการเพิ่มประสิทธิภาพสำหรับเว็บ ได้แก่ png และ jpg

การทำงานกับ JPGS

JPG (หรือที่เรียกว่า JPEG) เป็นประเภทไฟล์ที่นิยมมากที่สุดสำหรับรูปภาพบนเว็บ เนื่องจากโดยทั่วไปแล้วจะมีขนาดเล็กกว่าไฟล์ png JPG เหมาะอย่างยิ่งสำหรับภาพถ่ายหรือรูปภาพที่มีสี เงา การไล่ระดับสี หรือลวดลาย JPG มีจานสีขนาดใหญ่และทำให้ภาพประเภทนี้ดูสวยงาม

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

เห็นได้ชัดว่าขนาดของภาพเป็นพิกเซลมีความสำคัญ เราจะหารือเรื่องนี้ในอีกสักครู่

การทำงานกับ PNGS

ความแตกต่างที่สำคัญระหว่าง PNG และ JPEG คือไฟล์ PNG สามารถโปร่งใสได้

PNG เป็นรูปแบบไฟล์ทั่วไปอีกรูปแบบหนึ่งที่ใช้บนเว็บไซต์

PNG-24 ให้ภาพคุณภาพสูงกว่ามาก อย่างไรก็ตาม ขนาดของไฟล์ภาพจะมีขนาดใหญ่

นี่คือที่มาของเครื่องมือเพิ่มประสิทธิภาพ lossless ที่ดี

วิธีเพิ่มประสิทธิภาพรูปภาพประเภทต่างๆ

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

ใช้ jpg สำหรับภาพอื่นๆ ส่วนใหญ่ในเว็บไซต์ของคุณ

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

วิธีปรับภาพให้เหมาะสมอย่างถูกวิธี

optimize images online tools


วิธีรับการบีบอัดภาพที่เหมาะสมที่สุด

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

มีสองสิ่งที่คุณสามารถทำได้เพื่อปรับแต่งภาพของคุณอย่างเหมาะสม:

ใช้ขนาดที่เหมาะสม

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

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

บันทึกคุณภาพที่เหมาะสม

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

มีสองวิธีในการเพิ่มประสิทธิภาพภาพของคุณก่อนที่จะอัปโหลด:

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

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

เครื่องมือเพิ่มประสิทธิภาพภาพที่ดีที่สุด

1. เครื่องมือเพิ่มประสิทธิภาพ JPEG

optimize images jpeg optimizer


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

คุณยังสามารถปรับขนาดภาพใน JPEG Optimizer ได้ด้วย ดังนั้นขนาดไฟล์ภาพจึงลดลงและโหลดบนไซต์ของคุณเร็วขึ้น

2. Optimizilla.

เพิ่มประสิทธิภาพเครื่องมือภาพ



Optimizilla ให้ผลลัพธ์คุณภาพดีและขนาดไฟล์ต่ำ คุณสามารถบีบอัดรูปภาพ JPEG และ PNG ด้วยเครื่องมือนี้

เพื่อเพิ่มประสิทธิภาพรูปภาพ อัปโหลดสูงสุด 20 ภาพและตั้งค่าระดับการบีบอัดสำหรับแต่ละภาพแยกกัน

3. คราเคน

kraken optimize images tool



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

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

4. PNG จิ๋ว

tinning image compression tool how to optimize images


Tiny PNG มีมาระยะหนึ่งแล้วและเป็นหนึ่งในเครื่องมือบีบอัดรูปภาพออนไลน์ยอดนิยม เป็นเครื่องมือเพิ่มประสิทธิภาพรูปภาพฟรีที่บีบอัดรูปภาพทั้งรูปภาพ JPEG และ PNG

คุณสามารถอัปโหลดภาพได้สูงสุด 20 ภาพในครั้งเดียว จากนั้นดาวน์โหลดภาพไปยังคอมพิวเตอร์หรือบันทึกลงใน Dropbox

5. Compressor.io

compressor good tool to optimize images



Compressor.io เป็นอีกเครื่องมือที่ยอดเยี่ยมและรวดเร็วในการเพิ่มประสิทธิภาพภาพ เนื่องจากสามารถบีบอัดไฟล์ JPEG, PNG, Gif และ SVG ได้โดยไม่สูญเสียข้อมูล

6. GiftOfSpeed

ของขวัญแห่งความเร็ว png jpg ปรับภาพให้เหมาะสม


GiftOfSpeed ​​บีบอัดภาพ PNG และ JPEG นอกจากนี้ยังใช้วิธีบีบอัดภาพหลายวิธีเพื่อลดขนาดไฟล์ โดยรวมแล้ว นี่เป็นเครื่องมือที่รวดเร็วและมีประสิทธิภาพในการเพิ่มประสิทธิภาพภาพ

เพื่อให้คุณมีเทคนิคมากขึ้น Gift Of Speed ​​ยังมีเครื่องมืออีกมากมายที่จะช่วยปรับความเร็วเว็บไซต์ของคุณให้เหมาะสม

7. JPEGmini

how to optimize images jpeg files



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

8. รีสมุชิต

resmushit optimize images
วิธีปรับภาพให้เหมาะสม – ShortPixel



reSmush.it เป็นปลั๊กอิน WordPress ที่ยอดเยี่ยมที่จะช่วยคุณปรับแต่งรูปภาพที่มีอยู่และรูปภาพใหม่

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

9. ชอร์ตพิกเซล

ShortPixel
วิธีปรับภาพให้เหมาะสม – Shortpixel


4. ShortPixel Image Optimizer เป็นอีกเครื่องมือหนึ่งในการ เพิ่มประสิทธิภาพรูปภาพ บน WordPress คุณลงทะเบียนโดยใช้ที่อยู่อีเมลของคุณเพื่อใช้บริการสำหรับบัญชีพื้นฐาน ตัวอย่างเช่น บัญชีพื้นฐานช่วยให้คุณเพิ่มประสิทธิภาพได้ 100 ภาพต่อเดือน อย่างไรก็ตาม หากคุณต้องการมากกว่านี้ คุณจะต้องอัปเกรดเป็นแผนชำระเงิน

10. บีบอัดเลย

how to optimize images using compressnow
วิธีเพิ่มประสิทธิภาพภาพ


CompressNow เป็นเครื่องมือเพิ่มประสิทธิภาพรูปภาพออนไลน์การเพิ่มประสิทธิภาพที่มีประโยชน์ คุณสามารถย่อขนาดรูปภาพ JPEG, PNG และ Gif สำหรับแต่ละภาพ คุณสามารถกำหนดระดับการบีบอัดได้

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

วิธีปรับภาพให้เหมาะสมบน Mac หรือ PC ของคุณ

imageoptim compress images how to optimize images
วิธีปรับภาพให้เหมาะสมโดยใช้ imageoptim

เครื่องมือเพิ่มประสิทธิภาพรูปภาพที่ดีที่สุดสองอย่างสำหรับ Mac

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

ปรับภาพให้เหมาะสมโดยใช้สควอช


สควอช - สควอช 2 เป็นส่วนหนึ่งของคอลเลกชัน SetApp หรือคุณสามารถซื้อเป็นซอฟต์แวร์แบบสแตนด์อโลน สควอชไม่เหมาะสำหรับการเพิ่มประสิทธิภาพ JPEG เหมือนกับ ImageOptim แต่ทำงานได้ดีกับไฟล์ PNG

riot optimize images on windows

เครื่องมือซอฟต์แวร์ที่ดีที่สุดสองอย่างสำหรับ Mac ของคุณคือ:

Riot – โปรแกรมบีบอัดรูปภาพที่ใช้งานง่ายพร้อมอินเทอร์เฟซที่เรียบง่ายและใช้งานง่าย

optimize images using PNG Gauntlet


PNG Gaunlet – เครื่องมือน้ำหนักเบาและใช้งานง่ายซึ่งบีบอัดไฟล์ PNG โดยไม่สูญเสียข้อมูล

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

วิธีปรับภาพให้เหมาะสม คำแนะนำ

เพื่อสรุปแล้วนี่คือประเด็นสำคัญ:

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

หากคุณต้องการวิธีปรับปรุงไซต์ของคุณมากขึ้น ให้ทบทวนวิธีใช้เครื่องมือ SEO ที่ดีที่สุด