Tại sao không phải lúc nào cũng sử dụng hình ảnh 2x khi xây dựng trang web?

Question

Tôi đã có một cuộc thảo luận với một người bạn thiết kế ngày hôm qua, những điểm nổi bật của mà tôi sẽ chi tiết dưới đây:

• hình ảnh 2x là các tập tin lớn hơn, nhưng không phải là 4x bạn có thể nghĩ. Trong một ví dụ, tệp hình ảnh 1x là 47kb & đối tác 2x của nó chỉ là 55kb.
• 2x hình ảnh chỉ dành cho màn hình Retina và mặc dù được phân loại ở phía máy tính để bàn/máy tính xách tay, sự thật là hầu hết màn hình võng mạc đều là thiết bị di động.
• Trong khi wifi đang trở nên khá phổ biến, máy tính để bàn (chủ yếu là 1x) là những thiết bị duy nhất không bao giờ phải tải dữ liệu xuống mạng di động.

Tất cả đều dẫn tôi đặt câu hỏi: Tại sao chúng tôi tiêu tốn năng lượng khi cung cấp 2x hình ảnh, khi chúng được truy cập chủ yếu bởi thiết bị di động có giới hạn băng thông lớn nhất?

Sau khi ngủ trên đó, tôi bắt đầu tự hỏi: tốt thôi, nếu chúng ta sẽ bỏ qua vấn đề cuối cùng, tại sao không chỉ xử lý gấp đôi? CSS có thể xử lý thu nhỏ hình ảnh trong mọi trường hợp (có lẽ tôi sai ở đây?) Vậy tại sao không lưu các truy vấn phương tiện & lưu nỗ lực tạo và lưu trữ 2 bản sao của mỗi hình ảnh bằng cách sử dụng 2x ở khắp mọi nơi?

Tôi có bị điên không?

Answer 1

Sự cố kích thước tệp không làm phiền tôi. Tôi nghĩ mọi thứ nên càng nhỏ càng tốt.

Nếu bạn không lo lắng về điều đó, tuy nhiên, vấn đề duy nhất, tạm thời mà tôi có thể nghĩ là hỗ trợ trình duyệt cho background-size. IE8 không hỗ trợ nó và nó vẫn được sử dụng đủ để phải lo lắng về nó (ít nhất là trên các dự án của tôi). Có một vết bẩn cho nó, nhưng nó không phải là để snuff với điều thực sự.

Answer 2

Tôi nghĩ câu trả lời tùy thuộc vào nơi bạn sống trên thế giới. Tin hay không, tôi sống trong một khu vực có nhiều con đường đất nước mà vẫn chỉ có quay số. Đôi khi, ngay cả điều đó cũng không hiệu quả. Chúng tôi vẫn chưa có tốc độ cao như chúng ta nên làm với máy tính để bàn. Tôi không thể tưởng tượng họ phải tải xuống dữ liệu bổ sung đó khi họ xem 1x.

Vì vậy, tôi nghĩ điều đó phụ thuộc vào đối tượng mục tiêu của bạn, nơi họ có nhiều khả năng sống hoặc những thiết bị họ sử dụng. Chúng tôi sẽ đến đó đúng lúc, nhưng đối với một số người thì chưa.

Answer 3

Analytics cho phép được hướng dẫn của bạn

tôi sử dụng quy tắc 5%. Một khi bất kỳ tính năng nào có độ lệch chuẩn lớn hơn 2 tiêu chuẩn, tôi sẽ hỗ trợ cho nó. Trong trình duyệt, điều đó có nghĩa là IE6 và IE7 đã biến mất cho tôi nhưng tôi vẫn tiếp tục hỗ trợ IE8 bởi vì một lượng lớn khán giả có thể sử dụng tính năng đó. Vâng, những gã lớn như Google đã bỏ nó nhưng tôi vẫn thấy một lượng lớn lưu lượng truy cập từ nó trên rất nhiều trang web. Tại sao làm cho họ đau khổ?

