คุณสามารถใช้ Thumbor เพื่อปรับขนาด บีบอัด และเปลี่ยนรูปแบบรูปภาพตามคำขอได้ฟรี
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 รูปภาพเพื่อเพิ่มประสิทธิภาพรูปภาพ และจะถือว่าคุณเคยสร้างเว็บไซต์พื้นฐานมาก่อนแล้ว
รูปแบบ URL ของภาพขนาดย่อ
ตามที่ได้กล่าวไว้ในใช้ CDN รูปภาพเพื่อเพิ่มประสิทธิภาพรูปภาพ CDN ของรูปภาพแต่ละรายการจะใช้รูปแบบ URL ที่แตกต่างกันเล็กน้อยสำหรับรูปภาพ รูปที่ 1 แสดงรูปแบบของ Thumbor
![URL ของ Thumbor มีคอมโพเนนต์ต่อไปนี้ ต้นทาง คีย์ความปลอดภัย ขนาด ตัวกรอง และรูปภาพ](https://web.dev/static/articles/use-thumbor/image/a-thumbor-url-has-follow-485047f95e001.jpg?authuser=6&hl=th)
Origin
เช่นเดียวกับต้นทางทั้งหมด ต้นทางของ Thumbor URL ประกอบด้วย 3 ส่วน ได้แก่ แบบแผน (ซึ่งมักจะเป็น http
หรือ https
แทบทุกครั้ง) โฮสต์ และพอร์ต ในตัวอย่างนี้ โฮสต์จะใช้ที่อยู่ IP แต่หากคุณใช้เซิร์ฟเวอร์ DNS อาจดูเหมือน thumbor-server.my-site.com
โดยค่าเริ่มต้น Thumbor จะใช้พอร์ต 8888
เพื่อแสดงรูปภาพ
คีย์ความปลอดภัย
ส่วน unsafe
ของ URL บ่งบอกว่าคุณกำลังใช้ Thumbor โดยไม่มีคีย์ความปลอดภัย คีย์ความปลอดภัยป้องกันไม่ให้ผู้ใช้ทำการเปลี่ยนแปลง URL รูปภาพของคุณโดยไม่ได้รับอนุญาต การเปลี่ยน URL ของรูปภาพจะทำให้ผู้ใช้สามารถใช้เซิร์ฟเวอร์ของคุณ (และใบเรียกเก็บเงินโฮสติ้ง) เพื่อปรับขนาดรูปภาพ หรืออาจทำให้เซิร์ฟเวอร์ของคุณทำงานหนักเกินไปได้ คำแนะนำนี้จะไม่ครอบคลุมการตั้งค่าฟีเจอร์คีย์ความปลอดภัยของ Thumbor
ขนาด
ส่วนนี้ของ URL จะระบุขนาดรูปภาพเอาต์พุตที่ต้องการ คุณสามารถละเว้นข้อความนี้หากไม่ต้องการเปลี่ยนขนาดของรูปภาพ Thumbor จะใช้วิธีการต่างๆ เช่น การครอบตัดหรือการปรับขนาดเพื่อให้ได้ขนาดที่ต้องการ ทั้งนี้ขึ้นอยู่กับพารามิเตอร์อื่นๆ ของ URL ส่วนถัดไปของโพสต์นี้จะอธิบายวิธีการปรับขนาดรูปภาพอย่างละเอียด
ลองเลย
คลิก URL ต่อไปนี้เพื่อดูรูปภาพที่แสดงในขนาดดั้งเดิมในแท็บใหม่: http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg
รูปภาพต้นฉบับ ปรับขนาดรูปภาพเป็น 100x100 พิกเซล: http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg
![รูปภาพขนาด 100x100 พิกเซล](https://web.dev/static/articles/use-thumbor/image/image-100x100-pixels-3848e03e36905.jpg?authuser=6&hl=th)
ฟิลเตอร์
ตัวกรองจะเปลี่ยนรูปภาพ ส่วนตัวกรองของกลุ่ม URL จะขึ้นต้นด้วย filters:
ตามด้วยรายการตัวกรองที่คั่นด้วยโคลอน คุณสามารถละเว้นได้หากไม่ได้ใช้ตัวกรองใดๆ ไวยากรณ์ของตัวกรองแต่ละรายการคล้ายกับการเรียกใช้ฟังก์ชัน (เช่น grayscale()
) ที่มีอาร์กิวเมนต์ 0 รายการขึ้นไป
ลองเลย
ใช้ฟิลเตอร์เดียว: เอฟเฟ็กต์เบลอแบบเกาส์เชียนที่มีรัศมี 25 พิกเซล: http://34.67.235.246:8888/unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg
รูปภาพเบลอ ใช้ตัวกรองหลายรายการ แปลงเป็นโทนสีเทาและหมุนรูปภาพ 90 องศา: http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg
![รูปภาพโทนสีเทาที่หมุน 90 องศา](https://web.dev/static/articles/use-thumbor/image/grayscale-image-has-been-787f2eb50dfd7.jpg?authuser=6&hl=th)
การเปลี่ยนรูปแบบรูปภาพ
ส่วนนี้มุ่งเน้นที่ฟังก์ชันของ Thumbor ที่เกี่ยวข้องกับประสิทธิภาพมากที่สุด ซึ่งได้แก่ การบีบอัด การปรับขนาด และการแปลงระหว่างรูปแบบไฟล์
การบีบอัด
ตัวกรองคุณภาพจะบีบอัดรูปภาพ JPEG ตามระดับคุณภาพรูปภาพที่ต้องการ (1-100) หากไม่ได้ระบุระดับคุณภาพ Thumbor จะบีบอัดรูปภาพเป็นระดับคุณภาพ 80 ตัวเลือกนี้เป็นค่าเริ่มต้นที่ดี นั่นคือ ระดับคุณภาพ 80-85 มักส่งผลเล็กน้อยต่อคุณภาพของรูป แต่มักจะลดขนาดรูปภาพลง 30-40%
ลองเลย
บีบอัดรูปภาพให้มีคุณภาพระดับ 1 (แย่มาก): http://34.67.235.246:8888/unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg
รูปภาพคุณภาพต่ำ บีบอัดรูปภาพโดยใช้การตั้งค่าการบีบอัดเริ่มต้นของ Thumbor: http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg
![รูปภาพที่บีบอัดโดยไม่มีปัญหาด้านคุณภาพที่เห็นได้ชัด](https://web.dev/static/articles/use-thumbor/image/compressed-image-no-noti-ba38af80f42a4.jpg?authuser=6&hl=th)
กำลังปรับขนาด
หากต้องการปรับขนาดรูปภาพโดยคงสัดส่วนเดิมไว้ ให้ใช้รูปแบบ $WIDTHx0
หรือ 0x$HEIGHT
ภายในส่วน size
ของสตริง URL
ลองเลย
ปรับขนาดรูปภาพให้กว้าง 200 พิกเซลขณะที่คงสัดส่วนเดิมไว้: http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg
ปรับขนาดรูปภาพเป็นความกว้าง 200 พิกเซล ปรับขนาดรูปภาพให้มีความสูง 500 พิกเซลโดยคงสัดส่วนเดิมไว้: http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg
![รูปภาพสูง 500 พิกเซล](https://web.dev/static/articles/use-thumbor/image/image-is-500-pixels-tall-992a9e041c75d.jpg?authuser=6&hl=th)
คุณยังปรับขนาดรูปภาพให้เป็นเปอร์เซ็นต์ของรูปภาพต้นฉบับได้โดยใช้ตัวกรองสัดส่วน หากระบุขนาดร่วมกับตัวกรองสัดส่วน ระบบจะปรับขนาดรูปภาพ จากนั้นจึงใช้ตัวกรองสัดส่วน
ลองเลย
ปรับขนาดรูปภาพเป็น 50% ของรูปภาพต้นฉบับ: http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg
ปรับขนาดรูปภาพเป็น 50% ของขนาดรูปภาพต้นฉบับ ปรับขนาดรูปภาพให้มีความกว้าง 1, 000 พิกเซล จากนั้นปรับขนาดรูปภาพเป็น 10% ของขนาดปัจจุบัน: http://34.67.235.246:8888/unsafe/1000x/filters:proportion(.1)/https://web.dev/backdrop-filter/hero.jpg
![รูปภาพกว้าง 100 พิกเซล](https://web.dev/static/articles/use-thumbor/image/image-is-100-pixels-wide-07aa661c4581b.jpg?authuser=6&hl=th)
วิธีการเหล่านี้เป็นเพียงส่วนหนึ่งของตัวเลือกการครอบตัดและการปรับขนาดของ Thumbor หากต้องการอ่านเกี่ยวกับตัวเลือกอื่นๆ ให้ดูที่การใช้งาน
รูปแบบไฟล์
ตัวกรองรูปแบบจะแปลงรูปภาพเป็น jpeg
, webp
, gif
หรือ png
โปรดทราบว่าหากคุณกำลังเพิ่มประสิทธิภาพ คุณควรใช้ JPEG หรือ WebP เนื่องจากไฟล์ PNG และ GIF มีแนวโน้มที่จะมีขนาดใหญ่กว่ามากและไม่บีบอัดด้วย
ลองเลย
- แปลงรูปภาพเป็น WebP หากคุณเปิดแผงเครือข่ายของเครื่องมือสำหรับนักพัฒนาเว็บ ส่วนหัวการตอบกลับ Content-Type ของเอกสารจะแสดงว่าเซิร์ฟเวอร์แสดงรูปภาพ WebP: http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev/backdrop-filter/hero.jpg
![ภาพหน้าจอของเครื่องมือสำหรับนักพัฒนาเว็บแสดงประเภทเนื้อหา (WebP) ของรูปภาพ](https://web.dev/static/articles/use-thumbor/image/devtools-screenshot-showi-0e757c2215957.jpg?authuser=6&hl=th)
content-type
ที่แสดงในเครื่องมือสำหรับนักพัฒนาเว็บขั้นตอนถัดไป
ลองใช้ตัวกรองและการเปลี่ยนรูปแบบอื่นๆ ในรูปภาพ hero.jpg
หากคุณติดตามผลโดยใช้การติดตั้ง Thumbor ของคุณเอง ให้ดูภาคผนวกด้านล่างซึ่งอธิบายถึงวิธีการและเหตุผลในการใช้ไฟล์ thumbor.conf
ภาคผนวก: thumbor.conf
คุณสามารถกำหนดตัวเลือกการกำหนดค่าต่างๆ ที่กล่าวถึงในโพสต์นี้ พร้อมทั้งตัวเลือกอื่นๆ ให้เป็นค่าเริ่มต้นได้ด้วยการตั้งค่าและใช้ไฟล์การกำหนดค่า thumbor.conf
ระบบจะใช้การตั้งค่าในไฟล์ thumbor.conf
กับรูปภาพทั้งหมด เว้นแต่จะถูกพารามิเตอร์สตริง URL ลบล้าง
เรียกใช้คำสั่ง
thumbor-config
เพื่อสร้างไฟล์thumbor.conf
ใหม่thumbor-config > ./thumbor.conf
เปิดไฟล์
thumbor.conf
ใหม่ คำสั่งthumbor-config
จะสร้างไฟล์ที่แสดงและอธิบายตัวเลือกการกำหนดค่า Thumbor ทั้งหมดกำหนดการตั้งค่าโดยการยกเลิกการแสดงความคิดเห็นและเปลี่ยนค่าเริ่มต้น เราขอแนะนำให้กำหนดการตั้งค่าต่อไปนี้
QUALITY
AUTO_WEBP
MAX_WIDTH
และMAX_HEIGHT
ALLOW_ANIMATED_GIFS
เรียกใช้ Thumbor ด้วยแฟล็ก
--conf
เพื่อใช้การตั้งค่าthumbor.conf
thumbor --conf /path/to/thumbor.conf