Để nâng cao hiệu suất trang web WordPress, công việc tối ưu hóa hình ảnh là quan trọng và trong bài viết này, chúng tôi sẽ phân tích từng cấp độ.
Tại sao công việc tối ưu hóa hình ảnh trên WordPres Là Quan Trọng?
Với sự phát triển của công nghệ, chất lượng của thiết bị chụp hình đã được cải thiện đáng kể. Ngay cả các điện thoại thông minh mới như iPhone, OnePlus cũng có khả năng chụp ảnh ở độ phân giải lên tới 4032 x 3024 pixel, đi kèm với dung lượng tệp vài MB. Ngược lại, các thiết bị thông thường như máy tính đều có màn hình rộng từ 1500-2000 pixel và điện thoại di động có chiều rộng khoảng 800 pixel.
Quá trình tối ưu hóa hình ảnh có thể giúp giảm tổng dung lượng trang từ 50 – 70% và đồng thời tăng tốc độ tải lên 2 đến 3 lần.
1. Sử dụng hình ảnh định dạng mới nhất.
Có lẽ bạn đã quen thuộc với các hình ảnh có định dạng như JPEG, PNG và GIF. Tuy nhiên, đây không phải là những lựa chọn duy nhất có sẵn và cũng không phải là những thiết bị có dạng tốt nhất.
1.1 WebP
WebP là một định dạng hình ảnh mới được Google phát triển. Bất kỳ hình ảnh nào cũng có thể được chuyển đổi từ các định dạng như JPEG, PNG, GIF sang WebP định dạng, với khả năng giảm kích thước lên đến 90%.
Ví dụ:
Cùng chất lượng hình ảnh But chi chuyển đổi sang Webp giảm dung lượng lên đến 59%
Mặc dù WebP là một định dạng mới, nhưng nó đã được hỗ trợ từ hầu hết các trình duyệt hiện tại.
Lưu ý:
Hiện vẫn có khoảng 20% người dùng sử dụng WebP trình duyệt không hỗ trợ (đặc biệt là trên iOS của iPhone, dòng điện thoại phổ thông toàn cầu và tại Việt Nam). Do đó, quá trình phát triển khai thác WebP cần phải có điều kiện.
Nghĩa là WebP phân phối định dạng chỉ khi trình duyệt hỗ trợ, ngược lại, bạn cần tiếp tục sử dụng thông tin định dạng thông thường. Điều này đồng nghĩa với việc trang web của bạn cần duy trì cả định dạng .webp và các định dạng khác để đảm bảo tính tương thích trên mọi trình duyệt.
Sử dụng WebP trong WordPress
Trong WordPress có thể thực hiện một cách dễ dàng, đặc biệt thông qua việc sử dụng CDN ( sẽ được thảo luận chi tiết bên dưới). Tuy nhiên, vì lý do nào mà bạn chưa sử dụng CDN, bạn cũng có thể cài đặt plugin WebP Express để đảm bảo nhận nhiệm vụ này.
1.2 SVG
SVG là một vectơ hình ảnh định dạng, trong khi JPEG, PNG, GIF và WebP là các raster hình ảnh có định dạng. Nếu bạn chưa quen thuộc với SVG ảnh định dạng, thì đây là một loại ảnh định dạng được biểu hiện dưới dạng mã hóa. Trình duyệt sử dụng mã hóa này để tạo hình ảnh và đặc điểm độc đáo của SVG là chất lượng không bị mất khi phóng to.
image SVG zoom to more image cũng không bị hỏng
Hình ảnh SVG là sự lựa chọn lý tưởng lý tưởng được sử dụng trong biểu tượng, logo, bảng biểu tượng minh họa, đồ họa thông tin và nhiều mục đích khác. Khác với WebP, tất cả các hình ảnh đều không hợp lý để chuyển đổi sang định dạng SVG . Ảnh SVG thường được tạo bằng Adobe Illustrator, Sketch hoặc các phần mềm tương thích.
Sử dụng SVG trong WordPress
Mặc định, WordPress format not support SVG. Để kích hoạt tính năng này, bạn phải cài đặt plugin Hỗ trợ SVG .
Sau khi thực hiện điều này, bạn có thể tải lên định dạng ảnh .svg tương tự như việc tải lên bất kỳ hình ảnh thông thường nào khác!
1.3 Base64 / Ảnh nội tuyến
Tất cả các hình ảnh được biểu hiện dưới dạng văn bản 64 ký tự được gọi là hình ảnh base64. Có vẻ ngoài khá khó hiểu, phải không ạ?
Vui lòng xem hình ảnh mã hóa để nhận ra sự khác biệt. Hình ảnh thông thường trong HTML thường có dạng như sau:
|
1 |
<span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><img src="https://example.com/logo.png" width="100px"></span></span> |
Hình ảnh base64:
|
1 |
<span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><img src="data:image/png;base64,iVBORw0KGgoAA......==" width="100px"></span></span> |
Thay vì sử dụng URL, định dạng base64 bắt đầu với chuỗi như sau: data:image/png;base64. Phần đầu tiên biểu thị loại dữ liệu, trong khi các ký tự sau dấu phẩy (“,”) đại diện cho hình ảnh dữ liệu.
Vì vậy, đối với việc sử dụng URL, ưu tiên của phương pháp base64 là dữ liệu cần thiết để kết xuất (kết xuất) hình ảnh đã được tích hợp sẵn trong HTML nguồn mã. Do đó, trình duyệt không cần tạo plugin HTTP yêu cầu và cũng không cần tải hình ảnh tệp từ máy chủ.
Dưới đây là hình ảnh PNG:
Đây là hình ảnh base64:
Để biết rõ hơn bạn bấm chuột phải chọn -> Sao chép hình ảnh Địa chỉ dán lên các tab khác của trình duyệt
Ưu điểm:
- Giảm yêu cầu HTTP: Không tăng số lượng yêu cầu HTTP để tải ảnh về.
- Kết quả xuất nhanh hơn: Tăng tốc quá trình xuất hình ảnh.
- Lý tưởng cho các loại hình ảnh cụ thể: Thích hợp cho hình ảnh trên đường biên gấp, logo, hoặc hình ảnh giữ chỗ (giữ chỗ) và các trường hợp tương tự.
Nhược điểm:
- Tăng kích thước ảnh: Chuyển đổi ảnh sang định dạng base64 có thể làm tăng kích thước ảnh lên tới 30%.
- Không thể lưu vào bộ đệm của trình duyệt: Không thể sử dụng bộ đệm của trình duyệt để lưu trữ ảnh.
Triển khai nội tuyến ảnh base64 trong WordPress:
- Bạn có thể chuyển đổi bất kỳ hình ảnh nào sang định dạng base64 bằng cách truy cập trang https://www.base64-image.de/ và tải ảnh lên. Sau khi chuyển đổi hoàn tất, bạn chỉ cần tích vào “sao chép mã”.
- Trong trình biên dịch tập tin Gutenberg, bạn chọn ảnh và nhấn vào “Chèn từ URL”, sau đó dán đoạn mã bạn đã sao chép vào. Đơn giản như vậy!
2. Nén ảnh / Nén ảnh
Đây là phương pháp tôi hay sử dụng trước khi tải lên trang web: Photoshop hoặc các công cụ nén ảnh nó giúp tăng tốc độ tải trang hiệu quả và tiết kiệm băng thông.
Hình ảnh sau khi được nén – giảm 45% so với ban đầu
Hình ảnh nén phương thức trong WordPress
Use Plugin
Plugin mà tôi ưa thích là ShortPixel để tối ưu hóa hình ảnh trên WordPress. Nó cho phép gửi từng hình ảnh đến máy chủ của họ và thực hiện kỹ thuật nén hình ảnh tốt nhất hiện nay. Họ hỗ trợ các loại bao nén bao gồm nén mất chất lượng, bóng và nén không mất chất lượng. Ngoài ra, nó còn có khả năng tạo WebP hình ảnh định dạng.
Một số tham khảo Plugin:
- ShortPixel (ưu tiên dùng) – Đạt khả năng nén tốt nhất, cung cấp miễn phí 100 ảnh/tháng.
- reSmush.it – Hoàn toàn miễn phí cho các ảnh có kích thước từ 5MB trở xuống.
- Optimole – Cung cấp miễn phí cho 1GB ảnh mỗi tháng.
Sử dụng các công cụ miễn phí – Online
Công cụ tôi sử dụng hoặc sử dụng tinypng.com . Nó nén khá nhanh, ở bản miễn phí mỗi lần up lên không quá 20 ảnh / lượng sử dụng không quá 5MB / ảnh. Khi nén nó không bị mất chất lượng hình ảnh.
Link công cụ:
- TinyPNG (khuyên dùng) – PNG, JPG, WEBP.
- Compressor.io – Tất cả các định dạng.
- Svgomg – SVG.
Phân phối hình ảnh qua CDN
Bạn đã tối ưu hóa tất cả các thứ có thể, bao gồm cả công việc sử dụng định dạng mới hình ảnh, nén và điều chỉnh kích thước hình ảnh….. Tuy nhiên, mặc dù tốc độ khóa mạng cao hoặc máy chủ chậm, hãy làm thế bạn có thể giải quyết tình huống này không?
CDN là gì?
CDN là bản viết tắt của “Content Delivery Network” (Mạng phân phối nội dung). Đây là một hệ thống máy chủ đặt rác ở nhiều địa điểm trên toàn thế giới nhằm cung cấp nội dung một cách hiệu quả và nhanh chóng đến tay người dùng.
Khi người dùng yêu cầu nội dung từ một trang web, CDN sẽ định tuyến yêu cầu đến máy chủ vị trí gần nhất để tối ưu hóa thời gian tải và giảm tốc độ mạng. CDN thường được sử dụng để tối ưu hóa tốc độ tải trang web, giảm áp lực cho máy chủ chính và cải thiện trải nghiệm người dùng.
Lựa chọn CDN dịch vụ cho hình ảnh
Khi chọn dịch vụ CDN cho ảnh, có một số yếu tố quan trọng cần xem xét:
- Vị trí CDN máy chủ: Chọn một CDN dịch vụ có máy chủ phân phối rộng rãi, đặt tại nhiều địa điểm trên thế giới để đảm bảo nội dung hình ảnh có thể được phân phối nhanh chóng đến người dùng ở mọi nơi.
- Tính năng tối ưu hóa hình ảnh: Đảm bảo rằng dịch vụ CDN hỗ trợ tối ưu hóa hình ảnh, bao gồm các công việc chuyển đổi hình ảnh định dạng (ví dụ: WebP), nén ảnh và tự động điều chỉnh kích thước ảnh.
- Hiệu suất: Kiểm tra tốc độ mạng và tốc độ tải trang của CDN dịch vụ để đảm bảo nó đáp ứng nhu cầu trang web của bạn.
- Khả năng tích hợp với CMS hoặc nền web của bạn: Đảm bảo CDN dịch vụ dễ dàng tích hợp với hệ thống quản lý nội dung (CMS) hoặc nền tảng web bạn đang sử dụng.
- Giá cả: Xác định chi phí sử dụng CDN dịch vụ, bao gồm bất kỳ chi phí bổ sung nào cho lượng lưu trữ hoặc tính năng đặc biệt.
- Hỗ trợ và độ tin cậy: Đảm bảo dịch vụ CDN cung cấp dịch vụ hỗ trợ tốt và có mức độ tin cậy cao để đảm bảo nó là giải pháp ổn định cho nhu cầu của bạn.
Một số dịch vụ CDN phổ biến cho bao ảnh bao gồm Cloudflare, Akamai, Amazon CloudFront và KeyCDN. Vui lòng kiểm tra và so sánh chúng để tìm ra lựa chọn phù hợp với nhu cầu cụ thể của bạn.
Lời kết:
Việc tối ưu hình ảnh trên website là một công việc khá quan trọng trên nhiều khía cạnh:
- Tăng tốc độ tải trang: Hình ảnh sử dụng phần lớn dung lượng trang web. Bằng cách tối ưu hóa hình ảnh, bạn giảm dung lượng tải xuống và tăng tốc độ tải trang. Điều này cực kỳ quan trọng để cải thiện trải nghiệm người dùng và giúp họ ở lại trang web của bạn.
- Tiết kiệm băng thông: Hình ảnh tối ưu hóa giảm lượng dữ liệu mà người dùng cần tải xuống. Điều này không chỉ giúp họ tiết kiệm băng thông mà còn giúp giảm chi phí băng thông của bạn, đặc biệt là nếu bạn sử dụng dịch vụ tính phí về băng thông.
- Ưu tiên hóa học cho thiết bị di động: Tối ưu hình ảnh giúp đảm bảo rằng trang web của bạn hiển thị đẹp và nhanh chóng trên các thiết bị di động Tối ưu, là yếu tố quan trọng đối với SEO và trải nghiệm người dùng.
- Cải thiện SEO: Tốc độ tải trang và trải nghiệm người dùng là yếu tố quan trọng trong tìm kiếm thuật toán của Google. Trợ giúp tối ưu hóa hình ảnh cải thiện các chỉ số này và có thể tăng cơ sở xếp hạng cao hơn trong kết quả tìm kiếm.
- Tiết kiệm lưu trữ: Hình ảnh tối ưu hoá sử dụng ít không gian lưu trữ hơn, giúp giảm chi phí lưu trữ và quản lý dữ liệu của bạn.
Chúc bạn thành công!
