Trình duyệt hiển thị hình ảnh như thế nào?

Question

Mặc dù nghe có vẻ đơn giản nhưng tôi đã suy nghĩ về điều này.

Trình duyệt hiển thị hình ảnh chính xác như thế nào? Để có ví dụ về ý tôi, hãy nói rằng tôi có hình ảnh 1MB là 3000px x 1500px. Sau đó, tôi quyết định đặt hình ảnh này vào một vùng chứa được đặt thành chiều rộng: 100%; có nghĩa là nó sẽ giảm quy mô một cách thận trọng. Liệu trình duyệt có tải toàn bộ 1MB và sau đó tiến hành chia tỷ lệ hình ảnh xuống cho vừa với vùng chứa hay nó sẽ giảm kích thước và sau đó tiếp tục tải nó?

Tôi hỏi vì điều này là khá nhiều tình huống của tôi và nếu nó làm cũ (tải 1mb đầu tiên) sau đó tôi đoán tôi sẽ phải phục vụ một hình ảnh riêng biệt trên các thiết bị di động?

Cảm ơn

Chỉnh sửa: Kể từ khi mọi người đang nói rằng nó sẽ tải hình ảnh 1mb đầu tiên, làm thế nào bạn sẽ đề nghị tôi phục vụ cho một hình ảnh lớn cho người sử dụng? Quy mô nó xuống cho điện thoại di động và có một phiên bản di động/máy tính để bàn?

Answer 1

Trình duyệt (hiển nhiên) không thể mở rộng (hoặc thực hiện bất kỳ thứ gì) với hình ảnh trước khi tải.

Answer 2

Hình ảnh được truy xuất đầu tiên thông qua yêu cầu HTTP, ví dụ:

GET /images/myimage.png 

và sau đó tăng tỷ lệ/chuyển đổi được áp dụng. Vì vậy, nếu bạn muốn hình ảnh khác nhau cho các nền tảng khác nhau thì bạn nên yêu cầu như vậy.

Answer 3

CSS được áp dụng sau khi hình ảnh được tải hoàn toàn. Vì vậy, trong ngắn hạn nó sẽ tải hình ảnh 1MB đầu tiên và sau đó áp dụng các kích thước. Ngoài ra hình ảnh được lưu trữ ở phía máy chủ. Tôi tìm thấy một hình ảnh rất hữu ích trong đó mô tả này: -

Trên một mặt lưu ý:

Các trình duyệt thường làm cho cùng một trang nhiều lần trong một thời gian rất ngắn thời gian, đặc biệt sau khi đọc siêu dữ liệu hình ảnh.