Bây giờ, điều này liên quan đến câu hỏi của bạn như thế nào: hãy tự hỏi tỷ lệ phần trăm đối tượng của bạn đang ở trên kết nối LTE 10Mbps với màn hình võng mạc. Có thể trong trường hợp của bạn là màn hình võng mạc 95% với LTE trên thiết bị di động, nhưng hãy kiểm tra gói phân tích của bạn. Tôi đoán là nó có thể dưới 20%, trong trường hợp có sự sụt giảm cung cấp UX tốt hơn cho 80% đối tượng của bạn - dễ dàng đáng để nỗ lực.

Answer 4

Theo ý kiến ​​của tôi, tôi thấy những vấn đề:

• một số mẫu điện thoại cũ (ví dụ: iPhone 3G) và máy tính bảng (ví dụ: iPad 1) có bộ nhớ thấp. Một hình ảnh đủ lớn có thể gây ra lỗi bộ nhớ.

• để chia tỷ lệ hình ảnh mà hệ thống phải tải ở kích thước đầy đủ và thực hiện thao tác chia tỷ lệ phức tạp mỗi khi nó vẽ (đôi khi nó được lưu trong bộ nhớ cache).

• hình ảnh thu nhỏ không được đẹp.

• bạn có thể gặp vấn đề với họ trong các trình duyệt cũ (như đã đề cập bởi Bill Criswell)

• nó tăng kích thước download. Nếu chúng tôi xem xét tăng 10kb về kích thước/hình ảnh * 10 hình ảnh trên mỗi trang, bạn nhận được 100kb cho mỗi lần tải trang. Nếu trang của bạn có để hiển thị rất nhiều hình ảnh (suy nghĩ xã hội), hơn là chi phí rất nhiều.

• bạn có thể cải thiện thứ hạng công cụ tìm kiếm nếu trang của bạn tải nhanh hơn và nhỏ hơn.

Answer 5

Vấn đề lớn duy nhất là kích thước tệp. Và khi bạn nói, trong nhiều trường hợp, sự khác biệt về kích thước tệp là tối thiểu.

Nếu chúng ta đang nói chủ yếu là biểu tượng, lợi ích là a) biểu tượng không lớn để bắt đầu, vì vậy kích thước tệp tăng là tối thiểu và b) biểu tượng hưởng lợi nhiều nhất từ ​​độ phân giải võng mạc.

Mặt khác, nếu chúng ta đang nói những bức ảnh tin tức 'toàn màn hình', những bức ảnh này có kích cỡ lớn hơn một chút, nhưng cũng trông hoàn hảo nếu chúng không phải là võng mạc (vì chúng là tông màu liên tục) do đó, cần có ít sự hấp dẫn hơn để tạo võng mạc nếu bạn đang nhắm mục tiêu thiết bị di động.

Một thỏa hiệp cho sau này có thể là tải chúng xuống. Kiểm tra kích thước màn hình. Nếu điện thoại có kích thước, hãy tải hình ảnh thông thường và gọi nó là tốt. Nếu nó lớn hơn kích thước điện thoại, hãy tải hình ảnh thông thường, sau đó quay lại và lấy phiên bản võng mạc cho những người trên iPad 3, chẳng hạn.

Vấn đề kỹ thuật duy nhất là IE8 trở lên. Họ không thể xử lý CSS bạn thường sử dụng cho hình ảnh võng mạc. Có nhiều cách giải quyết khác nhau, nhưng không phải cho các sprites - mà bạn thường sử dụng cho các biểu tượng.

Cuối cùng, chúng ta sẽ thấy nhiều hỗ trợ SVG hơn, điều này sẽ giải quyết vấn đề này - ít nhất là cho các biểu tượng. Ví dụ: khi tôi làm công việc iOS thuần túy, hầu hết tất cả hình ảnh của tôi đều là SVG. Nó nhỏ hơn và tự động sẵn sàng cho võng mạc.