Responsive Thumbnail khi làm việc với Feed API

Một trong những dữ liệu thường xuyên được lấy nhất khi làm việc với feed posts đó là ảnh đại diện cho bài viết (thumbnail). Nhưng có một câu hỏi đặt ra là liệu ta đã thật sự xử lý nó tốt hay chưa, bài viết này tôi sẽ cùng bạn thảo luận về vấn đề trên
Mặc định trong dữ liệu feed posts, ảnh thumbnail có kích thước 72x72, tham chiếu tới url với chuỗi s72-c, vì thế mỗi khi build các tiện ích ta thường dùng js để resize ảnh theo kích thước mong muốn.

Nhưng hãy phân tích sâu hơn 1 chút, ví dụ tôi chỉ resize ảnh từ width 72px lên width 1600px, trên pc trình duyệt cũng tải ảnh 1600px và mobile cũng thế, điều này rất không tốt nếu như bạn muốn tối ưu performance cho websize trên cả pc và mobile.

Kỹ thuật Responsive Image hiện nay rất phổ biến trong lập trình web, nó tập trung vào việc dùng css hoặc html markup để chỉ định size ảnh cho từng kích thước màn hình, từ đó cải thiện đáng kể hiệu suất cho website

Nếu bạn quan tâm có thể truy cập liên kết sau của MDN để bổ sung thêm kiến thức: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Áp dụng cho bài viết này tôi sẽ sử dụng HTML Markup với 2 thuộc tính srcset và sizes, một yêu cầu bắt buộc nữa là ảnh thumbnail bài viết của bạn phải nằm trên server ảnh của Google thì mới có thể resize qua url được, tức là khi viết bài với ảnh đầu tiên bạn phải tự upload ảnh lên, không được dùng ảnh từ server khác

Bạn xem ví dụ sau (lưu ý các size ảnh và size viewport này do tôi tự tạo ra, bạn có thể chỉ định các size và viewport khác theo ý đồ của mình)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo"></div>
<script type="text/javascript">
$.ajax({
    url: 'https://newsplus-hung1001.blogspot.com/feeds/posts/summary',
    type: 'GET',
    dataType: 'jsonp',
    data: {
        'alt': 'json',
        'max-results': 1
    },
    success: function(json) {
        for (var i = 0; i < json.feed.entry.length; i++) {
            if ("media$thumbnail" in json.feed.entry[i]) {
                var thumb = json.feed.entry[i].media$thumbnail.url;
            } else {
                var thumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXvoeWlnXfuDDxD0LIWf1tODuI3Wti5c3N2v73T19xj9fNAM45q8OWvY4cL-rRcVe0NisWEk9lZ0v4uuDUX4b54sx0uFOgNBRC6Gfoj7nUJaCh-JsZLVa-G-Nt0j5OrQ5vOfcCLsG-HqI/s72-c/nth.png";
            }
            var s0    = thumb.replace("s72-c", "s0"), // original size
                w240  = thumb.replace("s72-c", "w240-h141-p-k-no-nu"),
                w320  = thumb.replace("s72-c", "w320-h188-p-k-no-nu"),
                w360  = thumb.replace("s72-c", "w360-h211-p-k-no-nu"),
                w480  = thumb.replace("s72-c", "w480-h281-p-k-no-nu"),
                w640  = thumb.replace("s72-c", "w640-h351-p-k-no-nu"),
                w768  = thumb.replace("s72-c", "w768-h480-p-k-no-nu"),
                w1024 = thumb.replace("s72-c", "w1024-h640-p-k-no-nu"),
                w1366 = thumb.replace("s72-c", "w1366-h854-p-k-no-nu"),
                w1600 = thumb.replace("s72-c", "w1600-h900-p-k-no-nu");
            document.getElementsByClassName("demo")[0].innerHTML +=
                "<img srcset='" + w240 + " 240w," + /* srcset cho từng kích thước */
                "             " + w320 + " 320w," +
                "             " + w360 + " 360w," +
                "             " + w480 + " 480w," +
                "             " + w640 + " 640w," +
                "             " + w768 + " 768w," +
                "             " + w1024 + " 1024w," +
                "             " + w1366 + " 1366w," +
                "             " + w1600 + " 1600w'" +
                "    sizes='(max-width: 240px) 240w," + /* size theo từng viewport */
                "           (max-width: 320px) 320w," +
                "           (max-width: 360px) 360w," +
                "           (max-width: 480px) 480w," +
                "           (max-width: 640px) 640w," +
                "           (max-width: 768px) 768w," +
                "           (max-width: 1024px) 1024w," +
                "           (max-width: 1366px) 1366w," +
                "           (max-width: 1600px) 1600w," +
                "            1600w'" + /* size mặc định cho các viewport không thỏa mãn các điều kiện trên */
                "     src='" + s0 + "' alt='thumbnail'>"; /* src mặc định cho browser không support srcset */
        };
    }
})
</script>

Thẻ img load image ngoài thuộc tính src quen thuộc được bổ sung thêm srcset và sizes. Theo đó trước khi load ảnh, trình duyệt sẽ tính toán các giá trị theo kích thước màn hình từ đó quyết định xem ảnh nào sẽ được load.

Do ảnh được lưu trên server của google nên ta có thể thoải mái chỉ định width (wXXX) và height (hXXX) theo mong muốn của mình.

Và lưu ý quan trọng nữa đó là hãy chú ý tới syntax nhé, vì nó quy định dấu cách dấu phẩy rất chặt ngoài ra dùng với js bạn còn phải truyền biến vào nữa nên khi code hết sức lưu ý

Đọc đến đây chắc bạn cũng thấy việc tải ảnh thumbnail feed của mình trước đây đúng là chưa tối ưu rồi đúng không.

Qua bài viết này tôi hi vọng bạn đã có cái nhìn xa xăm hơn về việc xử lý cũng như tối ưu dữ liệu ảnh khi làm việc với blogger feed api

Chúc bạn thành công !