Tôi có nên chỉ định thuộc tính chiều cao và chiều rộng cho IMGs trong HTML không?

Question

Nếu tôi biết chiều cao và chiều rộng của hình ảnh mà tôi sẽ hiển thị với thẻ hình ảnh, tôi có nên bao gồm thuộc tính chiều cao và chiều rộng hay chỉ cần đặt thông tin trong CSS? Hoặc cả hai?

Ví dụ:

<img src="profilepic.jpg" height="64" width="64" /> 

hoặc

<img src="profilepic.jpg" height="64" width="64" style="height: 64px; width: 64px;" /> 

hoặc

<img src="profilepic.jpg" style="height: 64px; width: 64px;" /> 

Answer 1

Theo Google Page Speed, bạn luôn cần xác định chiều rộng và chiều cao trong thẻ hình ảnh. Tuy nhiên, để xác thực bạn không thể sử dụng thẻ kiểu.

Ngoài ra, bạn nên luôn luôn chỉ định cùng chiều cao và chiều rộng làm hình ảnh thực tế để trình duyệt không phải thực hiện bất kỳ sửa đổi nào đối với nó như thay đổi kích thước.

tôi muốn đề nghị làm việc đó

<img src="..." height="20" width="50"> 

---

Edit: Có người đề nghị trong các ý kiến ​​rằng nó sẽ được nhanh hơn để chỉ không thêm bất kỳ các thuộc tính. Theo Google (không phải chúng là kết thúc tất cả kiến ​​thức về trình duyệt):

Nếu không có tham số nào được chỉ định trong tài liệu chứa hoặc nếu kích thước được chỉ định không khớp với kích thước của hình ảnh thực tế, trình duyệt sẽ yêu cầu chỉnh lại và sơn lại khi hình ảnh được tải xuống. Để ngăn các bản sao lưu, hãy chỉ định chiều rộng và chiều cao của tất cả các hình ảnh, trong thẻ HTML hoặc trong CSS. - Read More

Cho rằng, bạn có thể làm kích thước img trong CSS, nhưng để xác thực bạn sẽ phải thực hiện nó trong tệp CSS chứ không phải nội tuyến.

BTW, Tốc độ trang của Google là một loạt các mẹo tập trung vào hiển thị trang nhanh hơn.

Answer 2

Có bạn nên chỉ định kích thước, vì vậy tác nhân người dùng biết trước kích thước trước khi hình ảnh tải đầy đủ để bố cục không thể bị hỏng nếu nó dựa trên kích thước của hình ảnh được tải. Ngoài ra, nếu bạn đang dựa vào thuộc tính bộ lọc của IE6 để chèn png của bạn sẽ cần những thứ nguyên đó.

Answer 3

Bạn phải luôn chỉ định height và width của hình ảnh nếu chỉ để giúp trình duyệt đưa trang ra ngay cả trước khi hình ảnh được tải xuống.

Xem 13.7 Visual presentation of images, objects, and applets trong HTML 4,01 spec:

Chiều cao và các thuộc tính chiều rộng cho đại lý người dùng một ý tưởng về kích thước của một hình ảnh hoặc đối tượng để họ có thể không gian dự trữ cho nó và tiếp tục hiển thị tài liệu trong khi đợi cho dữ liệu hình ảnh.

Họ là khuyến và không cần nhưng bạn thực sự, thực sự nên xác định họ ;-)

Ngoài ra, hãy chắc chắn rằng kích thước bạn chỉ định thực sự phù hợp với kích thước của hình ảnh.

Không có gì tệ hơn việc chờ trang tải xuống chỉ vì những hình ảnh 400x300 (!) Này thực tế giống như 4000x3000 ở chất lượng 95%.

Answer 4

Câu trả lời này hiện đã được đề ngày và tôi sẽ không đưa ra đề xuất tương tự như tôi đã làm trong năm 2009 với các trình duyệt hiện đại.

---

Nó thực sự không quan trọng bạn sử dụng cái nào, nhưng tôi khuyên bạn chỉ nên sử dụng cái nào.

Tôi muốn giới thiệu thuộc tính qua giải pháp css vì nó tương thích hơn với các trình duyệt cũ hơn và những người bị tắt kiểu.

Answer 5

Thực ra bạn không phải chỉ định chúng. Theo đó, w3c specificatio n bạn chỉ sử dụng chúng để ghi đè các giá trị mặc định được nhúng trong tệp hình ảnh và được trình duyệt đọc. Khi được sử dụng sẽ mở rộng kích thước hình ảnh gốc thành các kích cỡ nhất định để đặt chúng làm một phép tính bổ sung cho trình duyệt.

Thuộc tính chiều cao và chiều rộng cung cấp cho tác nhân người dùng ý tưởng về kích thước của hình ảnh hoặc đối tượng để họ có thể đặt trước không gian và tiếp tục hiển thị tài liệu trong khi chờ dữ liệu hình ảnh.

<img src="profilepic.jpg" alt="image" />