Câu hỏi 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?


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 các 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 là

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

hoặc là

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

65
2017-08-08 01:21


gốc


có thể trùng lặp Chiều rộng / chiều cao của ảnh dưới dạng thuộc tính hoặc trong CSS? - Mike Cluck


Các câu trả lời:


Theo Tốc độ trang Google, bạn luôn phải 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 như 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 điều đó

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

Chỉnh sửa: Ai đó đã đề xuất trong các nhận xét rằng sẽ nhanh hơn nếu không thêm bất kỳ thuộc tính nào. Theo Google (không phải là họ là kết thúc tất cả kiến ​​thức về trình duyệt):

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. - - Đọc thêm

Cho rằng, bạn có thể làm các kích thước img trong CSS, nhưng để xác nhận bạn sẽ phải làm điều đó trong một tệp CSS, không phải nội dòng.

BTW, Google Page Speed ​​là một loạt các mẹo tập trung vào việc hiển thị trang nhanh hơn. 


76
2017-08-08 01:23



trang sẽ hiển thị nhanh hơn mà không cần bất kỳ thuộc tính nào. - Elzo Valugi
@Elzo Theo Google nó nói nó sẽ. Đọc này: code.google.com/speed/page-speed/docs/… - Tyler Carter
Điều gì sẽ xảy ra nếu hình ảnh không được hiển thị theo kích thước thực tế của chúng? Tôi có nên xác định chiều rộng và chiều cao của mình hay tôi có thể xác định chiều rộng và chiều cao được hiển thị của họ không? I E. nếu có một hình ảnh có kích thước 500 * 500 px nhưng nó sẽ được hiển thị là 45 * 45? - lindhe
@TylerCarter Tôi biết đây là một thời gian dài sắp tới, nhưng tôi thề W3C được sử dụng để ném lỗi / cảnh báo khi bạn không chỉ định chiều cao và chiều rộng. Họ không còn ném cảnh báo / lỗi .. có bản cập nhật cho điều này không? - Govind Rai
Liên quan: "Có. [width thuộc tính] là không cần thiết, nhưng nó sẽ giúp trình duyệt làm cho trang của bạn nhanh hơn và sạch hơn, đặc biệt khi được kết hợp với phần tử chiều cao .... Làm điều này sẽ dừng bước nhảy khó chịu đó xảy ra khi một hình ảnh mới tải đột nhiên chiếm không gian tài liệu và đẩy tất cả nội dung xuống, khiến người dùng mất vị trí của họ trên trang. Vì vậy, có, sử dụng thuộc tính chiều rộng (và chiều cao) .... để xác định chiều cao nội tại của tệp hình ảnh, không chỉ định kích thước bố cục mong muốn.", html.com/attributes/img-width


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

Xem 13.7 Trình bày trực quan các hình ảnh, đối tượng và các applet trong thông số kỹ thuật HTML 4.01:

Các thuộc tính chiều cao và chiều rộng 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ể   dự trữ không gian cho nó và tiếp tục   hiển thị tài liệu trong khi chờ   cho dữ liệu hình ảnh.

họ đang đề nghị và không yêu cầu nhưng bạn thực sự, thực sự nên chỉ định chúng ;-)

Ngoài ra, hãy đảm bảo kích thước bạn chỉ định khớp với kích thước của hình ảnh.

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


22
2017-08-08 01:28



Sau khi thử nghiệm, Chrome và Safari dự trữ dung lượng trước khi tải. Firefox tuy nhiên không. - lulalala


Có, bạn nên chỉ định kích thước, vì vậy các tác nhân người dùng biết trước kích thước trước khi hình ảnh được tải đầy đủ để bố cục không thể bị hỏng nếu nó dựa trên thứ nguyên 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 kích thước đó.


4
2017-08-08 01:27



Anh ta đang hỏi phương pháp thêm kích thước hình ảnh nào nếu anh ta có nên hay không. - MitMaro
Tôi phải quên thêm nó - nó được ưa thích hơn với các thuộc tính tự nhiên. không bao giờ một lý do để dựa vào css nội tuyến. - meder omuraliev


Câu trả lời này bây giờ là 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ó không thực sự quan trọng mà bạn sử dụng, nhưng tôi sẽ khuyên bạn nên sử dụng chỉ có một.

Tôi muốn giới thiệu thuộc tính trên 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.


1
2017-08-08 01:31



? Điều này đã được downvoted (không có bình luận về lý do tại sao). Tôi upvoted nó trở lại không, ít nhất. Đây là lý do tại sao, và câu hỏi này không đi vào nó, nhưng CÓ - có giá trị chỉ định một trong các thuộc tính thứ nguyên. Nó phải làm với việc chia tỷ lệ hình ảnh để vừa với một thùng chứa cụ thể và cần phải mở rộng tỷ lệ (giữ lại tỷ lệ) chiều cao và chiều rộng cả hai. Trình duyệt có thể được dựa vào để làm điều đó. Điều đó nói rằng, tôi thấy "chính xác" của việc cung cấp cả hai, nhưng trong một số trường hợp chỉ có một chiều (cho phép trình duyệt tính toán tỷ lệ khác). - Chris Adragna
Tôi nghĩ rằng @MitMaro đã nói về chỉ sử dụng phong cách hoặc là các thuộc tính chiều rộng, chiều cao. Không chỉ định một chiều rộng hoặc chiều cao. Downvote là vì tất cả các trình duyệt sử dụng phổ biến hiện nay đều hỗ trợ định cỡ một ảnh với CSS và những kiểu có kiểu tắt không thể mong đợi để có được trải nghiệm người dùng tốt (ngay cả trình đọc màn hình cho người mù sử dụng CSS). - Angry Dan
Đó là năm 2016 và tôi vẫn nhận được bố cục nhảy xung quanh khắp nơi, vì tải hình ảnh. Nếu hình ảnh có width và height các thuộc tính, điều này sẽ không phải là chói tai. - Flimm
@MitMaro Hãy nỗ lực để ứng biến hoặc chỉnh sửa câu trả lời hợp lệ của bạn. Đung vậy; tuy nhiên, nó vẫn thiếu nội dung thực sự cần thiết để biện minh cho quan điểm của bạn - Nevermore


Thực ra bạn không phải chỉ định chúng. Phù hợp để w3c specification 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.

Các thuộc tính chiều cao và chiều rộng cung cấp cho các tác nhân 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ể đặt trước không gian cho nó và tiếp tục hiển thị tài liệu trong khi đợi dữ liệu hình ảnh.

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

0
2017-08-08 01:38



Tôi đã đọc rằng điều này giúp cải thiện thời gian tải (không có vấn đề bao nhiêu có thể được, bất kể) nếu bạn đặt chúng trong mặc dù họ không cần thiết. - PositiveGuy