Thiết lập kích thước ảnh khi tải trang phù hợp với kích thước màn hình

Nay chiều Chủ nhật rảnh rồi ngồi cà phê viết vài dòng tản mản mà chủ đề của bài viết này đề cập đến kích thước ảnh, vấn đề tưởng như đã cũ kỹ nhưng lại rất quan trọng với trang web. Bài viết này nó không phải viết hướng dẫn gì cả, nó chỉ đơn giản là lập luận của mình và nó giống như câu chuyện thì đúng hơn.

Mô tả chi tiết: Mình muốn kích thước chiều rộng của ảnh đáp ứng với kích thước chiều rộng của main phù hợp với kích thước màn hình. Cụ thể main lớn kích thước ảnh lớn, main nhỏ kích thước ảnh nhỏ. Với 2 main trái phải mà main trái lớn hơn thì kích thước ảnh lơn hơn và main phải nhỏ hơn thì kích thước ảnh nhỏ hơn còn khi cả 2 main bằng nhau cho ra kích thước ảnh như nhau với cùng một kích thước màn hình như nhau. Mục đích cuối cùng để tối ưu giảm dung lượng ảnh dẫn đến thời gian tải trang đươc nhanh hơn.

Đi vào vấn đề chính mình có một ảnh gốc của nó như sau:

+ Link ảnh: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/s1600/banner-body-min.png

+ Kích thước: 828 x 840 pixels
+ Dung lượng: 132,29 KB

Ảnh này trong một post hiển thị ở widget Blog bên trái và widget PopularPosts bên phải như hình minh họa sau:

Thiết lập kích thước ảnh khi tải trang phù hợp với kích thước màn hình

widget Blog được đặt trong phần main bên trái có kích thước chiều rộng lớn hơn so với widget PopularPosts bên phải đặt trong phần sidebar.

Như vậy khi trang được tải sẽ tải cả 2 ảnh gốc nếu đem cộng dung lượng lại với nhau 132,29 KB + 132,29 KB = 264,58‬ KB

Trong khi đó với kích thước màn hình 1366px, kích thước ảnh của phần widget Blog chỉ cần 299 x 168 pixels dung lượng chỉ 23,1 KB và kích thước ảnh của widget PopularPosts chỉ cần 139 x 78 pixels dung lượng chỉ 6,8 KB.

Nếu đem hai dung lượng này cộng lại với nhau cho ra chỉ khoảng 30 KB => dung lượng đã giảm đáng kể hơn 80% rồi còn gì. Tuy nhiên chất lượng ảnh có giảm không? Xin thưa rằng vẫn sắc nét như thường.

Dung lượng ảnh giảm điều hiển nhiên dung lượng của trang giảm => trang tải nhanh hơn. Vây tại sao trang tải nhanh mà chất lượng ảnh không giảm thì chẳng có lý do gì lại không áp dụng phải không nào 😃

Đầu tiên mình sẽ kiểm tra kích thước ảnh đáp ứng theo kích thước màn hình của widget Blog trước

Mình sẽ lấy một số kích thước phổ biến như sau: cột trái là kích thước màn hình, cột phải là kích thước ảnh với chiều rộng nhân với chiều cao tính bằng px

320:  116 x 73 pixels

360:  132 x 83 pixels

375:  138 x 86 pixels

384:  159 x 100 pixels

412:  172 x 107 pixels

414:  173 x 108 pixels

480:  180 x 101 pixels

600:  228 x 128 pixels

640:  244 x 137 pixels

768:  295 x 166 pixels

800:  308 x 173 pixels

1024: 258 x 145 pixels

1280: 300 x 169 pixels

1366: 299 x 168 pixels

1440: 317 x 178 pixels

1920: 430 x 242 pixels

Ở đây chúng ta chỉ quan tâm đến chiều rộng của ảnh, sắp xếp theo thứ tự tăng dần ta được:

[116,132,138,159,172,173,180,228,244,258,295,299,300,308,317,430]

Trong chủ đề xml của blogspot ta sẽ sử dụng những yếu tố sau để lấy kích thước ảnh:

+ Thẻ data cho ra link ảnh: data:post.featuredImage (widget Blog v2), data:post.firstImageUrl (widget Blog v1)

+ Hàm thiết lập kích thước ảnh: sourceSet

+ Tỷ lệ ảnh: 16:9, 4:3...

+ Tham số thiết lập kích thước ảnh theo kích thước màn hình: sizes

Tất cả các thành phần trên được đặt trong thẻ tag img:

Mở rộng thêm điều kiện nếu bài viết không có ảnh thì lấy ảnh khác thay thế

<b:if cond='data:post.featuredImage'>

  <img expr:alt='data:post.title' expr:src='data:post.featuredImage' expr:srcset='sourceSet(data:post.featuredImage, [116,132,138,159,172,173,180,228,244,258,295,299,300,308,317,430], &quot;16:9&quot;)' sizes='(max-width: 320px) 116px, (max-width: 360px) 132px, (max-width: 375px) 138px, (max-width: 384px) 159px, (max-width: 412px) 172px, (max-width: 414px) 173px, (max-width: 480px) 180px, (max-width: 600px) 228px, (max-width: 640px) 244px, (max-width: 768px) 295px, (max-width: 800px) 308px, (max-width: 1024px) 258px, (max- width: 1280px) 300px, (max-width: 1366px) 299px, (max-width: 1440px) 317px, (max-width: 1920px) 430px'/>

