Kích thước hiển thị khác kích thước tệp
Trong các ví dụ này không có CSS thay kích thước. Thuộc tính `width` và `height` của img đặt chiều rộng và chiều cao hiển thị bằng pixel. Nếu chỉ đặt một chiều, chiều còn lại được tính theo tỉ lệ ảnh gốc.
Đặt cả hai chiều đúng tỉ lệ giúp dành sẵn khoảng trống cho ảnh khi đang tải. Nếu đặt hai chiều sai tỉ lệ, ảnh có thể bị kéo dẹt hoặc kéo dài.
Ảnh 320 × 180 thu còn rộng 160
```html
<img src="anh/sach.png" alt="Cuốn sách mở" width="160">
```
Chiều rộng mới bằng một nửa chiều rộng gốc: 160 : 320 = 1/2. Chiều cao cũng giảm một nửa: 180 × 1/2 = 90. Vì vậy ảnh hiển thị **160 × 90 pixel**.
Nếu đặt width="160" và height="180", chiều rộng giảm nhưng chiều cao giữ nguyên, làm thay đổi tỉ lệ. Muốn đặt cả hai chiều mà giữ tỉ lệ, dùng width="160" và height="90".
Thu nhỏ trên trang chưa làm tệp nhẹ hơn
Đặt width nhỏ hơn chỉ thay kích thước hiển thị; trình duyệt vẫn cần tải tệp được src chỉ tới. Muốn giảm lượng dữ liệu tải, cần chuẩn bị tệp có kích thước ảnh, chất lượng và định dạng phù hợp.
Đường dẫn tương đối thuận tiện khi giữ media cùng bộ trang web. Khi chuyển bộ mẫu, phải chuyển đủ tệp và giữ cấu trúc thư mục; dùng đường dẫn tương đối không tự bảo đảm ảnh luôn tồn tại.
Bài luyện
Ảnh gốc 320 × 180, chỉ đặt width="160", không có CSS đổi kích thước. Ảnh hiển thị bao nhiêu?
Cần giảm chiều cao theo cùng tỉ lệ.
Chiều rộng đã đặt là 160.
Đúng. Cả hai chiều cùng giảm một nửa.
Chiều rộng và chiều cao không đổi chỗ.
Lời giải
Tỉ lệ thu theo chiều rộng là 160/320 = 1/2. Chiều cao mới là 180 × 1/2 = 90; kết quả 160 × 90 pixel.
Bài luyện
Với ảnh gốc 320 × 180, cặp nào giữ đúng tỉ lệ khi không có CSS thay kích thước?
Chỉ chiều rộng giảm một nửa.
Đúng. Cả hai chiều cùng giảm một nửa.
Cặp này không giữ tỉ lệ 320:180.
Chỉ chiều cao giảm một nửa.
Lời giải
Tỉ lệ gốc là 320:180 = 16:9. Cặp 160:90 cũng bằng 16:9, nên giữ hình dạng; ba cặp còn lại làm thay đổi tỉ lệ.
Bài luyện
Chỉ đổi width từ 320 xuống 160 có chắc làm giảm số byte của tệp PNG phải tải không?
Kích thước hiển thị không quyết định số byte như vậy.
img không nén lại tệp gốc do đổi width.
Đổi width không chuyển định dạng.
Đúng. Cần phân biệt hiển thị với dữ liệu tải.
Lời giải
width đặt kích thước ảnh trên trang. src vẫn trỏ cùng tệp PNG, nên trình duyệt vẫn tải dữ liệu của tệp đó. Muốn giảm dung lượng cần xử lí tệp ảnh phù hợp trước.
Đang học