Hướng dẫn chuyển đổi hình ảnh (IMAGE TRANSFORM)

Tài liệu này hướng dẫn cách biến đổi hình ảnh on-the-fly thông qua việc thay đổi Image URL.
Bạn không cần xử lý hay lưu ảnh mới, chỉ cần chỉnh sửa URL trong HTML/CSS, hệ thống sẽ tự động tạo ảnh phù hợp.

1. Nguyên lý hoạt động

Hình ảnh được biến đổi tại thời điểm request bằng cách truyền các tham số vào URL.

Không cần resize ảnh thủ công
Giảm dung lượng ảnh truyền tải
Tối ưu cho web & mobile
Dễ dàng thay đổi kích thước ở frontend

2. Cấu trúc Image URL

Định dạng chuẩn:

http://your-domain.com/bfc/image/transform/{transform_params}/{image_path}

Trong đó:

• your-domain.com : domain CDN / image server
• transform_params : danh sách tham số xử lý ảnh
• image_path : đường dẫn ảnh gốc

3. Transform Params

Các tham số được ngăn cách bằng dấu phẩy (,).

3.1 Quality (chất lượng ảnh)

quality=\<int\>

• Giá trị: 1 – 100
• Mặc định: 85
• Ý nghĩa:
  • Quality thấp → ảnh nhẹ hơn, giảm dung lượng
  • Quality cao → ảnh nét hơn, dung lượng lớn hơn

Khuyến nghị:

• Web thường: 75 – 85
• Ảnh banner / hero: 85 – 95

3.2 Width (chiều rộng)

width=\<int\>

• Giá trị: 1 – 10000
• Chiều rộng mong muốn sau khi biến đổi (px)

3.3 Height (chiều cao)

height=\<int\>

• Giá trị: 1 – 10000
• Chiều cao mong muốn sau khi biến đổi (px)

3.4 Fit (chế độ xử lý ảnh)

fit=\<mode\>

Fit xác định cách hệ thống xử lý ảnh khi có width và / hoặc height.

4. Các chế độ Fit (Fit Modes)

4.1 scale-down

Không bao giờ phóng to ảnh

• Nếu ảnh lớn hơn kích thước yêu cầu → ảnh sẽ được thu nhỏ
• Nếu ảnh nhỏ hơn → giữ nguyên kích thước gốc

Phù hợp khi:

• Không muốn ảnh bị vỡ
• Hiển thị ảnh gốc an toàn

4.2 contain

Vừa khít nhất có thể – giữ nguyên tỷ lệ

• Ảnh sẽ được thu nhỏ hoặc phóng to
• Giữ nguyên tỷ lệ (không méo)
• Ảnh nằm trọn trong khung width × height
• Có thể xuất hiện khoảng trống

Nếu:

• Chỉ có width → fit theo width
• Chỉ có height → fit theo height

Phù hợp cho:

• Thumbnail
• Ảnh sản phẩm

4.3 cover

Lấp đầy toàn bộ khung hình

• Ảnh được thu nhỏ hoặc phóng to để phủ kín vùng width × height
• Giữ nguyên tỷ lệ
• Ảnh có thể bị cắt bớt nếu khác tỷ lệ

Phù hợp cho:

• Banner
• Cover
• Hero image

4.4 crop

Thu nhỏ + cắt xén, không bao giờ phóng to

• Ảnh không được phóng to
• Hành vi:
  • Nếu width/height > ảnh gốc → giống scale-down
  • Nếu width/height < ảnh gốc → giống cover

Phù hợp cho:

• Avatar
• Thumbnail cố định kích thước

4.5 pad

Resize tối đa + thêm nền

• Ảnh được resize tối đa để nằm trong khung
• Phần thiếu được bù bằng màu nền
• Màu nền mặc định: trắng

Phù hợp cho:

• Ảnh cần kích thước cố định
• Không muốn bị cắt ảnh

5. Ví dụ minh họa

Ảnh gốc

https://kenh14cdn.com/path/to/image.png

Ảnh sau khi biến đổi

• Chiều cao: 200px
• Fit: cover
• Quality: 90

https://kenh14cdn.com/bfc/image/transform/height=200,fit=cover,quality=90/path/to/image.png

Chỉ cần thay đổi URL, hệ thống sẽ:

• Resize ảnh
• Nén ảnh
• Trả về ảnh mới phù hợp

6. Gợi ý sử dụng thực tế