Đã khá lâu kể từ khi màn hình Retina trên các thiết bị iOS được phát hành lần đầu tiên, nhưng vẫn còn rất nhiều trang web không sẵn sàng cho Retina, ngay cả khi các nhà thiết kế và nhà phát triển đã hiểu được sự thật của một thiết bị di động hoàn toàn đáp ứng Thế giới thân thiện.
Dưới đây, những gì bạn cần biết về các tùy chọn để làm cho tác phẩm của bạn trông đẹp nhất trên màn hình Retina ngày càng phổ biến. Tin tốt là, có vẻ nản chí như nó có vẻ, nó thực sự không phức tạp.
$config[code] not foundChuẩn bị trang web của bạn cho hình ảnh sẵn sàng võng mạc
Nhân đôi niềm vui của bạn
Thực tế, có một số cách bạn có thể lột da con mèo này. Đầu tiên, bạn sẽ cần tăng cường CSS một chút và bao gồm các phiên bản hình ảnh của bạn với độ phân giải gấp đôi. CSS sẽ xác định hình ảnh nào sẽ hiển thị dựa trên thiết bị mà trang web của bạn đang được xem.
Các bản cập nhật CSS mà bạn cần sẽ thay đổi tùy theo trình duyệt mục tiêu của bạn, nhưng tin tốt là giờ đây, nó không quá phức tạp và ngày càng dễ dàng hơn. Chúng tôi sẽ để lại mã hóa thực tế cho một ngày khác.
Một lưu ý: bạn có thể muốn phát triển quy ước đặt tên cho hình ảnh võng mạc của mình để có thể dễ dàng liên kết hai phiên bản của hình ảnh trong trường hợp chúng cần được chỉnh sửa sau này.
SVG
Một cách tiếp cận khác là SVG, hoặc Đồ họa vectơ có thể mở rộng. Đúng như tên gọi, chúng chỉ giới hạn ở đồ họa vector và won làm việc với hình ảnh, nhưng đồ họa SVG loại bỏ sự cần thiết của hai tệp hình ảnh cho mỗi đồ họa trên trang web của bạn. Một lần nữa, có các biến thể từ trình duyệt này sang trình duyệt khác, do đó, bạn sẽ muốn thực hiện nghiên cứu bổ sung tùy theo nhu cầu của bạn.
Và như đã lưu ý ở trên, SVG có thể sẽ không hoạt động như là giải pháp duy nhất của bạn trên hầu hết các trang web, trừ khi trang web không chứa hình ảnh loại ảnh.
Lực lượng vũ phu
Tất nhiên, bạn cũng có thể chỉ cần đổ các tệp có độ phân giải thấp và chỉ cung cấp các hình ảnh sẵn sàng cho Retina. Chúng tôi chỉ đề xuất điều này cho mục đích sử dụng với đối tượng được xác định rất chặt chẽ. Nếu bạn biết băng thông thắng được là một vấn đề, thì đây có thể là tuyến đường phù hợp, nhưng chắc chắn đó không phải là cách tốt nhất
Giải pháp mã hóa khác
Ở đầu kia của nỗ lực và phổ thanh lịch là các phương thức mã hóa dựa trên một số thay đổi phía máy chủ (như các mục nhập tệp.htaccess) cùng với mã hóa PHP và Javascript.
Đây có thể là cách tiếp cận tốt nhất của bạn, mặc dù những nỗ lực liên quan có thể không xứng đáng với các dự án nhỏ hơn.
Nhìn chung, cách tiếp cận bạn thực hiện sẽ phụ thuộc vào đối tượng của bạn, bản chất của hình ảnh trang web của bạn và nhóm phát triển của bạn về trình độ chuyên môn kỹ thuật. Có một giải pháp tốt cho mọi tình huống. Giải pháp xấu duy nhất là bỏ qua màn hình Retina hoàn toàn.
Ảnh NASDAQ qua Shutterstock
