Chỉ định kích thước hình ảnh để cải thiện hiệu suất trình duyệt

Gần đây tôi đã thực hiện kiểm toán trên trang web của mình bằng Google Developer Tools. Các hình ảnh của tôi đều có cùng kích thước (500 ngang x 300 pixel dọc) vì vậy tôi nghĩ sẽ tốt hơn nếu tôi bỏ các thuộc tính kích thước hình ảnh vì sẽ không cần phải tính kích thước hình ảnh khi nó đã có kích thước chính xác.

Trong phần Sử dụng mạng, Chỉ định kích thước hình ảnh tôi thấy như sau

A width and height should be specified for all images in order to speed up 
page display. The following image(s) are missing a width and/or height:

Giờ tôi đang bối rối. Tôi có nên thực sự thêm các thuộc tính chiều rộng và chiều cao cho hình ảnh của mình hay không, mặc dù chúng đã có kích thước phù hợp? Có vẻ dư thừa.

Trình duyệt tải dữ liệu song song và cố gắng bắt đầu hiển thị trang càng sớm càng tốt.

Nếu bạn không chỉ định kích thước, trình duyệt sẽ không biết hình ảnh sẽ lớn đến mức nào cho đến khi quá trình tải xuống hình ảnh hoàn tất.

Sự chậm trễ này buộc trình duyệt phải sơn lại hoặc chỉnh lại bố cục - trì hoãn thời gian tải trang.

Càng nhiều hình ảnh với vấn đề này - trang sẽ tải càng chậm.

Nếu bạn chỉ định kích thước hình ảnh, bằng HTML hoặc CSS, thì trình duyệt có thể tránh việc sơn lại và chỉnh lại nội dung.

Do đó, bạn phải luôn chỉ định kích thước hình ảnh. Google có một số lời khuyên về điều này.

https://developers.google.com/speed/docs/best-practices/rendering#SpecifyImageDimensions

Để biết thêm về quá trình kết xuất trình duyệt, hãy xem: http://taligarsiel.com/Projects/howbrowserswork1.htm

Không chắc chắn cách thức cập nhật này nhưng cung cấp cái nhìn sâu sắc về cách trình duyệt hoạt động và lý do tại sao bạn có thể muốn làm những việc như không sử dụng CSS nội tuyến để ghi đè lên biểu định kiểu.

Responsive Design thường không sử dụng bất kỳ thuộc tính chiều rộng hoặc chiều cao nào

Google Development Tools là một hướng dẫn và bạn không cần phải thực thi mọi thứ bạn đọc trên trang web của họ, trên thực tế, một số nội dung đã lỗi thời. Phần lớn các trang web phản hồi không sử dụng widthhoặc heightvì họ muốn hình ảnh thích ứng với kích thước màn hình và bằng cách sử dụng chiều rộng và chiều cao cố định <img>sẽ làm giảm trải nghiệm người dùng và Google đã tuyên bố đây là một trong những yếu tố quan trọng nhất.

Giải pháp CSS

Bạn có thể chọn sử dụng một yếu tố cấp khối có chiều rộng và chiều cao, cá nhân tôi sẽ không sử dụng một yếu tố nhưng đây là những gì Google nói về cấp độ khối.

Đảm bảo chỉ định kích thước cho thành phần hình ảnh hoặc cha mẹ ở cấp độ khối Hãy chắc chắn đặt kích thước trên chính thành phần đó hoặc cha mẹ ở cấp độ khối. Nếu cha mẹ không ở cấp độ khối, kích thước sẽ bị bỏ qua. Không đặt kích thước trên tổ tiên không phải là cha mẹ ngay lập tức.

Tôi tưởng tượng điều này sẽ trông giống như:

Thiết kế tĩnh .ic {width:500px;height:500px;}

Thiết kế đáp ứng:

@media only screen and (max-width: 40em){.ic{width:1px;height:1px;}} Mobiles
@media only screen and (min-width: 40.063em){.ic{width:1px;height:1px;}} Tablets
@media only screen and (min-width: 40.063em) and (max-width: 64em){.ic{width:1px;height:1px;}} Small Screens
@media only screen and (min-width: 64.063em){.ic{width:1px;height:1px;}} Large Screens

Sau đó, bạn sẽ cần sử dụng JavaScript hoặc một giải pháp khác để phát hiện quan điểm và phục vụ 4 phiên bản khác nhau của hình ảnh, một lần nữa ít hơn thực tế. Vì vậy, nếu bạn đang sử dụng thiết kế đáp ứng thì tôi sẽ tiếp tục một cách an toàn và không bận tâm thêm chiều rộng và chiều cao để trang web của bạn được linh hoạt cho dù màn hình nào xem nó.

Tôi vừa trả lời một câu hỏi tương tự trên Wordpress Stack Exchange. Đăng lại ở đây (quản trị viên / người điều hành: nếu điều này không được phép, hãy cho tôi biết cách giúp đỡ phù hợp).

không thực sự có nghĩa là bạn cần chỉ định chiều rộng và chiều cao trong html. Điều đó có nghĩa là bạn phải dự trữ không gian thích hợp và khi hình ảnh được tải, trình duyệt không phải chỉnh lại và sơn lại trang.

Bên cạnh đó, nếu bạn mã hóa kích thước, nó sẽ đánh bại hành vi phản ứng nhanh. Nếu bố cục của bạn không phản hồi, nó ổn, nhưng nếu bạn muốn giữ một số phản hồi, bạn chỉ có thể sử dụng CSS để đạt được kết quả.

Hầu hết thời gian, sử dụng cả chiều rộng và max-width:100sẽ thực hiện công việc, nhưng bài đăng này từ Tạp chí Smashing có một kỹ thuật thú vị: thay vì sử dụng chiều rộng tối đa: 100%, bạn có thể sử dụng Hack Pad-bottom Hack :

"Với kỹ thuật này, chúng tôi xác định chiều cao là thước đo so với chiều rộng. Đệm và lề có các thuộc tính nội tại như vậy và chúng tôi có thể sử dụng chúng để tạo tỷ lệ khung hình cho các yếu tố không có bất kỳ nội dung nào trong chúng. Bởi vì đệm có khả năng này , chúng ta có thể đặt phần đệm dưới cùng tương đối với chiều rộng của một phần tử. Nếu chúng ta cũng đặt chiều cao thành 0, chúng ta sẽ có được những gì chúng ta muốn. [...]

Bước tiếp theo là đặt một hình ảnh bên trong container và đảm bảo nó lấp đầy container. Để làm điều này, chúng ta cần định vị hình ảnh tuyệt đối bên trong vật chứa, như vậy: "

.img-container {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    background-color: black;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Quá trình diễn ra như thế này:

1. đọc tập tin .html
2. từ tiêu đề tệp .html, đọc các tệp .css, .js (.js phải SAU .css ...)
3. đọc img và script từ trang

Do đó, thẻ hình ảnh được đọc "muộn". Tuy nhiên, để tính toán định dạng của trang của bạn, có kích thước của hình ảnh là một điều tốt (nếu không các trình duyệt sử dụng kích thước "ngẫu nhiên" như 1x1, 25x25, ... bất cứ điều gì trình duyệt đã lập trình.)

Vì vậy, để tránh việc trang bị hỏng cho đến khi hình ảnh được đọc, việc đặt thuộc tính chiều rộng và chiều cao cho phép trình duyệt tính toán bố cục trang phù hợp ngay lập tức. Đây là lý do tại sao nên có chúng ở đó, ngay cả khi chúng có cùng kích thước.