เพิ่มประสิทธิภาพรูปภาพด้วย Thumbor

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

Katie Hempenius

Thumbor เป็น CDN สำหรับรูปภาพแบบโอเพนซอร์สฟรีที่ช่วยให้บีบอัด ปรับขนาด และแปลงรูปภาพได้ง่ายๆ โพสต์นี้ช่วยให้คุณลองใช้ Thumbor ได้ด้วยตัวเองโดยไม่ต้องติดตั้งอะไรเลย เราได้ตั้งค่าเซิร์ฟเวอร์ Thumbor ของแซนด์บ็อกซ์เพื่อให้คุณลองใช้ที่ http://34.67.235.246:8888 ดูรูปภาพที่คุณจะทดสอบได้ที่ http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg

สิ่งที่ต้องดำเนินการก่อน

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

หมายเหตุ: หากต้องการติดตั้ง Thumbor บนเซิร์ฟเวอร์ของคุณเองแล้วตามด้วยโพสต์นี้ โปรดดูวิธีติดตั้ง CDN ของรูปภาพของ Thumbor เมื่อเห็น http://34.67.235.246:8888 ในโพสต์นี้ คุณจะต้องแทนที่ต้นทางนั้นด้วยต้นทางของอินสแตนซ์ Thumbor

รูปแบบ URL ของภาพขนาดย่อ

ตามที่ได้กล่าวไว้ในใช้ CDN รูปภาพเพื่อเพิ่มประสิทธิภาพรูปภาพ CDN ของรูปภาพแต่ละรายการจะใช้รูปแบบ URL ที่แตกต่างกันเล็กน้อยสำหรับรูปภาพ รูปที่ 1 แสดงรูปแบบของ Thumbor

รูปแบบ URL ของ Thhumbor

Origin

เช่นเดียวกับต้นทางทั้งหมด ต้นทางของ Thumbor URL ประกอบด้วย 3 ส่วน ได้แก่ แบบแผน (ซึ่งมักจะเป็น http หรือ https แทบทุกครั้ง) โฮสต์ และพอร์ต ในตัวอย่างนี้ โฮสต์จะใช้ที่อยู่ IP แต่หากคุณใช้เซิร์ฟเวอร์ DNS อาจดูเหมือน thumbor-server.my-site.com โดยค่าเริ่มต้น Thumbor จะใช้พอร์ต 8888 เพื่อแสดงรูปภาพ

คีย์ความปลอดภัย

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

ขนาด

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

ลองเลย

1. คลิก URL ต่อไปนี้เพื่อดูรูปภาพที่แสดงในขนาดดั้งเดิมในแท็บใหม่: http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg

   

   รูปภาพต้นฉบับ

2. ปรับขนาดรูปภาพเป็น 100x100 พิกเซล: http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg

ปรับขนาดรูปภาพเป็น 100x100 พิกเซล

ฟิลเตอร์

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

ลองเลย

1. ใช้ฟิลเตอร์เดียว: เอฟเฟ็กต์เบลอแบบเกาส์เชียนที่มีรัศมี 25 พิกเซล: http://34.67.235.246:8888/unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg

   

   รูปภาพเบลอ

2. ใช้ตัวกรองหลายรายการ แปลงเป็นโทนสีเทาและหมุนรูปภาพ 90 องศา: http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg

รูปภาพแบบหมุนเป็นโทนสีเทา

การเปลี่ยนรูปแบบรูปภาพ

ส่วนนี้มุ่งเน้นที่ฟังก์ชันของ Thumbor ที่เกี่ยวข้องกับประสิทธิภาพมากที่สุด ซึ่งได้แก่ การบีบอัด การปรับขนาด และการแปลงระหว่างรูปแบบไฟล์

การบีบอัด

ตัวกรองคุณภาพจะบีบอัดรูปภาพ JPEG ตามระดับคุณภาพรูปภาพที่ต้องการ (1-100) หากไม่ได้ระบุระดับคุณภาพ Thumbor จะบีบอัดรูปภาพเป็นระดับคุณภาพ 80 ตัวเลือกนี้เป็นค่าเริ่มต้นที่ดี นั่นคือ ระดับคุณภาพ 80-85 มักส่งผลเล็กน้อยต่อคุณภาพของรูป แต่มักจะลดขนาดรูปภาพลง 30-40%

