Retina Image Display cho website Magento

Nhận xét sản phẩm này

Tình trạng: Còn hàng

0,00 US$
Hoặc

Retina Image Display cho website Magento

More Views

Retina Image Display cho website Magento

Vào khoảng 2010 - 2011, từ khi Iphone 4 và Iphone 4s ra đời, Apple đã đưa ra khái niệm “Retina” trong hiển thị hình ảnh.

“Retina” có nghĩa là võng mạc. Apple đưa ra khái niệm Retina để cho người dùng biết rằng các thiết bị như iphone, ipad, macbook, … nếu được trang bị màn hình Retina thì người dùng khi nhìn vào một bức ảnh trên thiết bị đó sẽ không thể quan sát được các điểm ảnh, tức là mức độ điểm ảnh được phẩn giải cực nhỏ đến nỗi không thể nhìn ra một kẽ hở nào. Nhờ vậy mà bức ảnh trông sắc nét, mượt mà hơn.

Với một website bình thường không sử dụng kỹ thuật “Retina image display” thì khi xem website đó trên màn hình retina, các bức ảnh sẽ bị mờ đi trông thấy. Đó là do màn hình retina  có độ phân giải gấp đôi so với thông thường (tỉ lệ 1:2), làm cho bức ảnh có kích thước như bị giảm đi một nửa. Lúc này bức ảnh sẽ được kéo giản và rộng ra để lấp đầy khung màn hình nên nhìn vào sẽ bị mờ.

Thực chất Retina display (khái niệm được Apple đặt tên) cũng chỉ là loại màn hình thông thường, nhưng có tích hợp công nghệ tiên tiến, làm cho độ phân giải tăng ít nhất gấp đôi so với màn hình chuẩn full HD hiện tại.

Ngày nay, khi tung ra một sản phẩm website, chúng ta nên tối ưu hóa thêm các bức ảnh ở dạng retina display để khi xem trên các thiết bị có tính năng retina, ảnh sẽ không bị mờ.

Vậy tối ưu hóa Retina image bằng cách nào?

Ở đây, trong quá trình làm ra một bức ảnh hay icon cho website, chúng ra nên tạo ra cùng lúc hai phiên bản:

+ Phiên bản thông thường – phiên bản này dành cho màn hình thông thường (như chuẩn full HD). Ở phiên bản này ta đặt tên ảnh/icon như bình thường. Ví dụ: image.png, image.jpg

+ Phiên bản dành cho Retina – Phiên bản này dành cho các thiết bị sử dụng màn hình Retina. Ở  phiên bản này, ta nên đặt tên giống với phiên bản thông thường, nhưng có thêm @2x là hậu tố để dễ phân biệt. Ở đây, @2x là một quy tắc chung để dễ phân biệt. Cũng có thể đặt theo tên khác, nhưng ta nên đặt chung quy tắc sẽ khoa học hơn. Vd: image@2x.png, image@2x.jpg

Khi ta có hai phiên bản rồi, làm sao để sử dụng được?

Tùy mỗi trường hợp, chúng ta có thể có những cách xử lý khác nhau:

1. Đối với trường hợp dùng CSS

Đoạn code css bình thường ta sẽ khai báo như sau:

/*CSS for basic styling and non-retina image path:*/

.image-bg {

 width : 100px ;

 height : 100px ;

 background-image :  url (image.png) ;

}

Code css cho màn hình Retina:

/*CSS for serving the retina image to devices with a high "device-pixel-ratio":*/

@media

only screen and (-o-min-device-pixel-ratio: 3/2),

only screen and (-webkit-min-device-pixel-ratio: 1.5),

only screen and (-moz-min-device-pixel-ratio: 1.5),

only screen and (min-device-pixel-ratio: 1.5)

only screen and (min-resolution: 1.5dppx) {

 .image-bg{

   background-image: url(image@2x.png);

   background-size: 100px 100px;

 }

}

2. Đối với trường hợp dùng JS

Ví dụ thẻ image có cấu trúc như sau:

<img class="retina" alt="" src="image.png" width="100" height="100" />

Ta có đoạn code check màn hình Retina như sau:

var isRetina = (

window.devicePixelRatio > 1 ||

(window.matchMedia && window.matchMedia("(-webkit-min-device-pixel-ratio: 1.5),(-moz-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)").matches)

);

Tiếp đến Sử dung jQuery để lọc qua những img nào chúng ra cần sử dụng cho màn hình Retina, vì cũng có những ảnh không cần thiết phải sử dụng. Vì vậy ta sẽ chỉ lọc những thẻ img nào có class=”retina”

$(function () {

   if(isRetina) {

       var images = $("img.retina ");

       for(var i = 0; i < images.length; i++) {

       // create new image name

       var imageType = images[i].src.substr(-4);

       var imageName = images[i].src.substr(0, images[i].src.length - 4);

       imageName += "@2x" + imageType;

       //rename image

       images[i].src = imageName;

    }

 }

}

Đoạn code này tốt nhất chúng ta sẽ cho tải sau cùng khi người dùng tải trang web trên trình duyệt của họ.

Sau khi trình duyệt chạy qua đoạn code trên, nếu check đúng màn hình đang hiển thị web là Retina thì các ảnh thông thường sẽ tự động được thay thế hết sang ảnh có dộ phân giải cao hơn với tên hậu tố là @2x.




Thông tin kỹ thuật

Author Dao Van Tan
(0)

Questions and Answers

add your question

There are no entries.