CSS thay đổi kích thước hình ảnh vẫn là một ý tưởng tồi?

Người ta luôn quan sát rằng việc sử dụng các thuộc tính chiều rộng / chiều cao trên hình ảnh không phải là hình ảnh thực tế là ý tưởng tồi. Nó có thể có nghĩa là hình ảnh pixalated hoặc kích thước tải xuống lớn hơn không cần thiết.

Nhưng, đây có còn là một vấn đề? Tôi sẽ không đề xuất kích thước ảnh lên, nhưng việc thu nhỏ kích thước không phải là vấn đề với điều kiện là nó không quá khác biệt so với ảnh gốc và giữ nguyên tỷ lệ.

Ví dụ: tôi có một bức ảnh có kích thước 600x400 và tôi dán chiều rộng 400px trên đó. Hầu hết các trình duyệt hiện đại thu nhỏ hình ảnh xuống và có vẻ như kết xuất vẫn còn khá.

Vì vậy, quan điểm của mọi người về điều này là gì?

Đừng lo lắng về tỷ lệ (hầu hết các trình duyệt sẽ làm cho hình ảnh được thu nhỏ trông ổn, theo kinh nghiệm của tôi), lo lắng về kích thước của tải trọng bạn đã gửi cho người dùng cuối.

Chắc chắn, bạn có thể lập luận rằng bạn chỉ lãng phí một lượng băng thông nhỏ ở cả hai đầu cho những pixel phụ mà bạn đang gửi mà không có ý định sử dụng, nhưng cũng có chi phí thời gian.

Đối với mỗi hình ảnh bạn gửi ở kích thước vượt quá mức cần thiết, bạn sẽ thêm một chút chậm trễ vào tải trang cho người dùng của mình. Đối với các trang web chỉ có một vài hình ảnh thì đây sẽ không phải là vấn đề, nhưng đối với một trang web có số lượng tài sản hỗ trợ lớn, bạn sẽ bắt đầu thêm độ trễ đáng chú ý và việc trì hoãn sẽ khiến bạn mất tiền .

Ngoài ra, liên quan đến chi phí băng thông nhỏ, khi lưu lượng truy cập trang web của bạn tăng lên, chi phí băng thông nhỏ cũng sẽ tăng.

Vì vậy, hãy tiết kiệm tiền cho công ty của bạn và dành 30 giây bạn sẽ cần phải tự chỉnh kích thước hình ảnh! :)

Như mọi khi, hãy đo điểm chuẩn của bạn, nhưng trừ khi ứng dụng thực sự phổ biến / quan trọng về nhiệm vụ, tôi sẽ không quá lo lắng về việc giảm kích thước từ 600 xuống 400 nếu bạn ở trong tình huống cần thay đổi độ rộng thường xuyên. Nếu đó là một lần, chắc chắn, chạy convert -geometry 400x photo1.jpg photo2.jpg, nhưng nếu đó là một ứng dụng bạn đang lặp lại nhanh, có lẽ có nhiều điều quan trọng hơn để lo lắng, ngay cả trong lĩnh vực hiệu suất. ví dụ độ trễ; tải hình ảnh trước, ví dụ.

Kích thước hình ảnh có thể quan trọng trên các thiết bị di động, trong đó kích thước hình ảnh lớn có tác dụng gấp ba lần tải chậm (băng thông rộng di động), mất nhiều thời gian hơn để kết xuất (phần cứng cấp thấp hơn) và - một khi được hiển thị - không hiển thị đầy đủ ở độ phân giải cao dù sao.

Bạn cũng có thể muốn nhìn vào hình ảnh đáp ứng. Có rất nhiều công việc mọi người đã làm, ví dụ như tự động thu nhỏ - và sau đó lưu vào bộ nhớ cache - hình ảnh trên máy chủ là một cách tiếp cận tốt nếu điều này xuất hiện nhiều.

Vấn đề là tải trọng, trình duyệt sẽ hiển thị ở mức ổn ở mọi kích thước (đặc biệt là các kích thước nhỏ hơn mà bạn đang nói đến)

Đối với một trang web khối lượng lớn, ngay cả các byte đơn cũng có vấn đề. Bạn không muốn gửi dữ liệu không mong muốn.

Nói về ý tưởng tồi, thực sự không phải là một ý tưởng tồi để điều chỉnh chiều rộng / chiều cao bằng một vài pixel hoặc có thể là 10 hoặc 20 pixel. Nhưng đó là một ý tưởng rất tồi nếu bạn thu nhỏ một hình ảnh lớn thành hình thu nhỏ :)