Hướng dẫn svg to base64 php - svg sang base64 php
|
Một trong các mục tiêu chính của tôi trong việc tối ưu hóa tốc độ website là cải thiện First Contentful Paint và First Meaningful Paint, làm cho nội dung thuộc màn hình đầu tiên hiển thị nhanh nhất có thể.First Contentful Paint và First Meaningful Paint, làm cho nội dung thuộc màn hình đầu tiên hiển thị nhanh nhất có thể. Show Lý tưởng nhất, trình duyệt nên có khả năng render và style nội dung thuộc màn hình đầu tiên (above fold content) với số lượng ít nhất các yêu cầu HTTP. Tạo critical CSS, cộng với trì hoãn tải JavaScript và CSS rất có ích trong chuyện này. Một trong các kỹ thuật tương tự mà tôi dùng để cải thiện First Meaningful Paint là inline (nội tuyến) ảnh base64 và SVG.
#1. Ảnh Base64 là gì?#2. Vậy ảnh SVG là gì? #3. Inline ảnh có khả năng gây ra vấn đề gì? #4. Khi nào bạn nên nội tuyến ảnh? #5. Nội tuyến ảnh trong WordPress #6. Kết luận #2. Vậy ảnh SVG là gì?#3. Inline ảnh có khả năng gây ra vấn đề gì? #4. Khi nào bạn nên nội tuyến ảnh? #5. Nội tuyến ảnh trong WordPress #6. Kết luận #3. Inline ảnh có khả năng gây ra vấn đề gì?#4. Khi nào bạn nên nội tuyến ảnh? #5. Nội tuyến ảnh trong WordPress
Một ảnh base64 trong HTML (được nội tuyến): #4. Khi nào bạn nên nội tuyến ảnh?#5. Nội tuyến ảnh trong WordPress  #6. Kết luận
base64-image.de là công cụ rất hay để chuyển đổi ảnh sang định dạng base64.19KB lên 25KB (tôi phải cảm ơn kiểu nén brotli). Ví dụ thực tế, chuyển logo trang Kiến càng sang dạng base64: SVG (viết tắt từ cụm tiếng Anh: Scalable Vector Graphics / Đồ họa Vector có thể mở rộng) là ảnh với kiểu định dạng khác được mã hóa dưới dạng XML. Đây là định dạng ảnh lý tưởng với ảnh vector. Thường thì ảnh logo, icon hay có dạng vector. Các đoạn mã trong SVG được dùng để vẽ các đường thẳng, đường viền, đường cong, vân vân. Do vậy, kích cỡ của SVG thường nhỏ hơn nhiều so với JPG/PNG/GIF.
Chuyển ảnh sang dạng base64 làm ảnh gia tăng kích cỡ lên khoảng 30%; Làm tăng kích cỡ trang HTML (kích cỡ quá lớn sẽ ảnh hưởng đến TTFB); Ảnh không thể phân phối qua CDN. Mặc dù có những nhược điểm như vậy, trong một số tình huống, nội tuyến ảnh là điều bạn nên cân nhắc tiến hành. Hình bên dưới cho thấy các vị trí mà tôi thực hiện nội tuyến ảnh: #6. Kết luậnBase64 là kiểu mã hóa nhị-phân-thành-văn-bản (binary-to-text). Nói cách khác, bất cứ dữ liệu nào cũng biểu diễn được dưới dạng văn bản. Trong trường hợp của chúng ta, ảnh được biểu hiện dưới dạng văn bản. Bất kỳ ảnh nào cũng có thể được chuyển thành dạng base64. Một ảnh thông thường trong HTML có dạng như thế này: Một ảnh base64 trong HTML (được nội tuyến): |
