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

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

หน้าที่ช้านำไปสู่อัตราตีกลับที่ใหญ่กว่าและตำแหน่ง SERP ที่ต่ำลง ซึ่งในทางกลับกันหมายถึงปริมาณการใช้งานที่น้อยลงและลูกค้าที่จ่ายเงินน้อยลง

การเพิ่มประสิทธิภาพรูปภาพประกอบด้วยอะไรบ้าง

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

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

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

1. รวมการจัดส่ง CDN
2. เพิ่มประสิทธิภาพ TTFB
3. ใช้มุมมองผลิตภัณฑ์ 360 องศา
4. ตรวจสอบให้แน่ใจว่ารูปภาพของคุณตอบสนองได้
5. ปรับขนาดภาพให้ถูกต้อง
6. ใช้รูปแบบภาพที่เหมาะสม
7. บีบอัดภาพ
8. ปรับแอตทริบิวต์ alt ให้เหมาะสม
9. บรรยายภาพให้ชัดเจน
10. ดูแลมุมผลิตภัณฑ์ของคุณ
11. รู้วิธีผสมสี
12. สร้างภาพผสมอารมณ์
13. ใช้พื้นหลังที่สอดคล้องกันของผลิตภัณฑ์
14. เพิ่มประสิทธิภาพภาพขนาดย่อของคุณ
15. ใช้แผนผังเว็บไซต์รูปภาพ
16. ใช้การสุ่มตัวอย่างโครมา
17. ขี้เกียจโหลดภาพที่ไม่สำคัญ
18. ปรับใช้ภาพ sprite
19. เริ่มแคชเนื้อหารูปภาพ
20. โหลดเนื้อหารูปภาพที่สำคัญล่วงหน้า

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

หากคุณมีรูปภาพ 11,000 รูปบนเว็บไซต์ของคุณ

ต้องใช้เวลานานแค่ไหนในการเพิ่มประสิทธิภาพให้เสร็จ

ลองนึกภาพว่าสามารถทำได้โดยอัตโนมัติ!

นี่คือสิ่งที่ Cloudimage ทำ

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

หลังจากนั้นก็มาถึงการเพิ่มประสิทธิภาพ

การปรับขนาดภาพ

เซิร์ฟเวอร์การปรับขนาดของ Cloudimage ซึ่งตั้งอยู่ในศูนย์ข้อมูลสามแห่งทั่วโลก (แคนาดา ฝรั่งเศส และสิงคโปร์) จะดาวน์โหลดภาพต้นฉบับของคุณจาก origin_image_url แปลงตามพารามิเตอร์การทำงานและตัวกรอง และสุดท้ายแสดงบนเว็บไซต์หรือแอปบนอุปกรณ์เคลื่อนที่ของคุณผ่านจรวด - CDN ที่รวดเร็ว

ตัวอย่างที่มีรูปภาพต้นฉบับที่โฮสต์บนเว็บเซิร์ฟเวอร์ของคุณ บัคเก็ต Amazon S3 หรือพื้นที่จัดเก็บอื่นๆ ที่เข้าถึงได้ผ่าน HTTP

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

ครอบตัด

รักษาสัดส่วนของรูปภาพโดยตัดรูปภาพให้พอดีกับความกว้างและความสูงที่กำหนด

พอดี

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

ผูกพัน

พยายามปรับขนาดภาพโดยรักษาสัดส่วนไว้ คล้ายคลึงแต่ไม่มีซับใน

ปิดบัง

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

หมุน

หมุนภาพตามมุมที่กำหนด ทวนเข็มนาฬิกา

ตัดแต่ง

ลบกรอบสีเดียวรอบๆ รูปภาพ

การบีบอัดภาพ

คุณสามารถเปลี่ยนการบีบอัด (รูปแบบเอาต์พุตและคุณภาพ) ของรูปภาพได้โดยใช้ตัวกรองการบีบอัด

คุณสามารถใช้ฟิลเตอร์บีบอัดควบคู่ไปกับการดำเนินการปรับขนาดและฟิลเตอร์รูปภาพ

ตามค่าเริ่มต้น Cloudimage จะส่งภาพเป็น WebP หากเบราว์เซอร์ไคลเอ็นต์ไม่รองรับรูปแบบ รูปแบบนั้นจะเปลี่ยนกลับไปเป็น JPEG หรือ PNG

Optipress - การบีบอัดภาพตามการเรียนรู้ของเครื่อง

ความท้าทายหลักในการบีบอัดไฟล์ JPEG คือการหาปัจจัยการบีบอัดที่เหมาะสมที่สุดสำหรับภาพแต่ละภาพที่แตกต่างกัน

รูปภาพต่างๆ ที่บีบอัดด้วยพารามิเตอร์การบีบอัดเดียวกันอาจส่งผลให้คุณภาพการรับรู้ต่างกัน

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

เพื่อแก้ปัญหานี้ เราได้พัฒนาอัลกอริธึมการบีบอัด Optipress JPEG

Optipress ค้นพบวิธีการบีบอัด JPG ที่ดีที่สุดโดยการวิเคราะห์คุณลักษณะเฉพาะของรูปภาพและพารามิเตอร์การบีบอัดปัจจุบัน

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

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

ที่ตั้งไว้ล่วงหน้าการแปลง

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

p=X

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

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

รูปภาพที่ตอบสนองได้ง่าย

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

ทีมงาน Cloudimage ได้พัฒนาปลั๊กอิน JS เพื่อทำให้ทุกอย่างเป็นอัตโนมัติสำหรับคุณ

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

ด้วย Lazy Loading และเปิดใช้งานแคช คุณสามารถมั่นใจได้ว่าเวลาในการโหลดเว็บไซต์ของคุณจะดีขึ้นอย่างน้อย 40% เพิ่ม CDN ลงไปและเปอร์เซ็นต์จะเพิ่มขึ้นถึง 60%

เครือข่ายการจัดส่งเนื้อหา

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

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

CDN มักจะแคชอิมเมจตราบเท่าที่ผู้ใช้ปลายทางร้องขออิมเมจ

ดำเนินการในไม่กี่นาที

สิ่งที่ทำให้ Cloudimage มีเอกลักษณ์เฉพาะตัวคือบริการต่างๆ สามารถใช้งานได้อย่างรวดเร็ว

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

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

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

นี่เป็นสิ่งสำคัญโดยเฉพาะอย่างยิ่งเมื่อพวกเราส่วนใหญ่ถูกบังคับให้ใช้สำนักงานที่บ้านของเราในช่วงเวลาถัดไป
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของบริการ Cloudimage เยี่ยมชมเราได้ที่ cloudimage.io