ลองเลย

1. บีบอัดรูปภาพให้มีคุณภาพระดับ 1 (แย่มาก): http://34.67.235.246:8888/unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg

   

   รูปภาพคุณภาพต่ำ

2. บีบอัดรูปภาพโดยใช้การตั้งค่าการบีบอัดเริ่มต้นของ Thumbor: http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg

รูปภาพที่บีบอัด

กำลังปรับขนาด

หากต้องการปรับขนาดรูปภาพโดยคงสัดส่วนเดิมไว้ ให้ใช้รูปแบบ $WIDTHx0 หรือ 0x$HEIGHT ภายในส่วน size ของสตริง URL

ลองเลย

1. ปรับขนาดรูปภาพให้กว้าง 200 พิกเซลขณะที่คงสัดส่วนเดิมไว้: http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg

   

   ปรับขนาดรูปภาพเป็นความกว้าง 200 พิกเซล

2. ปรับขนาดรูปภาพให้มีความสูง 500 พิกเซลโดยคงสัดส่วนเดิมไว้: http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg

ปรับขนาดรูปภาพเป็นความสูง 500 พิกเซล

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

ลองเลย

1. ปรับขนาดรูปภาพเป็น 50% ของรูปภาพต้นฉบับ: http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg

   

   ปรับขนาดรูปภาพเป็น 50% ของขนาดรูปภาพต้นฉบับ

2. ปรับขนาดรูปภาพให้มีความกว้าง 1, 000 พิกเซล จากนั้นปรับขนาดรูปภาพเป็น 10% ของขนาดปัจจุบัน: http://34.67.235.246:8888/unsafe/1000x/filters:proportion(.1)/https://web.dev/backdrop-filter/hero.jpg

ปรับขนาดรูปภาพเป็นความกว้าง 100 พิกเซล

วิธีการเหล่านี้เป็นเพียงส่วนหนึ่งของตัวเลือกการครอบตัดและการปรับขนาดของ Thumbor หากต้องการอ่านเกี่ยวกับตัวเลือกอื่นๆ ให้ดูที่การใช้งาน

รูปแบบไฟล์

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

ลองเลย

1. แปลงรูปภาพเป็น WebP หากคุณเปิดแผงเครือข่ายของเครื่องมือสำหรับนักพัฒนาเว็บ ส่วนหัวการตอบกลับ Content-Type ของเอกสารจะแสดงว่าเซิร์ฟเวอร์แสดงรูปภาพ WebP: http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev/backdrop-filter/hero.jpg

ส่วนหัวการตอบกลับ content-type ที่แสดงในเครื่องมือสำหรับนักพัฒนาเว็บ

ขั้นตอนถัดไป

ลองใช้ตัวกรองและการเปลี่ยนรูปแบบอื่นๆ ในรูปภาพ hero.jpg

หากคุณติดตามผลโดยใช้การติดตั้ง Thumbor ของคุณเอง ให้ดูภาคผนวกด้านล่างซึ่งอธิบายถึงวิธีการและเหตุผลในการใช้ไฟล์ thumbor.conf

ภาคผนวก: thumbor.conf

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

1. เรียกใช้คำสั่ง thumbor-config เพื่อสร้างไฟล์ thumbor.conf ใหม่

   thumbor-config > ./thumbor.conf
   

2. เปิดไฟล์ thumbor.conf ใหม่ คำสั่ง thumbor-config จะสร้างไฟล์ที่แสดงและอธิบายตัวเลือกการกำหนดค่า Thumbor ทั้งหมด

3. กำหนดการตั้งค่าโดยการยกเลิกการแสดงความคิดเห็นและเปลี่ยนค่าเริ่มต้น เราขอแนะนำให้กำหนดการตั้งค่าต่อไปนี้

   • QUALITY
   • AUTO_WEBP
   • MAX_WIDTHและMAX_HEIGHT
   • ALLOW_ANIMATED_GIFS

4. เรียกใช้ Thumbor ด้วยแฟล็ก --conf เพื่อใช้การตั้งค่า thumbor.conf

   thumbor --conf /path/to/thumbor.conf