URL trong srcset được đặt tên thế nào?

Mỗi chiều rộng thêm hậu tố - w trước phần mở rộng, ví dụ photo-640w.jpg.

Thuộc tính sizes dùng để làm gì?

Nó cho trình duyệt biết ảnh chiếm bao nhiêu không gian để chọn nguồn phù hợp.

Trình Tạo Srcset

Tạo thẻ img responsive với srcset và sizes.

URL ảnh gốcChiều rộng (px)Thuộc tính sizesVăn bản thay thế

Kết quả

<img
  src="/images/photo-1024w.jpg"
  srcset="
    /images/photo-320w.jpg 320w,
    /images/photo-640w.jpg 640w,
    /images/photo-1024w.jpg 1024w"
  sizes="(max-width: 640px) 100vw, 640px"
  alt=""
/>

Nhập URL ảnh gốc và các chiều rộng để tạo thẻ <img> responsive với thuộc tính srcset và sizes.

Cách sử dụng

Nhập URL ảnh gốc.
Liệt kê các chiều rộng mong muốn, ngăn cách bằng dấu phẩy.
Sao chép thẻ img responsive được tạo.

Câu hỏi thường gặp

URL trong srcset được đặt tên thế nào?: Mỗi chiều rộng thêm hậu tố -<width>w trước phần mở rộng, ví dụ photo-640w.jpg.
Thuộc tính sizes dùng để làm gì?: Nó cho trình duyệt biết ảnh chiếm bao nhiêu không gian để chọn nguồn phù hợp.

Công cụ liên quan

Tạo thẻ Meta
Xem trước Open Graph
Trình Tạo Meta Viewport