Tối ưu hóa ảnh website chuẩn SEO sử dụng base64

Tại sao phải tối ưu hóa ảnh?

Việc tối ưu hóa ảnh là một yêu cầu mặc định và cơ bản nhất của website chuẩn seo, giúp website tăng tốc độ nhanh nhất. Mọi người vẫn nghĩ tối ưu hóa là việc giảm tối đa dung lượng tài nguyên sử dụng. Tuy nhiên theo tôi nghĩ tối giản dung lượng không phải là điều kiện cốt yếu để tăng tốc độ website.Mọi người cần phải hiểu sâu hơn về quy trình hoạt động của hệ thống. Để cân bằng việc tối ưu hóa dung lượng tài nguyên. Ở đây tôi sẽ hướng dẫn các bạn tối ưu hóa ảnh theo cách ngược lại. Đó là làm tăng dung lượng tải về nhưng tốc độ lại nhanh hơn nhiều, tất nhiên bạn phải có một hosting có tốc độ đạt chuẩn.Trên thực tế hosting tại D-Software Việt Nam luôn có tốc độ vượt xa tài nguyên các bạn sử dụng. Hay nói cách khác nó luôn dưa thừa tài nguyên. Bởi các khách hàng của Dsoftware sẽ được chia ra nhiều cụm máy chủ khác nhau. Và mỗi máy chủ chỉ đặt 1 số lượng website nhất định căn cứ theo số liệu giám sát hoạt động của từng website trên hệ thống theo dõi của Dsoftware. Vì vậy ở đây tôi có thể hoàn toàn tăng dung lượng tải về mà tốc độ nhanh gấp nhiều lần trên cơ sở tối ưu kết nối tới máy chủ.

Cách trình duyệt tải tài nguyên về máy trạm thế nào ?

Trình duyệt người dùng gửi đồng thời tối đa khoảng 10 request mỗi lần. Khi website của bạn tốn quá nhiều request  để có thể tải đủ tài nguyên, thì thời gian tải trang càng chậm. Vì thế khi đã tối ưu các vấn đề như css, js, dung lượng ảnh, thuật toán.v… thì chúng ta còn 1 vấn đề để tối ưu, đó là request. Ở đây tôi sẽ biến ảnh thành text để tải cùng với html trong 1 request. Mặc dù dung lượng ảnh tải tăng, nhưng request giảm đi đáng kể. Tốc độ tải website sẽ nhanh hơn nhiều. Bạn tin không?

Tối ưu hóa ảnh với  Base64 ?

Base64 là gì?

Base64 đã được phát triển từ lâu, tuy nhiên lại không được sử dụng nhiều và phổ biến. Nó là chuẩn mã hóa sử dụng bảng mã 6bit để lưu trữ dữ liệu thay vì bảng mã 8bit thông thường. Số 64 trong base64 là số ám chỉ 64 ký tự trong bảng mã ASCII. Base 64 thường được sử dụng để mã hóa các tập tin đa phương tiện (hình ảnh, âm thanh, video,…). Các hình ảnh thay vì được lưu dưới dạng file ảnh thông thường, sẽ được lưu lại dưới dạng ký tự.

Tối ưu hóa ảnh sử dụng base64 image thế nào?

Thay vì lưu ảnh dưới dạng jpg, png, gif và sử dụng link file trong html như thông thường. Chúng ta sẽ chuyển đổi ảnh thành dạng ký tự và trèn chực tiếp vào HTML thay vì link file. Như vậy mỗi ảnh được thay thế bằng base64 sẽ tiết kiệm cho bạn 1 request tới máy chủ web.Sử dụng công cụ online sau để chuyển đổi ảnh sang base64 websemantics.  Up ảnh lên website sau đó nhân convert image và bạn sẽ nhận được code.tối ưu hóa ảnh website sử dụng base64Sử dụng cấu trúc sau cho HTML:<img src="data:image/png;base64,{điền code base64 vào đây}">Cấu trúc cho css:
.base64{
    background-image:url('data:image/png;base64,{điền code base64 vào đây}');
    background-repeat: repeat;
}

Tối ưu hóa ảnh sử dụng base64 và nhược điểm của nó.

Như đã nói khi chuyển đổi ảnh của bạn sang base64 sẽ làm tăng dung lượng tải của bạn (khoảng 5%). Đồng nghĩa với việc tổng dung lượng tải trang sẽ tăng lên kha khá. Vậy nên hay không nên dùng base64. Lời khuyên của tôi dành cho bạn đó là: Hãy sử dụng base64 khi đã tối ưu hết các chi tiết cần thiết và hosting phải có tốc độ đường truyền tốt. Khi đó thì việc sử dụng base64 mới có thực sự phát huy tác dụng. Ngược lại nếu hosting của bạn được xếp vào hàng “cùi” thì lời khuyên chân thành là: “yếu đừng ra gió”. Vì nó sẽ phát huy tác dụng ngược lại, website của bạn sẽ chậm hiển thị hơn. Chậm hiển thị đồng nghĩa với hậu quả thế nào thì chắc bạn là người hiểu rõ hơn ai hết.Chúc các bạn thành công!
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *