Việc hiển thị hình ảnh trên 1 trang HTML rất đơn giản, ngay cả cho những người mới bắt đầu. Bạn chỉ cần dùng thẻ <img> và truyền thuộc tính src.
<img src="img_meme" />
- Dùng thuộc tính alt để hỗ trợ tối ưu cho việc tìm kiếm hình ảnh trên các công cụ tìm kiếm và thay thế khi hình ảnh không thể hiển thị.
- Dùng thẻ <figure> và <figcaption> nếu muốn hiển thị hình ảnh và chữ theo kèm.
- Dùng thẻ <picture> với <source> nếu bạn muốn xử lý tốt hơn cho việc responsive, bạn sẽ đặt vào nhiều size của hình cùng diều kiện để hiển thị hình ảnh theo ý muốn. Dùng <srcset> và <size> để đặt các điểu kiện.
- Lazy load đây là phần quan trọng, giúp cho người dùng sẽ có trải nghiệm tốt hơn khi mạng chưa tải kịp hình ảnh.
- Chắc chắn rằng bạn sẽ để width và height để đảm bảo rằng khi hình ảnh chưa kịp tải lên, thì trang web vẫn chừa đúng vị trí đó trong layout. đảm bảo không bị bể layout.
- Nếu hình ảnh có kích thước quá lớn, bạn nên dùng <link rel=”preload” as=”image”> để giúp trang web tải trước nhằm tăng trải nghiệm cho người dùng.
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>Mình đang tập viết blog nên câu cú và nội dung chưa được hoàn thiện lắm mong các bạn thông cảm và ủng hộ mình hơn nhé
