Làm thế nào để chuyển đổi hình ảnh sang màn hình hiển thị võng mạc?

Question

Tôi có hình ảnh 40px x 20px với 72 pixel/Inch.

Tôi muốn tạo phiên bản màn hình Retina.

Tôi nên làm gì? Kích thước gấp đôi? Thay đổi độ phân giải?

Và tôi nên lưu định dạng nào? PNG? JPG? ...

Tôi đang sử dụng hình ảnh này trên trang web ...

Answer 1

Bạn có thể sử dụng tùy chọn độ mờ CSS.

Điều này sẽ cung cấp cho bạn cái nhìn minh bạch về hình ảnh của bạn dựa trên giá trị bạn đặt thành độ mờ.

Hãy thử tìm hiểu độ mờ đục: http://www.w3schools.com/css/css_image_transparency.asp

Answer 2

Photoshop cung cấp cho bạn một vài tùy chọn để định lại kích thước hình ảnh. Ví dụ: nếu hình ảnh có kích thước iPhone, bạn có thể tăng kích thước hình ảnh lên 200%. Photoshop cung cấp cho bạn một vài tùy chọn để lấy lại hình ảnh. Bicubic, bilinear và vv Điều này sẽ làm lại hình ảnh ở độ phân giải cao hơn và nội suy các điểm ảnh bị thiếu. Hi vọng điêu nay co ich.

Answer 3

câu trả lời của tôi là chuyển đổi hình ảnh của bạn vào SVG

Bạn có Illustrator? Nếu vậy, hãy lưu hình ảnh của bạn dưới dạng SVG (và có png làm dự phòng nếu bạn muốn).

<img src="images/logo.svg" alt="" /> 
<img src="images/logo.png" alt="" /> 

Chừng nào bạn sử dụng Modernzr mà có thể làm việc để có được SVG thân thiện trong hầu hết các trình duyệt.

Bạn có thể thấy nó ở đây như thế nào nó được thực hiện: http://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/

Hy vọng nó sẽ giúp :)

Answer 4

Đây là một bài viết thực sự thú vị cho thấy một lựa chọn tốt đẹp để đối phó với res hình ảnh cao:

http://blog.netvlies.nl/design-interactie/retina-revolution/

Về cơ bản, nó nói rằng, nếu bạn làm cho hình ảnh khá lớn (chiều rộng và chiều cao) nhưng sau đó lưu nó ở chất lượng khá thấp, nó vẫn đi ra rất sắc nét trên lại tina hiển thị. Điều đó có nghĩa là bạn có thể sử dụng cùng một hình ảnh trên tất cả các thiết bị và kích thước tệp cũng rất thấp, đây là một phần thưởng bổ sung. Bạn có thể đặt chiều rộng và chiều cao của hình ảnh trong CSS và/hoặc HTML của bạn để đặt nó thành kích thước trực quan mà bạn mong muốn.

Bài viết này thổi tôi đi, và là cách tiếp cận của tôi để đối phó với cả hình ảnh thân thiện với băng thông và thân thiện với băng thông. Giành chiến thắng, thắng.

Answer 5

Trong trình chỉnh sửa hình ảnh của bạn, tăng gấp đôi kích thước hình ảnh của bạn lên 80px x 40px.

Trong đánh dấu của bạn thiết lập độ rộng đến 40 và chiều cao đến 20.

<img src="example.png" width="40" height="20" /> 

Bạn nên save as png nếu bạn cần sự minh bạch hoặc hình ảnh là dòng nghệ thuật. Lưu ảnh dưới dạng jpg.

Answer 6

Hình ảnh hiển thị võng mạc (hoặc hình ảnh hiển thị mật độ cao) gấp đôi kích thước pixel của hình ảnh chuẩn - hệ số chia tỷ lệ của nó là 2.0. Điều này có nghĩa là có, đối với hình ảnh 40x20 pixel của bạn, bạn sẽ cần tạo một phiên bản 80x40 pixel (sau đó được hiển thị ở mật độ pixel kép trên màn hình). Định dạng không quan trọng lắm, cả PNG và JPG sẽ hoạt động tốt (PNG sẽ không làm giảm chất lượng với nén, nhưng kích thước tệp sẽ lớn hơn JPG).

Tuy nhiên, vấn đề với hình ảnh hiển thị mật độ cao là chúng chiếm nhiều băng thông hơn và không cần thiết cho các thiết bị không có độ phân giải cao hoặc màn hình Retina. Điều này có nghĩa là có nhiều dữ liệu được truyền qua mạng hơn, gây bất tiện cho người dùng di động và những người có giới hạn chuyển dữ liệu giới hạn.

Một giải pháp là sử dụng một cái gì đó như Retina.js. Đó là một tập lệnh khách Javascript mã nguồn mở sẽ tự động tải hình ảnh có kích thước võng mạc từ máy chủ của bạn và trao đổi nó tại chỗ cho phiên bản mật độ thấp, nếu nó tồn tại. Nó sau của Apple standard for naming high-resolution images-@2x, vì vậy bạn có thể có HTML code như thế này:

<img src="/images/my_image.jpg" /> 

và kịch bản sẽ tìm kiếm máy chủ của bạn cũng cho /images/my_image@2x.jpg. Nếu nó tồn tại, nó sẽ tải nó và trao đổi nó tại chỗ mà không cần phải lo lắng về việc rối tung với CSS.