Tối ưu hoá hình ảnh bằng Thumbor

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.

Katie Hempenius
Katie Hempenius
X

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.
Định dạng URL của Thumbor

Đ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:

  1. 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

    Hình ảnh ở kích thước gốc
    Ảnh gốc

  2. Đổ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
Đã đổi kích thước hình ảnh thành 100x100 pixel

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:

  1. Á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ị mờ
    Hình ảnh bị làm mờ

  2. Á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 độ
Hình ảnh xoay, có thang màu xám

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:

  1. 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
    Hình ảnh chất lượng thấp

  2. 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
Hình ảnh nén

Đổ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:

  1. Đổ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

    Hình ảnh rộng 200 pixel
    Đã đổi kích thước hình ảnh thành chiều rộng 200 pixel

  2. Đổ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
Đã đổi kích thước hình ảnh thành chiều cao 500 pixel

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:

  1. Đổ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

    Hình ảnh có kích thước bằng 50% kích thước gốc
    Đã đổi kích thước hình ảnh thành 50% kích thước so với hình ảnh gốc

  2. Đổ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
Đã đổi kích thước hình ảnh thành chiều rộng 100 pixel

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:

  1. 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
Tiêu đề phản hồi content-type hiển thị trong Công cụ cho nhà phát triển

Cá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 đè.

  1. Chạy lệnh thumbor-config để tạo tệp thumbor.conf mới.

    thumbor-config > ./thumbor.conf

  2. Mở tệp thumbor.conf mới. Lệnh thumbor-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.

  3. Đị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

  4. Chạy Thumbor bằng cờ --conf để sử dụng các chế độ cài đặt thumbor.conf.

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