Hướng dẫn img banner css - img banner css

Kỹ thuật này giúp bạn tăng tốc độ tải khi sử dụng banner hình ảnh to đùng, banner nếu không được làm tốt sẽ làm chậm website đi rất nhiều.

Đây là kỹ thuật rất ít người biết đến nhưng mình thấy nó rất tuyệt vời để tăng tốc độ load website đặc biết tăng tốc độ cho các thiết bị có màn hình nhỏ. ( các thiết bị nhỏ như màn hình điện thoại thường cpu không khỏe như PC)

Nếu bạn đang sử dụng banner đây sẽ là một thủ thuật tuyệt vời cho bạn để giúp cải thiện đáng kể tốc độ load web.

Kỹ thuật này có tên gọi là css background-image dựa trên adaptive image.

Mình vẫn đang áp dụng nó rất là hiệu quả.

Như vậy kỹ thuật này giúp mình tiết kiệm được 10kb ( mình đã áp dụng kỹ thuật nén ảnh tối ưu nhất nên dung lượng ảnh mới được thế này đấy).

Thông thường bạn sử dụng các page builder họ cho bạn chọn banner bạn sẽ chọn cái banner to cho pc, khi người dùng điện thoại mobile load sẽ thật là lãng phí tài nguyên và làm chậm những người sử dụng trên điện thoại.

mình sẽ để đường link để bạn kiểm tra lại dung lượng file: Link ảnh banner PC: https://wptangtoc.com/wp-content/themes/GiaTuan/images/wptangtoc-pc.png Link ảnh banner mobile: https://wptangtoc.com/wp-content/themes/GiaTuan/images/wptangtoc-mobile.png (có thể trong tương lai thay đổi banner khác, cập nhật bài viết này 03/09/2020 mình vẫn đang sử dụng nó)
Link ảnh banner PC: https://wptangtoc.com/wp-content/themes/GiaTuan/images/wptangtoc-pc.png
Link ảnh banner mobile: https://wptangtoc.com/wp-content/themes/GiaTuan/images/wptangtoc-mobile.png
(có thể trong tương lai thay đổi banner khác, cập nhật bài viết này 03/09/2020 mình vẫn đang sử dụng nó)

Cách tối ưu banner website

kỹ thuật này mình dựa trên tính năng adaptive image.

Đây là đoạn css mình sử dụng kỹ thuật này.

.hero {
background-color: transparent;
background-image: url(images/wptangtoc-mobile.png);
background-size: cover;
padding-bottom: 10%;
padding-top: 10%;
padding-left: 5%;
padding-right: 5%;
object-fit: cover;
object-position: center;}
@media screen and (min-width: 600px){
	.hero{
background-image: url(images/wptangtoc-may-tinh-bang.png);
	}
}
@media screen and (min-width: 1023px){
	.hero{
background-image: url(images/wptangtoc-pc.png);
	}
}

bạn cho đoạn code này vào file style.css của themes bạn.

Bạn chỉ cần cho hình ảnh của bạn vào : wp-content/themes/ten_themes_cua_ban/ sau đó tạo thê thứ mục là images rồi cho ảnh của bạn vào.

Để sử dụng hiệu quả tối ưu nhất.

css responsive bạn hãy sử dụng @media min-width đừng sử dụng @media max-width vì đơn giản là cấu hình phần cứng của điện thoại vẫn chưa thể bằng được pc ( quan trọng nữa người dùng điện thoại bây giờ luôn nhiều hơn là người dùng pc truy cập vào website), chính vì đó hãy dùng @media min-width để lấy giao điện điện thoại làm chủ đạo ( làm gốc) còn pc desktop chỉ là làm phụ ( CPU khỏe lên để nó render lại sẽ cho hiệu năng tốt hơn).

Như vậy sẽ giúp bạn đạt hiệu quả tối đa.

Bạn có thể copy đoạn mã của mình về tùy biến và sử dụng.

Lưu ý là hãy sử dụng url tương đối nhé đừng sử dụng url tuyệt đối khi quá trình bạn thay đổi url link ảnh của bạn tránh bị lỗi.

Mình đã viết tối ưu rồi bạn chỉ cần áp dụng theo đó là rất ok.

Cách sử dụng banner bạn vừa làm css

Bạn chỉ cần cho vào bài viết này là là ok nếu bạn muốn thêm nút buton như bình thì chỉ cần thêm phẩn tử html vào bên trong Ví dụ:
nếu bạn muốn thêm nút buton như bình thì chỉ cần thêm phẩn tử html vào bên trong
Ví dụ:

Đăng ký dịch vụ

Đây là mình ví dụ thôi nhé đừng copy rồi paster vì css của bạn và của tôi khác nhau. nếu giao điện đẹp thì bạn phải chịu khó nghiên cứu hoặc bạn có thể liên hệ với mình hy vọng mình có thể giúp đỡ bạn nếu như mình có thời gian rảnh. Chúc bạn thành công!
Chúc bạn thành công!