Bạn có thể sử dụng Thumbor mà không mất phí để đổi kích thước, nén và biến đổi hình ảnh theo yêu cầu.
Thumbor là một CDN hình ảnh nguồn mở, miễn phí giúp bạn dễ dàng nén, đổi kích thước và chuyển đổi hình ảnh. Bài đăng này cho phép bạn trực tiếp dùng thử Thumbor mà không cần cài đặt bất cứ thứ gì. Chúng tôi đã thiết lập máy chủ Thumbor hộp cát để bạn dùng thử tại http://34.67.235.246:8888
. Hình ảnh mà bạn sẽ thử nghiệm có tại http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg.
Điều kiện tiên quyết
Bài đăng này giả định rằng bạn đã hiểu cách CDN hình ảnh có thể cải thiện hiệu suất tải. Nếu không, hãy tham khảo bài viết Sử dụng CDN hình ảnh để tối ưu hoá hình ảnh. Hướng dẫn này cũng giả định rằng trước đây bạn đã từng xây dựng các trang web cơ bản.
Định dạng URL của Thumbor
Như đã đề cập trong bài viết Sử dụng CDN hình ảnh để tối ưu hoá hình ảnh, mỗi CDN hình ảnh sử dụng một định dạng URL hơi khác nhau cho hình ảnh. Hình 1 thể hiện định dạng của Thumbor.
![URL của Thumbor có các thành phần sau: nguồn gốc, khoá bảo mật, kích thước, bộ lọc và hình ảnh.](https://web.dev/static/articles/use-thumbor/image/a-thumbor-url-has-follow-485047f95e001.jpg?authuser=5&hl=vi)
Điểm gốc
Giống như tất cả nguồn gốc, nguồn gốc của URL Thumbor bao gồm 3 phần: lược đồ (hầu như luôn là http
hoặc https
), máy chủ lưu trữ và cổng. Trong ví dụ này, máy chủ lưu trữ được xác định bằng địa chỉ IP, nhưng nếu bạn đang sử dụng máy chủ DNS, thì máy chủ lưu trữ có thể có dạng như thumbor-server.my-site.com
. Theo mặc định, Thumbor sử dụng cổng 8888
để phân phát hình ảnh.
Đề xuất về
Phần unsafe
của URL cho biết rằng bạn đang sử dụng Thumbor mà không có khoá bảo mật. Khoá bảo mật ngăn người dùng thực hiện các thay đổi trái phép đối với URL hình ảnh của bạn. Khi thay đổi URL hình ảnh, người dùng có thể sử dụng máy chủ của bạn (và hoá đơn lưu trữ của bạn) để đổi kích thước hình ảnh của họ hoặc độc hại hơn để làm quá tải máy chủ của bạn. Hướng dẫn này không đề cập đến cách thiết lập tính năng khoá bảo mật của Thumbor.
Kích thước
Phần này của URL chỉ định kích thước mong muốn của hình ảnh đầu ra. Bạn có thể bỏ qua thuộc tính này nếu không muốn thay đổi kích thước của hình ảnh. Thumbor sẽ sử dụng nhiều phương pháp như cắt hoặc điều chỉnh theo tỷ lệ để đạt được kích thước mong muốn tuỳ thuộc vào các tham số URL khác. Phần tiếp theo của bài đăng này giải thích chi tiết hơn về cách đổi kích thước hình ảnh.
Hãy thử ngay:
Nhấp vào URL sau để xem hình ảnh được phân phát ở kích thước ban đầu trong thẻ mới: http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg
Ảnh gốc Đổi kích thước hình ảnh thành 100x100 pixel: http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg
![Hình ảnh có kích thước 100x100 pixel](https://web.dev/static/articles/use-thumbor/image/image-100x100-pixels-3848e03e36905.jpg?authuser=5&hl=vi)
Bộ lọc
Bộ lọc biến đổi hình ảnh. Phần bộ lọc của phân đoạn URL bắt đầu bằng filters:
, theo sau là một danh sách bộ lọc được phân tách bằng dấu hai chấm. Bạn có thể bỏ qua phần này nếu không sử dụng bộ lọc nào. Cú pháp cho từng bộ lọc giống như một lệnh gọi hàm (ví dụ: grayscale()
) không chứa hoặc có nhiều đối số.
Hãy thử ngay:
Áp dụng một bộ lọc duy nhất: hiệu ứng làm mờ Gaussian có bán kính 25 pixel: http://34.67.235.246:8888/unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg
Hình ảnh bị làm mờ Áp dụng nhiều bộ lọc. Chuyển đổi sang thang màu xám và xoay hình ảnh 90 độ: http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg
![Hình ảnh có thang màu xám đã được xoay 90 độ](https://web.dev/static/articles/use-thumbor/image/grayscale-image-has-been-787f2eb50dfd7.jpg?authuser=5&hl=vi)
Biến đổi hình ảnh
Phần này tập trung giới thiệu các chức năng của Thumbor phù hợp nhất với hiệu suất: nén, đổi kích thước và chuyển đổi giữa các định dạng tệp.
Nén
Bộ lọc chất lượng nén hình ảnh JPEG xuống mức chất lượng hình ảnh mong muốn (1-100). Nếu không cung cấp mức chất lượng, Thumbor sẽ nén hình ảnh xuống mức chất lượng là 80. Đây là một mặc định tốt: mức chất lượng 80-85 thường có ít ảnh hưởng đáng chú ý đến chất lượng hình ảnh, nhưng thường làm giảm kích thước hình ảnh khoảng 30-40%.
Hãy thử ngay:
Nén hình ảnh có chất lượng là 1 (rất kém): http://34.67.235.246:8888/unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg
Hình ảnh chất lượng thấp Nén hình ảnh bằng chế độ nén mặc định của Thumbor: http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg
![Hình ảnh nén không có vấn đề rõ ràng về chất lượng](https://web.dev/static/articles/use-thumbor/image/compressed-image-no-noti-ba38af80f42a4.jpg?authuser=5&hl=vi)
Đổi kích thước
Để đổi kích thước hình ảnh mà vẫn giữ tỷ lệ ban đầu, hãy sử dụng định dạng $WIDTHx0
hoặc 0x$HEIGHT
trong phần size
của chuỗi URL.
Hãy thử ngay:
Đổi kích thước hình ảnh thành chiều rộng 200 pixel trong khi vẫn giữ nguyên tỷ lệ ban đầu: http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg
Đã đổi kích thước hình ảnh thành chiều rộng 200 pixel Đổi kích thước hình ảnh thành chiều cao 500 pixel trong khi vẫn giữ nguyên tỷ lệ ban đầu: http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg
![Hình ảnh cao 500 pixel](https://web.dev/static/articles/use-thumbor/image/image-is-500-pixels-tall-992a9e041c75d.jpg?authuser=5&hl=vi)
Bạn cũng có thể đổi kích thước hình ảnh về tỷ lệ phần trăm hình ảnh gốc bằng cách sử dụng bộ lọc tỷ lệ. Nếu bạn chỉ định kích thước cùng với bộ lọc tỷ lệ, thì hình ảnh sẽ được đổi kích thước và sau đó bộ lọc tỷ lệ sẽ được áp dụng.
Hãy thử ngay:
Đổi kích thước hình ảnh thành 50% hình ảnh gốc: http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg
Đã đổi kích thước hình ảnh thành 50% kích thước so với hình ảnh gốc Đổi kích thước hình ảnh thành chiều rộng 1000 pixel, sau đó đổi kích thước hình ảnh thành 10% kích thước hiện tại: http://34.67.235.246:8888/unsafe/1000x/filters:proportion(.1)/https://web.dev/backdrop-filter/hero.jpg
![Hình ảnh rộng 100 pixel](https://web.dev/static/articles/use-thumbor/image/image-is-100-pixels-wide-07aa661c4581b.jpg?authuser=5&hl=vi)
Các phương thức này chỉ là một vài trong số nhiều tuỳ chọn cắt và đổi kích thước của Thumbor. Để tìm hiểu về các lựa chọn khác, hãy xem phần Cách sử dụng.
Định dạng tệp
Bộ lọc định dạng sẽ chuyển đổi hình ảnh thành jpeg
, webp
, gif
hoặc png
. Lưu ý rằng nếu đang tối ưu hóa cho hiệu suất, bạn nên sử dụng JPEG hoặc WebP vì tệp PNG và GIF có xu hướng lớn hơn đáng kể và cũng không nén.
Hãy thử ngay:
- Chuyển đổi hình ảnh sang WebP. Nếu bạn mở bảng điều khiển Network (Mạng) của Công cụ cho nhà phát triển, thì tiêu đề phản hồi Content-Type của tài liệu sẽ cho thấy máy chủ trả về một hình ảnh WebP: http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev/backdrop-filter/hero.jpg
![Ảnh chụp màn hình Công cụ cho nhà phát triển cho thấy loại nội dung (WebP) của hình ảnh](https://web.dev/static/articles/use-thumbor/image/devtools-screenshot-showi-0e757c2215957.jpg?authuser=5&hl=vi)
content-type
hiển thị trong Công cụ cho nhà phát triểnCác bước tiếp theo
Hãy thử các bộ lọc và phép biến đổi khác trên hình ảnh hero.jpg
.
Nếu bạn đang sử dụng cách cài đặt Thumbor của riêng mình, hãy xem phụ lục bên dưới giải thích cách thức và lý do sử dụng tệp thumbor.conf
.
Phụ lục: thumbor.conf
Bạn có thể thiết lập nhiều tuỳ chọn cấu hình được thảo luận trong bài đăng này, cùng nhiều tuỳ chọn khác làm mặc định bằng cách thiết lập và sử dụng tệp cấu hình thumbor.conf
. Các chế độ cài đặt trong tệp thumbor.conf
sẽ được áp dụng cho tất cả hình ảnh trừ phi các thông số chuỗi URL ghi đè.
Chạy lệnh
thumbor-config
để tạo tệpthumbor.conf
mới.thumbor-config > ./thumbor.conf
Mở tệp
thumbor.conf
mới. Lệnhthumbor-config
đã tạo một tệp liệt kê và giải thích tất cả các tuỳ chọn cấu hình Thumbor.Định cấu hình chế độ cài đặt bằng cách huỷ nhận xét về các dòng lệnh và thay đổi các giá trị mặc định. Bạn nên thiết lập các chế độ cài đặt sau:
QUALITY
AUTO_WEBP
MAX_WIDTH
vàMAX_HEIGHT
ALLOW_ANIMATED_GIFS
Chạy Thumbor bằng cờ
--conf
để sử dụng các chế độ cài đặtthumbor.conf
.thumbor --conf /path/to/thumbor.conf