Cách thích hợp để xử lý hình ảnh web hi-res cho màn hình hi-res (chủ yếu là màn hình võng mạc iOS) là gì?

Question

Tôi có một trang web di động lợi dụng jQuery Mobile, tuy nhiên hình ảnh, thẳng thắn, trông giống như crap trên iPhone 4/4S. Tôi giả định như vậy sẽ đi cho "iPad mới" khi nó có sẵn vào cuối tuần này.

Tôi biết điều này có liên quan đến tỷ lệ pixel và/hoặc hình ảnh DPI (hoặc PPI hoặc bất kỳ thứ gì bạn muốn gọi ... không tham gia thảo luận về điều đó). Tôi chỉ đơn giản muốn biết phương pháp tốt nhất để phục vụ hình ảnh web có độ phân giải cao cho các màn hình võng mạc iOS này là gì.

Lúc đầu, tôi nghĩ thay đổi hình ảnh DPI (trong Photoshop) sẽ giải quyết được vấn đề. Tôi đã lấy một số hình ảnh mẫu và thu nhỏ chúng xuống đến chiều rộng 190px. Tôi đã lưu một hình ảnh ở 72 DPI và một hình ảnh khác ở 200 DPI. Điều này không có hiệu lực. Xem cho chính bạn (trên iPhone 4/4S): http://haxway.com/restest/1.html Ảnh dưới cùng của mỗi hình ảnh là 200 DPI. Sau đó, thay vì lưu hình ảnh có độ phân giải cao 200 DPI, tôi đã lưu nó ở 72 DPI một lần nữa nhưng lần này tôi tăng chiều rộng (lên 528px) sao cho khi thu nhỏ lại chiều rộng 190px, nó sẽ ở ~ 200 DPI. Điều này dường như làm thủ thuật: http://haxway.com/restest/2.html Nếu bạn xem nguồn, bạn có thể thấy tôi đang buộc chiều rộng/chiều cao trên thẻ hình ảnh (<img src="w4.jpg" alt="" width="190" height="143">).

Tuy nhiên, tôi không tin đây là giải pháp tốt nhất. Không sử dụng các thuộc tính chiều rộng/chiều cao để mở rộng ảnh hưởng đến hiệu suất hình ảnh khi thiết bị phải mở rộng hình ảnh thay vì chỉ tải nó (và không chạm vào nó nữa)? Sau khi một số nghiên cứu, có vẻ như có một số truy vấn phương tiện CSS như -webkit-min-device-pixel-ratio [1] nơi bạn có thể sử dụng CSS khác nhau cho màn hình có độ phân giải cao và do đó tải hình ảnh có độ phân giải cao hơn trong CSS. Nhưng tôi cần nhắm mục tiêu các thẻ HTML <img>. Một bài báo khác tôi đọc (xin lỗi đã mất liên kết) đề xuất sử dụng Javascript để hoán đổi hình ảnh "thông thường" với hình ảnh có độ phân giải cao. Điều đó nghe có vẻ điên rồ!

Có cách nào tốt hơn để thực hiện việc này không? Tôi nhận ra ý kiến ​​có thể khác nhau về cách nào là "tốt nhất". Nếu các ưu/nhược điểm của mỗi phương pháp có thể được giải thích, điều đó sẽ rất tuyệt vời! Mục tiêu của tôi là sử dụng bất kỳ phương thức nào ám chỉ nhanh nhất (hy vọng không sử dụng một số Javascript bị hack, v.v.).

Cảm ơn!

[1] http://aralbalkan.com/3331

Answer 1

Bạn sẽ cần phải chạy một số hình thức js như giải pháp. Một trong những lựa chọn để sử dụng tại thời điểm này là một bởi mat wilcox. Nó sẽ phục vụ hình ảnh phù hợp với màn hình. Điểm cộng lớn cho giải pháp này là nó lưu trữ hình ảnh để giảm tải trên người dùng.

http://adaptive-images.com/

Có một đẩy để mang lại một yếu tố hình ảnh html mới có thể mất vài nguồn để khắc phục vấn đề này, nhưng đó là một con đường tắt nào.

http://www.w3.org/community/respimg/

Answer 2

Đối với thẻ hình ảnh, tôi nghĩ bạn đã đưa ra giải pháp của riêng bạn. Lợi ích lớn nhất là gửi một hình ảnh và cùng một hình ảnh cho tất cả khách hàng.

Đối với hình ảnh css, bạn có thể làm tương tự không? Hãy quên đi những clunky -webkit-min-device-pixel-ratio mà sẽ yêu cầu một hình ảnh khác nhau mỗi khi họ nấu một thiết bị mới. Chỉ cần gửi hình ảnh lớn nhất và sử dụng CSS2's background-size để giảm kích thước. Tôi havent thử nghiệm này. IE < 9 sẽ cung cấp cho bạn một vấn đề.

Tôi, có thể bạn, choáng váng html/css không cung cấp phương pháp thích hợp để thực hiện việc này, chỉ có cách giải quyết như vậy. Tôi cũng giống như bạn, nhầm lẫn là lý do tại sao trình duyệt không chỉ tuân thủ thông tin hình ảnh DPI. Nếu có ai biết, bình luận được đánh giá cao.

Có cách nào tốt hơn để thực hiện việc này không?

Có, tránh sử dụng hình ảnh bitmap. Sử dụng SVG.