Một ảnh mẫu tóc có thể nhìn ổn trên máy tính nhưng mất phần đuôi khi được đặt vào thẻ ảnh trên điện thoại. Với album của một salon như A Vòong Hair Salon, tôi tách bài toán thành hai phần: giữ đúng bố cục và chọn tệp vừa kích thước hiển thị.
1. Dùng cùng một bố cục cho các bản ảnh
Ví dụ, xuất cùng một ảnh tỷ lệ 4:5 ở các chiều rộng 360, 720 và 1080 px. Hãy kiểm tra ảnh gốc còn đủ đỉnh đầu và phần ngọn tóc. Nếu cắt lại từng bản với một bố cục khác, ảnh có thể đổi vị trí khi trình duyệt chọn tệp khác.
<figure class="hair-card"> <img src="toc-layer-720.webp" srcset=" toc-layer-360.webp 360w, toc-layer-720.webp 720w, toc-layer-1080.webp 1080w " sizes="(min-width: 452px) 420px, calc(100vw - 32px)" width="720" height="900" alt="Tóc layer dài, các tầng chuyển nhẹ và phần đuôi còn đầy" loading="lazy" decoding="async" > <figcaption>Mẫu layer dài, nhìn từ phía sau.</figcaption> </figure> <style> .hair-card { width: min(420px, calc(100vw - 32px)); max-width: 100%; margin: 0; } .hair-card img { display: block; width: 100%; height: auto; } </style> Mỗi giá trị w trong srcset phải khớp chiều rộng thật của tệp. sizes mô tả chiều rộng hiển thị trong bố cục này. Nếu đưa thẻ vào một cột hẹp hơn, cập nhật sizes cho sát chiều rộng thực tế. Dùng loading="lazy" cho ảnh nằm dưới vùng nhìn đầu tiên. Với ảnh chính xuất hiện ngay khi tải trang, bỏ thuộc tính này.
2. Kiểm tra bằng DevTools
Mở Device Toolbar, thử chiều rộng 360 và 390 px, rồi chạy:
const photo = document.querySelector(".hair-card img"); console.table({ displayedWidth: Math.round(photo.getBoundingClientRect().width), chosenFile: photo.currentSrc, devicePixelRatio: window.devicePixelRatio }); Dùng Network để kiểm tra tệp thực sự tải và dung lượng của nó. Khi thử từng cấu hình, tải lại trang với bộ nhớ đệm tắt để tránh nhầm ảnh đã có sẵn với lựa chọn mới. Cuối cùng, nhìn lại đỉnh đầu và phần đuôi trên cả hai kích thước. Nếu ảnh bị cắt, chỉnh bố cục ảnh gốc trước khi tăng độ phân giải.