<b:else/>

  <img expr:alt='data:post.title' expr:srcset='sourceSet(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDCQEJLNSjdH72adB-jqpwZgpHO6y2n2TclnA0zQ_QTIStsTqoyDS_JbiAhFYgagHd9SxrvA7OL1DvtxTboBVjt_IMbI0iBUcn9zErpSr8taldp_m1YaYuZutfgh0a0Sc2cI-1LHLTc8kp/s1600/safe_image.png&quot;, [116,132,138,159,172,173,180,228,244,258,295,299,300,308,317,430], &quot;16:9&quot;)' sizes='(max-width: 320px) 116px, (max-width: 360px) 132px, (max-width: 375px) 138px, (max-width: 384px) 159px, (max-width: 412px) 172px, (max-width: 414px) 173px, (max-width: 480px) 180px, (max-width: 600px) 228px, (max-width: 640px) 244px, (max-width: 768px) 295px, (max-width: 800px) 308px, (max-width: 1024px) 258px, (max- width: 1280px) 300px, (max-width: 1366px) 299px, (max-width: 1440px) 317px, (max-width: 1920px) 430px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDCQEJLNSjdH72adB-jqpwZgpHO6y2n2TclnA0zQ_QTIStsTqoyDS_JbiAhFYgagHd9SxrvA7OL1DvtxTboBVjt_IMbI0iBUcn9zErpSr8taldp_m1YaYuZutfgh0a0Sc2cI-1LHLTc8kp/s1600/safe_image.png'/>

</b:if>

Khi tải trang phần html hiển thị ảnh cho ra được:

<img

alt="Cách chèn quảng cáo cố định trong bài viết chỉ hiển thị trên mobile"

sizes="(max-width: 320px) 116px, (max-width: 360px) 132px, (max-width: 375px) 138px, (max-width: 384px) 159px, (max-width: 412px) 172px, (max-width: 414px) 173px, (max-width: 480px) 180px, (max-width: 600px) 228px, (max-width: 640px) 244px, (max-width: 768px) 295px, (max-width: 800px) 308px, (max-width: 1024px) 258px, (max- width: 1280px) 300px, (max-width: 1366px) 299px, (max-width: 1440px) 317px, (max-width: 1920px) 430px"

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/s1600/banner-body-min.png"

srcset="

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w116-h65-p-k-no-nu/banner-body-min.png 116w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w132-h74-p-k-no-nu/banner-body-min.png132w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w138-h77-p-k-no-nu/banner-body-min.png 138w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w159-h89-p-k-no-nu/banner-body-min.png 159w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w172-h96-p-k-no-nu/banner-body-min.png 172w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w173-h97-p-k-no-nu/banner-body-min.png 173w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w180-h101-p-k-no-nu/banner-body-min.png 180w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w228-h128-p-k-no-nu/banner-body-min.png 228w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w244-h137-p-k-no-nu/banner-body-min.png 244w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w258-h145-p-k-no-nu/banner-body-min.png 258w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w295-h165-p-k-no-nu/banner-body-min.png 295w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w299-h168-p-k-no-nu/banner-body-min.png 299w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w300-h168-p-k-no-nu/banner-body-min.png 300w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w308-h173-p-k-no-nu/banner-body-min.png 308w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w317-h178-p-k-no-nu/banner-body-min.png 317w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w430-h241-p-k-no-nu/banner-body-min.png 430w

">

Nhìn vào thấy sao nhiều link ảnh quá trời quá đất nhưng thật ra nó chỉ tải một link duy nhất, hiểu rõ hơn ở phần sizes bạn thiết lập ví dụ với kích thước màn hình 1366px có sizes='(max-width: 1366px) 299px' (với kích thước 1366 tải ảnh kích thước rộng 299px) lúc này link ảnh khi được tải sẽ ra https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w299-h168-p-k-no-nu/banner-body-min.png

Tiếp theo mình cũng làm tương tự với ảnh của widget PopularPosts nằm trong phần sidebar bên phải

320:  116 x 73 pixels

360:  132 x 83 pixels

375:  138 x 86 pixels

384:  159 x 100 pixels

412:  172 x 107 pixels

414:  173 x 108 pixels

480:  180 x 101 pixels

600:  228 x 128 pixels

640:  244 x 137 pixels

768:  295 x 166 pixels

800:  308 x 173 pixels

1024: 119 x 67 pixels

1280: 140 x 79 pixels

1366: 139 x 78 pixels

1440: 148 x 83 pixels

1920: 202 x 114 pixels

[116,119,132,138,139,140,148,159,172,173,180,202,228,244,295,308]

