Đặt kích thước hình ảnh với CSS là "tốt" khi đặt chúng trong HTML?

Question

Khi lần đầu tiên tôi học HTML từ rất lâu, tôi đã nói rằng điều quan trọng là luôn đặt kích thước của hình ảnh trong HTML của bạn để các trình duyệt có thể vẽ một ô trống ở nơi hình ảnh sẽ hiển thị, hiển thị trang của bạn , sau đó tải xuống và hiển thị hình ảnh nơi chúng thuộc về. Nếu bạn không đặt giá trị chiều rộng và chiều cao cho hình ảnh của mình, trình duyệt sẽ phải tải xuống hình ảnh đầu tiên để khám phá thứ nguyên của chúng và nó sẽ làm chậm tải trang cho những người có kết nối crappy.

Trong vài năm qua tôi đã sử dụng CSS, tôi luôn đặt tờ khai width và height trong các thẻ img trong HTML của mình. Câu hỏi của tôi là, thiết lập chiều rộng và chiều cao trong bảng định kiểu, và không còn thêm các thuộc tính HTML này, chỉ là tốt? Nó chắc chắn làm cho HTML của tôi trông thậm chí còn sạch hơn mà không có chúng.

Answer 1

Đây là một câu hỏi hay, nhưng đó là một chút chủ quan và có thể dẫn đến cuộc thảo luận hơn thường được thông báo trên SO.

Quay lại thập niên 90, các trình duyệt bị chậm và internet cũng vậy. 56k mất một thời gian để chuyển hình ảnh cỡ trung bình. Trong thời gian đó, bố cục sẽ thay đổi kích thước để vừa với hình ảnh.

Tua đi một thập kỷ và tốc độ internet nhanh hơn nhiều, thời gian hiển thị nhanh hơn nhiều. Mọi người được sử dụng để bố trí thay đổi một chút trong nửa giây đầu tiên của tải trang. Nó không phải là xấu để không chỉ định kích thước hình ảnh, miễn là bạn hiểu bố cục của trang có thể thay đổi trong khi tải.

CSS được phân tích trước khi trang được tải, do đó, chỉ định chiều cao & chiều rộng trong CSS sẽ hoạt động cũng như chỉ định nội tuyến.

Một điều cần lưu ý là các kiểu nội tuyến (và bao gồm các khai báo chiều cao và chiều rộng) luôn là trump CSS cụ thể. Nếu bạn chỉ định chiều cao và chiều rộng của hình ảnh nội dòng, bạn có thể phải quay lại mỗi trang có hình ảnh nếu bạn muốn điều chỉnh kích thước của hình ảnh.

Cá nhân tôi khuyên bạn nên sử dụng CSS, vì nó giữ tất cả các kiểu của bạn ở cùng một nơi.

Answer 2

Tôi nghĩ sự khác biệt duy nhất là css có thể (vâng, có thể!) Không được đọc, vì vậy các thuộc tính <img> được sử dụng. Nhưng tôi không chắc chắn, tôi sẽ kiểm tra điều đó.

EDIT: http://www.mezzoblue.com/archives/2005/05/10/image_attrib/

Answer 3

Vâng, thiết lập các thuộc tính trong CSS sẽ làm việc chỉ là tốt.

Tôi không biết rằng nó ảnh hưởng đến tốc độ hiển thị trang theo bất kỳ cách nào, tuy nhiên. Hiệu ứng nhỏ nó có, là bố trí phụ thuộc vào hình ảnh sẽ xuất hiện để nhảy xung quanh trên trang cho đến khi hình ảnh được tải và phân bổ tất cả các không gian nó cuối cùng sẽ.

Đây không phải là thực tế mà tôi tự làm theo.

Answer 4

Một câu hỏi tương tự đã được thảo luận và trả lời tại đây:

Image width/height as an attribute or in CSS?

Nó cần được xác định inline. Nếu bạn đang sử dụng thẻ img, hình ảnh đó phải có giá trị ngữ nghĩa cho nội dung , đó là lý do tại sao thuộc tính alt là bắt buộc để xác thực.

Nếu hình ảnh là trở thành một phần của bố trí hoặc mẫu, bạn nên sử dụng một thẻ khác với thẻ img và gán hình ảnh làm nền CSS để các yếu tố . Trong trường hợp này, hình ảnh có không có ý nghĩa ngữ nghĩa và do đó không yêu cầu thuộc tính alt. Tôi là khá chắc chắn rằng hầu hết màn hình độc giả thậm chí sẽ không biết rằng hình ảnh CSS tồn tại.

này cũng rất hữu ích:

Nếu nó là một phần của mẫu trang web của bạn, tôi muốn đặt nó trong file CSS.

Nếu chỉ trên một trang, nó phải là nội tuyến (hoặc được xác định trong một khối CSS dành riêng cho từng trang ở trên cùng).

Answer 5

Sự cố bạn đề cập với hình ảnh không được tải xuống ngay lập tức cũng áp dụng cho CSS của bạn.

Sự khác biệt là không có phần còn lại của CSS, toàn bộ bố cục có thể không có ý nghĩa. Nói cách khác, nếu phần còn lại của CSS chưa được tải thì thực tế là kích thước hình ảnh cũng bị thiếu sẽ không thực sự đáng chú ý.

Vì vậy, cá nhân tôi nghĩ rằng nó là tốt để đặt các kích thước trong CSS.

Answer 6

Trong khi bạn có thể sử dụng CSS để dọn dẹp bố cục, nếu bố cục của bạn lộn xộn do không có khả năng tải một hình ảnh duy nhất, bạn nên khắc phục điều đó trước tiên.

bố trí hiện đại nên được kiểm soát bởi các div và CSS, hình ảnh trong cách bố trí cần được cung cấp duy nhất trong hình thức của một background-image:

Answer 7

Lý do luôn đặt kích thước vào mã HTML trong ngày là do thời gian tải - trên modem 14.4K, thậm chí các tệp hình ảnh tương đối nhỏ sẽ tải đáng kể sau khi tài liệu HTML chính đã tải.

Những ngày này vấn đề này ít hơn nhiều. Nếu đó là vấn đề, bạn cần lưu ý rằng tệp CSS sẽ tải sau tài liệu HTML chính, vì vậy nếu bạn chỉ chỉ định thứ nguyên ở đó, bạn có thể gặp phải vấn đề tương tự, nhưng tệp CSS thường khá nhỏ, vì vậy hiệu ứng nên giảm thiểu. Điểm khác là thiết kế HTML trường học cũ rất tập trung vào bố cục và kích thước hình ảnh thường là một phần quan trọng trong đó - nếu hình ảnh có kích thước sai, bố cục của toàn bộ trang thường hoàn toàn sai .

Thiết kế trang hiện đại tiếp cận mọi thứ rất khác nhau, đặt tối thiểu bất kỳ thông tin bố cục nào vào HTML và tóm tắt tất cả thông tin đó vào biểu định kiểu. Do đó trên một trang web hiện đại điển hình, cho đến khi các bảng định kiểu được tải, trang web sẽ chỉ là một loạt các khối và hoàn toàn thiếu thiết kế. Trong thực tế, thường đồ họa bản thân - không chỉ kích thước của chúng - được định nghĩa trong biểu định kiểu.

Vì vậy, câu trả lời là để làm theo các phương pháp thiết kế trang hiện đại, bạn nên đặt nó trong biểu định kiểu.

Rõ ràng điều quan trọng đối với hầu hết các trang web trong những ngày này là các bảng định kiểu tải nhanh, nhưng nó không chỉ là kích thước của đồ họa mà nó sẽ ảnh hưởng.