Vẫn là lời khuyên cũ. Trước khi sử dụng ảnh trên Website bạn phải nén ảnh lại trước khi up lên bằng:
- https://compressnow.com/ (với ảnh JPG)
- https://gifcompressor.com/vi/ (với ảnh GIF)
- https://compresspng.com/vi/ (với ảnh PNG)
Cách 1: Dùng Javascript để cắt ảnh vừa với kích thước hiển thị
Cách này thì thường áp dụng cho gọi bài viết theo nhãn, có sử dụng javascript
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
<script type='text/javascript'>
// < ![CDATA[$(document).ready(function () {
var w = 300;
var h = 150;
$('.secondary-post').find('img').each(function (n, image) {
var image = $(image);
image.attr({
src: image.attr('src').replace(/s\B\d{2,4}/, 'w' + w + '-h' + h + '-c')
});
image.attr('width', w);
image.attr('height', h);
});
});
//]] >
</script>
Thay lại các thông số của code như sau:
- Thay lại class hoặc id chứa ảnh cần cắt
- Điều chỉnh lại kích thước cần cắt
với:
- w = 300 // là ảnh cắt ra có độ rộng 300px
- h = 150 // là ảnh cắt ra có độ cao 150px
Code này phải thêm vào trước /head để thực thi trước ảnh để tránh hiện tượng load ảnh rồi mới cắt sau.
Nhược điểm của cách cắt ảnh bằng javascript là phải sử dụng đến Javascript phần nào tối ưu được ảnh nhưng lại làm nặng website vì sử dụng javascript lại.
Cách 2: Gọi ảnh bằng hàm trong blogger với điều kiện
<b:if cond='data:post.firstImageUrl'>
<a class='thumb' expr:href='data:post.url'>
<img expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl,318,"16:9")' expr:title='data:post.title' style='width:100%'/>
</a>
</b:if>
Với: data:post.firstImageUrl là gọi ra link của ảnh đầu tiên trong bài viết, lấy ra để làm thumb bài viết ở trang nhãn.
- Code này thường áp dụng cho các trang nhãn (Label) hoặc trang Search
- Gọi ảnh đầu tiên trong bài viết lấy kích thước hiển thị là 318px
- Tỉ lệ ảnh là 16:9
Nếu dùng cách gọi ảnh thông thường thì ảnh đầu tiên up trong bài viết là kích thước bao nhiêu sẽ gọi ra size bấy nhiêu sẽ làm nặng trang.
Ta chỉ gọi kích thước ảnh vừa với kích thước muốn hiển thị thôi
Ta chỉ gọi kích thước ảnh vừa với kích thước muốn hiển thị thôi
Cách 3: Sử dụng điều kiện gọi kích thước ảnh theo màn hình hiển thị.
<img expr:title='data:post.title' expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:srcset='sourceSet(data:post.firstImageUrl, [200,400,800,1600], "16:9")' style='width:100%' />
Lần lượt sẽ gọi ra các ảnh có kích thước như sau:
- 200px, tỉ lệ ảnh 16:9
- 400px, tỉ lệ ảnh 16:9
- 800px, tỉ lệ ảnh 16:9
- 1600px, tỉ lệ ảnh 16:9
Ví dụ về cách hoạt động:
- Nếu truy cập vào máy tính có màn hình hiển thị 1366 x 768 (800px < Thiết bị của bạn <1600px) nó sẽ lấy ảnh kích thước lớn hơn là 1600px
- Nếu truy cập vào máy tính có màn hình hiển thị 600 x 480 (400px < Thiết bị của bạn <800px) nó sẽ lấy ảnh kích thước lớn hơn là 800px
Cách 4: Điều kiện kết hợp cho 2 chế độ Mobile Desktop
<b:if cond='data:blog.isMobileRequest == "true"'>
<img expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl,480,"16:9")' expr:title='data:post.title' style='width:100%'/>
<b:else/>
<img expr:title='data:post.title' expr:alt='data:post.title' expr:srcset='sourceSet(data:post.firstImageUrl, [200,480,600,800], "16:9")' style='width:100%' />
</b:if>
</b:if>
- Nếu trên Mobile thì gọi ra kích thước 480px
- Còn không phải mobile thì gọi theo kích thước theo màn hình ở cách thứ 3
Hi vọng với 4 cách trên sẽ giúp giảm tải ảnh là gọi ra được kích thước phù hợp.
Hướng dẫn tối ưu ảnh trên Iphone 6/7/8
Thực tế thì màn hình hiển thị của iphone 6/7/8 có độ rộng là 375px cho nên ta không cần gọi ảnh có kích thước lớn hơn trên thiết bị này làm gì.
Khi kiểm tra phần tử thực tế thì ảnh website toilaquantri.com chỉ hiện thị kích thước 339x190 cho nên ta sẽ đặt điều kiện gọi ảnh trên di động là 339 với tỉ lệ 16:9 (Không quan tâm vào chiều cao luôn)
Như vậy ta sẽ code sau:
<b:if cond='data:blog.isMobileRequest == "true"'>
<img expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl,339,"16:9")' expr:title='data:post.title' style='width:100%'/>
<b:else/>
<img expr:title='data:post.title' expr:alt='data:post.title' expr:srcset='sourceSet(data:post.firstImageUrl, [200,480,600,800], "16:9")' style='width:100%' />
Kết quả sau khi tối ưu ảnh trên mobile:
Chúc bạn thành công!
Hay quá bác à!
Áp dụng thôi bác :D