sizes='(max-width: 320px) 73px, (max-width: 360px) 132px, (max-width: 375px) 138px, (max-width: 384px) 159px, (max-width: 412px) 172px, (max-width: 414px) 173px, (max-width: 480px) 180px, (max-width: 600px) 228px, (max-width: 640px) 244px, (max-width: 768px) 295px, (max-width: 800px) 308px, (max-width: 1024px) 119px, (max-width: 1280px) 140px, (max-width: 1366px) 139px, (max-width: 1440px) 148px, (max-width: 1920px) 202px'



<b:if cond='data:post.featuredImage'>

  <img expr:alt='data:post.title' expr:src='data:post.featuredImage' expr:srcset='sourceSet(data:post.featuredImage, [116,119,132,138,139,140,148,159,172,173,180,202,228,244,295,308], &quot;16:9&quot;)' sizes='(max-width: 320px) 116px, (max-width: 360px) 132px, (max-width: 375px) 138px, (max-width: 384px) 159px, (max-width: 412px) 172px, (max-width: 414px) 173px, (max-width: 480px) 180px, (max-width: 600px) 228px, (max-width: 640px) 244px, (max-width: 768px) 295px, (max-width: 800px) 308px, (max-width: 1024px) 119px, (max-width: 1280px) 140px, (max-width: 1366px) 139px, (max-width: 1440px) 148px, (max-width: 1920px) 202px'/>

<b:else/>

  <img expr:alt='data:post.title' expr:srcset='sourceSet(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDCQEJLNSjdH72adB-jqpwZgpHO6y2n2TclnA0zQ_QTIStsTqoyDS_JbiAhFYgagHd9SxrvA7OL1DvtxTboBVjt_IMbI0iBUcn9zErpSr8taldp_m1YaYuZutfgh0a0Sc2cI-1LHLTc8kp/s1600/safe_image.png&quot;, [116,119,132,138,139,140,148,159,172,173,180,202,228,244,295,308], &quot;16:9&quot;)' sizes='(max-width: 320px) 116px, (max-width: 360px) 132px, (max-width: 375px) 138px, (max-width: 384px) 159px, (max-width: 412px) 172px, (max-width: 414px) 173px, (max-width: 480px) 180px, (max-width: 600px) 228px, (max-width: 640px) 244px, (max-width: 768px) 295px, (max-width: 800px) 308px, (max-width: 1024px) 119px, (max-width: 1280px) 140px, (max-width: 1366px) 139px, (max-width: 1440px) 148px, (max-width: 1920px) 202px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDCQEJLNSjdH72adB-jqpwZgpHO6y2n2TclnA0zQ_QTIStsTqoyDS_JbiAhFYgagHd9SxrvA7OL1DvtxTboBVjt_IMbI0iBUcn9zErpSr8taldp_m1YaYuZutfgh0a0Sc2cI-1LHLTc8kp/s1600/safe_image.png'/>

</b:if>

Khi tải trang cho ra ảnh kích thước:

<img

alt="Cách chèn quảng cáo cố định trong bài viết chỉ hiển thị trên mobile"

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/s1600/banner-body-min.png"

sizes="

(max-width: 320px) 116px,

(max-width: 360px) 132px,

(max-width: 375px) 138px,

(max-width: 384px) 159px,

(max-width: 412px) 172px,

(max-width: 414px) 173px,

(max-width: 480px) 180px,

(max-width: 600px) 228px,

(max-width: 640px) 244px,

(max-width: 768px) 295px,

(max-width: 800px) 308px,

(max-width: 1024px) 119px,

(max-width: 1280px) 140px,

(max-width: 1366px) 139px,

(max-width: 1440px) 148px,

(max-width: 1920px) 202px

"

srcset="

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w116-h65-p-k-no-nu/banner-body-min.png 116w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w119-h66-p-k-no-nu/banner-body-min.png 119w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w132-h74-p-k-no-nu/banner-body-min.png 132w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w138-h77-p-k-no-nu/banner-body-min.png 138w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w139-h78-p-k-no-nu/banner-body-min.png 139w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w140-h78-p-k-no-nu/banner-body-min.png 140w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w148-h83-p-k-no-nu/banner-body-min.png 148w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w159-h89-p-k-no-nu/banner-body-min.png 159w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w172-h96-p-k-no-nu/banner-body-min.png 172w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w173-h97-p-k-no-nu/banner-body-min.png 173w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w180-h101-p-k-no-nu/banner-body-min.png 180w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w202-h113-p-k-no-nu/banner-body-min.png 202w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w228-h128-p-k-no-nu/banner-body-min.png 228w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w244-h137-p-k-no-nu/banner-body-min.png 244w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w295-h165-p-k-no-nu/banner-body-min.png 295w,

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Qba9f6TgVr_SCRBXo_Ghq_W-TwHK96_qtpKRazgRcq3pLy86iyborcqPq_kxcmsBb5I0qPJ_haa7giea0dTkTfFqNKrWdP02MMPrguwHNhZ2KqqJtYtkib-plt0N_VbxKxXW33D243D/w308-h173-p-k-no-nu/banner-body-min.png 308w

">

Như vậy mình đã thiết lập xong kích thước ảnh trong chủ đề xml của template, vậy ảnh trong bài viết phải xử lý thế nào?

Bài cùng chuyên mục

Bài cùng tác giả