- Một số nguyên tắc chung
- Kích thước phù hợp
- Sử dụng
srcset - Sử dụng thẻ
<picture /> - Thuộc tính
sizes - Trường hợp đặc biệt: ảnh sản phẩm
Crop, thay đổi vị trí đặt hình, hoặc thậm chí là thay luôn một hình khác trên từng màn hình, miễn sao nó hiển thị đúng ý đồ của designer, như trong hình ví dụ, hình người chèo thuyền phải nằm giữa
Một số nguyên tắc chung
- Luôn sử dụng kích thước hình phù hợp
- Sử dụng thẻ
<picture >khi muốn chỉ định từng hình cũ thể cho từng màn hình. - Sử dụng
srcsettrong thẻ<img />để báo với trình duyệt chọn hình tốt nhất trong từng trường hợp - Nếu chỉ có 1 hoặc 2 hình, và nó chỉ được sử dụng ở một trang, sử dụng loại ảnh phù hợp
Kích thước phù hợp
Chỉ định đơn vị width của hình phù hợp, tránh để nó lớn viewport.
img, embed, object, video {
max-width: 100%;
}Sử dụng srcset
Với thuộc tính srcset, trình duyệt có thể quyết định load hình nào tùy theo thiết bị, ví dụ 2x trên màn hình retina, hoặc 1x trên màn hình retina khi mạng chậm
<img src="photo.png" srcset="photo@2x.png 2x" />Sử dụng thẻ <picture />
Thẻ <picture /> sẽ cho khai báo nhiều hình khác nhau ứng với từng điều kiện như: kích thước, độ phân giải, chiều đứng hay ngang.
<picture>
<source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
<source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
<img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>Xài thử https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/media.html
Thuộc tính sizes
Đọc thêm bài Tầm quan trọng của thuộc tính sizes trong thẻ img
Trường hợp đặc biệt: ảnh sản phẩm
Khách hàng luôn thích xem, sờ, ngắm thật kỹ sản phẩm muốn mua, luôn cho khách hàng ảnh thật chi tiết, to nhất, chất lượng nhất có thể, để khách hàng có thể zoom vào mà soi
Một số kỹ thuật khác
Nén ảnh
Kỹ thuật nén ảnh này, với mức độ nén phù hợp, định dạng của ảnh gốc, chất lượng ảnh sau nén không thay đổi, nhưng kích thước giảm khá nhiều.
Dùng javascript
Kiểm tra độ phân giả của màn hình bằng window.devicePixelRatio, và thông tin mạng navigator.connection rồi quyết định load hình nào.
Nhược điểm của cách này là phải đợi javascript chạy xong mới load hình, bị delay một chút.
Sử dụng loại ảnh phù hợp
Nếu được thì xài SVG vì dung lượng nhỏ mà có võ, có thể nén bằng công cụ này
Sử dụng Data URI để encode Base64 file hình thành string
<img src="data:image/svg+xml;base64,[data]">
<!-- Ví dụ -->
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">Để convert, thì có thể dùng jpillora.com/base64-encoder
string convert được cũng có thể xài với thuộc tính background trong css
.element {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIi...);
}Việc sử dụng background trong css có thể làm giảm số lượng HTTP request, bên cạnh đó là một số nhược điểm
- Trên mobile, Data URI hiển thị chậm hơn
<img src="http://" /> - Dảm số lượng request, nhưng tăng kích thước của request css
- Data URI không cache được
- IE8 không hổ trợ
- HTTP/2 giảm số lượng request không còn cần thiết
Trong CSS có một thuộc tính để load hình như thẻ <picture /> là image-set (hiện tại hổ trợ bởi chrome và safari)
.element {
background-image: url(icon1x.png);
background-image: -webkit-image-set(
url(icon1x.png) 1x,
url(icon2x.png) 2x
);
background-image: image-set(
url(icon1x.jpg) 1x,
url(icon2x.jpg) 2x
);
}Với độ phân giải 2x, 1x
@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2) /* Dành riêng cho Safari và Android */
{
.sample {
background-size: contain;
background-image: url(icon2x.png);
}
}Các phương pháp như lựa chọn hình JPG, GIF, PNG, các phương pháp giảm kích thước file (mình hay dùng FileOptimizer), image sprite, lazy load khá phổ biến nên mình không đề cập ở đây.
Initializing...