Lưu ý quan trọng khi load icon, avatar, thumbnail trên blog

Why are my images and background images so blurry on mobile device ? nếu bạn search Google với từ khóa này chứng tỏ bạn đã nhận ra một thiếu xót cực lớn cho blog của mình. Ta sẽ cùng nhau thảo luận vấn đề trên qua bài viết này
Trước tiên bạn hãy click vào ảnh này https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXuLHzI2NkzS29BGKXoFZ6MFYnr-FN1jJ4PdM_eQALKycHikogNZ8Syfl70PFe9eKqz1YYfb65oz85_3tqccMMUfbGnaCEM8s88-jFreSEkqfAkhIOhIZ2OqAJGXe1KoIaeZfiqxkB70ju/h0/n8EW5Ez.png và zoom nó lên

Đây là bức ảnh được được screenshot trên mobile thật, phần avatar thread comments size gốc của ảnh 35x35 và css cho nó width/height cũng bằng 35px

Phần new feedback tôi load size ảnh là 80x80 và chỉ định width/height bằng 1 nửa size ảnh 40px

Khi bạn zoom lên sẽ thấy phần avatar thread comments bị mờ còn phần new feedback vẫn rõ nét. Đến đây bạn cũng đã hiểu được ý đồ tôi muốn trình bày qua bài viết này rồi.

Theo đó nếu set width/height container chứa ảnh đúng bằng size thật của ảnh thì trên PC không vấn đề gì, nhưng khi duyệt bằng mobile cho ra chất lượng ảnh rất tệ

Để khắc phục vấn đề đó thông thường các lập trình viên thường chỉ định size ảnh cho từng thiết bị ví dụ

@media screen and (min-resolution: 1.5dppx) {
    .welcome-header>h1 {
        background-image: url('../images/html5_384x384.png');
    }
}

@media screen and (min-resolution: 2dppx) {
    .welcome-header>h1 {
        background-image: url('../images/html5_512x512.png');
    }
}

hoặc

<style>
    .thumb {
        display: inline-block;
        width: 100px;
        height: 100px;
    }
</style>
<div class="thumb">
    <img src="/images/html5_200x200.png">
</div>

Không nhất thiết ta cứ phải set size ảnh x2 so với khung chứa, nhưng chắc chắn size ảnh phải lớn hơn khung chứa để không bị mờ trên mobile.

Áp dụng cho blogspot ta có ti tỉ thứ cần phải sửa lại, và thường sẽ là chỉnh lại kích thước ảnh chứ chẳng dại chỉnh sửa kích thước khung chứa

1. Thumbnail/Avatar author

 Ta có thể dùng js để resize

$(".thumb img").attr("src", function(a, b) {
   return b.replace("s72-c", "s1600")
})

Nhưng đừng dại dột mà dùng js vì blogger có 1 function resize ảnh rất quý tộc

resizeImage(url, size, ratio);// đường dẫn của ảnh, rộng, tỷ lệ rộng:cao

Ví dụ

resizeImage(data:post.featuredImage, 140, "140:90")

2. Avatar thread comments/Avatar Feed Comments 

Đây là các thành phần bạn không thể dùng hàm resizeImage để chỉnh sửa được, để định lại size ảnh ta có thể làm như sau

* Avatar Feed Comments

var avatarSize = 40; // khai báo size ảnh

// code lặp trong từng feed.entry[i]
var avatar = json.feed.entry[i].author[0].gd$image.src.replace(/\/s[0-9]+-?[A-Za-z]?\//i, "/s" + avatarSize * 2 + "-c/"); // get avatar và resize theo kích thước chỉ định

* Avatar Thread Comments

$(".avatar-image-container img").attr("src", function(i, e){
   return e.replace(/s35-?c?/i, "s70-c")
})

Đây chỉ là 1 vài ví dụ điển hình tôi đưa ra, thực tế mỗi blog còn có rất nhiều thứ đụng đến ảnh (icon, logo, banner,...) nếu bạn đã set width/height cứng cho nó thì hãy cẩn thận khi xem trên mobile

Như vậy bạn có thể thấy, làm blog không phải chỉ lên mạng kiếm template về áp vào và viết bài là xong, 1 blogger/webmaster giỏi luôn phải biết tìm tòi những cái mới, khắc phục triệt để các vấn đề phát sinh để đội tester không có đất diễn 😁

Good Luck !