Nơi để chỉ định kích thước hình ảnh để hiển thị nhanh nhất: trong HTML hoặc trong CSS?

Question

Tôi đã học được rằng cách tốt nhất là chỉ định rõ kích thước hình ảnh. Sau đó, trình duyệt có thể đã bố trí trang trong khi vẫn tải xuống hình ảnh, do đó cải thiện thời gian hiển thị trang (percieved).

Điều này có đúng không? Và nếu có, có sự khác biệt trong việc chỉ định kích thước trong HTML hoặc CSS không?

• HTML: <img src="" width="200" height="100">
• Inline CSS: <img src="" style="width: 200px; height: 100px">
• CSS bên ngoài: #myImage { width: 200px; height: 200px; }

Answer 1

Theo Google Page Speed, nó không thực sự quan trọng nếu bạn chỉ định kích thước thông qua CSS hoặc HTML, miễn là CSS bạn nhắm mục tiêu các thẻ IMG chính nó và không phải là một yếu tố phụ huynh:

Khi trình duyệt đưa ra trang, nó cần để có thể chảy xung quanh các yếu tố thay thế như hình ảnh. Nó có thể bắt đầu hiển thị một trang ngay cả trước khi hình ảnh được tải xuống, miễn là nó biết kích thước để bọc các phần tử không thể thay thế xung quanh. Nếu không có thứ nguyên 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 hình ảnh thực tế, trình duyệt sẽ yêu cầu chỉnh lại và vẽ 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.

Tuy nhiên, lưu ý rằng họ khuyên không thay đổi kích thước hình ảnh sử dụng các kích thước, tức là luôn luôn sử dụng các kích thước thực:

Không sử dụng thông số kỹ thuật width và height để mở rộng hình ảnh một cách nhanh chóng. Nếu tệp hình ảnh thực sự là 60 x 60 pixel, không đặt kích thước thành 30 x 30 trong HTML hoặc CSS. Nếu hình ảnh cần nhỏ hơn, hãy mở rộng hình ảnh trong trình chỉnh sửa hình ảnh và đặt kích thước của hình ảnh để khớp (xem hình ảnh Tối ưu hóa để biết chi tiết.)

Answer 2

Tôi nghĩ CSS giúp bạn linh hoạt hơn: bạn đặc biệt có thể thiết lập chiều rộng hoặc chiều cao trong khi thiết lập các kích thước khác đến auto. Nhưng khi đặt cả hai chiều, tôi không có gì khác biệt.

Answer 3

Tôi có xu hướng làm điều đó trong CSS. Điều này chắc chắn là một chiến thắng khi có nhiều hình ảnh có cùng kích thước (vì vậy bạn có thể thực hiện các công cụ như .comment img.usergroup { width: 16px; height: 16px; }) và có cùng hình ảnh theo tỷ lệ trong các bảng kiểu khác nhau như chủ đề có thể chọn người dùng.

Khi bạn có hình ảnh hoàn toàn độc lập chỉ được sử dụng trên trang web một lần, không thực sự có ý nghĩa khi trừu tượng hóa kích thước của chúng ra CSS, vì vậy phiên bản HTML có thể phù hợp hơn ở đó.

Answer 4

Nếu bạn đặt một hình ảnh lớn trong trang HTML không có thứ nguyên, bạn chắc chắn nên chú ý đến việc chuyển trang bố cục khi hình ảnh được tải xuống (qua kết nối internet, nếu không phải cục bộ).

Theo câu trả lời khác, nó không tạo ra nhiều khác biệt cho dù bạn làm điều này trong HTML hay CSS.

Answer 5

Điều này không trả lời trực tiếp câu hỏi của bạn, nhưng tôi sẽ không dựa vào kích thước của hình ảnh của bạn để bố cục trang. Thay vào đó, hãy bao gồm hình ảnh trong phần tử cấp khối. Điều này làm giảm cả HTML và CSS từ việc phải giữ thông tin mà nó thực sự không nên vì hình ảnh có thể thay đổi theo thời gian.