Truyền đạt kích thước hình ảnh, thực hành tốt nhất

Nếu bạn đang phát triển một tài liệu html một cách nghiêm túc bằng cách sử dụng cách thực hành tốt nhất hiện nay để giữ kiểu dáng khỏi đánh dấu, làm thế nào để bạn giao tiếp kích thước hình ảnh tốt nhất?

Thực tiễn tốt nhất trước đây muốn chiều cao và chiều rộng của hình ảnh với hình ảnh ở chỗ nó sẽ hiển thị nhanh hơn trình duyệt đang chờ hình ảnh tải xuống để có được kích thước của nó. Nhưng làm điều này dường như chống lại phong cách cô lập ra khỏi tài liệu.

Thêm một thuộc tính id cho mỗi hình ảnh và đặt chiều cao / chiều rộng trong css? Điều này có phủ nhận phần thưởng kết xuất của chiều cao và chiều rộng của hình ảnh nội tuyến không?

Có chiều rộng và chiều cao trong phần tử IMG không bị phản đối và chắc chắn là cách tốt nhất để cho trình duyệt biết chiều rộng và chiều cao của hình ảnh. Đi ra khỏi con đường của bạn để làm điều đó một cách khác là dư thừa và không cần thiết (và có thể là ngớ ngẩn). Đừng tạo ra bất kỳ công việc không cần thiết cho bản thân hoặc trình duyệt. Bám sát những điều cơ bản mà làm việc.

Câu trả lời của John Conde là tại chỗ. Hình ảnh có chiều rộng và chiều cao - đó là một phần nội dung của chúng , không phải phong cách của chúng . Vì vậy, không cần phải thực hiện một "tách" ở đây.

Tuy nhiên, một ngoại lệ: CSS cho kích thước hình ảnh là hữu ích nếu bạn có nhiều hình ảnh tất cả các kích thước tương tự (ví dụ như hình thu nhỏ). Ở đây tốt hơn nhiều là sử dụng lớp CSS để cắt giảm HTML và tăng tốc phát triển.

Đối với thiết kế của trang web bao gồm các nút và biểu tượng, giải pháp tốt nhất của bạn là có các họa tiết CSS.