Hình ảnh (images) trong trang web là một yếu tố ảnh hưởng trực tiếp đến tốc độ load và khả năng SEO của website, chính vì thế mà các webmasters cần làm mọi cách để tối ưu hình ảnh wordpress cho nhẹ hơn nhưng vẫn rõ nét, từ đó giúp toàn bộ website chạy nhanh hơn, giữ chân khách hàng, tăng tỉ lệ chuyển đổi.
Bạn biết đấy, một bức ảnh khi chụp xong có kích thước rất lớn, nhất là đối với các máy ảnh chuyên nghiệp có thể lên đến vài trăm MB. Đối với các điện thoại thông thường, một tấm ảnh khi chụp xong cũng nặng vài MB đến vài chục MB rồi, nếu chúng ta cứ để thế tải lên thì sẽ chẳng mấy chốc mà host, vps của bạn sẽ phải nâng cấp, điều này sẽ khiến bạn tốn tiền của hơn. Chính vì thế chúng ta cần tối ưu các tập tin này trước và sau khi tải chúng lên web.
Để thực hiện việc tối ưu hóa hình ảnh cho wordpress cũng không quá khó khăn lắm vì vốn mã nguồn này có rất nhiều công cụ hỗ trợ nén ảnh miễn phí, và tạo lazy load cho mọi hình ảnh tự động trong trang web, nhiều plugin giúp hỗ trợ seo images.
Trong bài viết này, blog wpvina sẽ chia sẻ cho các bạn cách tối ưu images trong wordpress mà mình hay thực hiện để giúp website có tốc độ load nhanh hơn trên trình duyệt, trên các công cụ đo lường (nhất là Google PageSpeed Insights). Ngoài ra mình cũng sẽ chỉ bạn cách tối ưu hóa hình ảnh chuẩn seo khi tải lên bài viết luôn.
Xem thêm: 10+ trang web tải ảnh miễn phí cho blog.
Mục đích của việc optimize image
- Sau khi tối ưu hóa hình ảnh wordpress (optimize image) thì trang web/blog của bạn sẽ load nhanh hơn do dung lượng hình ảnh nhỏ nên tốc độ tải trang sẽ nhanh hơn nhiều.
- Tiết kiệm được dung lượng host, vps (tiết kiệm dung lượng ổ đĩa và băng thông)
- Tối ưu ảnh nhẹ đi thì sẽ giúp tăng thứ hạng website trên các công cụ tìm kiếm do trải nghiệm người dùng được cải thiện.
Tối ưu hình ảnh trong wordpress là một công việc khá khó khăn và mất thời gian nhưng đó là việc bắt buộc phải làm nếu bạn muốn website của mình được phổ biến rộng rãi.Mình đã liệt kê những cách tối ưu hình ảnh mà mình thường xuyên sử dụng cho các blog của mình bạn có thể tham khảo ngay sau đây.
Tối ưu hóa hình ảnh cho wordpress để tốc độ load trang nhanh hơn
Đầu tiên chúng ta sẽ bàn về việc làm thế nào nhằm giúp tất cả các images trên một url nhanh hơn và trên tổng thế cả trang web nữa.
1. Sử dụng đinh dạng webp sẽ nhanh hơn jpg, png.
Định dạng webp sẽ cho kích thước tệp ảnh nhỏ hơn, hình ảnh chất lượng tốt
Để bắt đầu, cùng mình điểm qua định dạng hình ảnh web có sẵn phổ biến và được sử dụng nhiều nhất: JPEG, PNG, GIF, BMP, TIFF, SVG .
WebP là một định dạng hình ảnh hiện đại cung cấp khả năng nén không mất dữ liệu và dung lượng hình ảnh nhỏ hơn, từ đó tối ưu hình ảnh wordpress làm cho web nhanh hơn.
Hình ảnh có file .WebP có kích thước nhỏ hơn 26% so với PNG và nhỏ hơn 25-34% so với hình ảnh JPEG mà chất lượng vẫn tương đương.
WebP được hỗ trợ trong Google Chrome, Firefox, Edge, Opera cũng như nhiều công cụ và thư viện phần mềm khác. Vẫn còn nhiều trình duyệt chưa hỗ trợ webp.
Để chuyển đổi ảnh có sẵn từ các đuôi khác sang định dạng webp các bạn có thể dùng các plugins hỗ trợ chuyển đổi như: EWWW Image Optimizer, Imagify – Image Optimization & Convert WebP, WebP Express, WebP Converter for Media, WP Enable WebP, EWWW Image Optimizer Cloud…
Có hai dạng chuyển đổi ảnh sang webp trên wordpress để tối ưu hình ảnh đó là urlcuaanh.png.webp (urlcuaanh.jpg.webp) hoặc là urlcuaanh.webp luôn.
Kiểu 1: dạng urlcuaanh.png.webp (urlcuaanh.jpg.webp): kiểu này sẽ giúp trình duyệt hỗ trợ tải ảnh webp tải ảnh webp và trình duyệt không hỗ trợ web sẽ tải ảnh png hay jpg.
Kiểu 2: chỉ mình đuôi urlcuaanh.webp: trình duyệt không hỗ trợ web sẽ tải ảnh .webp gây ra lỗi ảnh(ảnh sẽ trắng xóa). Điều này sẽ không giúp tối ưu hình ảnh wordpress.
Các bạn chỉ nên chuyển đổi theo dạng urlcuaanh.png.webp (urlcuaanh.jpg.webp) thôi vì không phải mọi trình duyệt đều hỗ trợ định dạng webp.
Nếu các bạn không thích dùng webp thì hãy dùng dạng JPG cho các ảnh của mình, đây là loại định dạng phổ thông nhất, hơn nữa nó cũng nhẹ hơn rất nhiều so với PNG.
Chỉ dùng các ảnh PNG khi cần ảnh có nền trong suốt mà thôi, chẳng hạn như logo website.
Hiện tại, mình chưa dùng Webp vì nhiều trình duyệt chưa hỗ trợ.
2. Giảm kích thước hình ảnh trên web bằng các công cụ, tiện ích
Nếu ảnh có ít chi tiết, ít màu sắc, chỉ dùng để minh họa cho có thì các bạn chì cần một ảnh có kích thước nhỏ mà thôi. Không nên dùng quá nhiều các ảnh có kích thước chiều rộng lớn hơn 1200px quá nhiều.
Các bạn có thể xem các trang lớn, web mạnh trên bảng thống kê xếp hạng của google, họ tối ưu hình ảnh như thế nào rồi học hỏi theo. Chẳng hạn như Báo Vnexpress, các bài tin tức của họ hầu như chỉ sử dụng img có chiều rộng chưa đến 800px, chiều cao chưa đến 500px nhằm giúp từng url riêng lẻ tải nhanh hơn.
Hình ảnh từ máy ảnh của các nhà bác chụp rất rõ nét, file gốc ảnh chắc ít nhất cũng phải 1 bức vài MB, nhưng họ nén xuống chỉ còn chưa đến 100KB mà thôi.
Hiện tại mình cũng vậy, hạn chế dùng img >1200px đồng thời img < 100KB, tuy nhiên một số ảnh cần độ chi tiết cao thì mình vẫn để hơn một chút nhưng chiều rộng cũng không quá 1800px.
Tùy theo lĩnh vực của công ty mà bạn lựa chọn tối ưu hình ảnh trong wordpress: kích thước chiều rộng, chiều cao, dung lượng ảnh thấp nhất sao cho phù hợp và rõ nét nhất.
Mình thường dùng ứng dụng máy tính Photoshop để nén hình ảnh trước, và dùng trang web TinyPNG – Compress PNG images while preserving transparency để giảm dung lượng file một lần nữa, rồi mới tải lên web.
Một số ứng dụng plugins nén ảnh tốt nhất như: Smush, EWWW Image Optimizer, Imagify Image Optimizer, Compress JPEG & PNG images…
3. Sử dụng lazyload giúp tối ưu hóa hình ảnh wordpress tốt
Không sử dụng lazyload cho trang web của bạn thì thực sự sai lầm vì kĩ thuật Lazy-Loading giúp tiết kiệm tài nguyên tuyệt vời, hình ảnh chỉ được tải khi cuộn xuống khung nhìn của hình ảnh.
Nếu các bạn mua them trên nhà cung cấp themeforest.net thì hầu như các theme đều được cài đặt sẵn tính năng này rồi, nếu bạn cài them trên thư viện wordpress thì cũng đừng lo lằng vì Core WordPress 5.5 đã thêm sẵn lazy load.
Ngoài ra các bạn có thể thử dụng plugins hỗ trợ kĩ thuật LazyLoad để tối ưu hình ảnh trong wordpress: Lazy Load – Optimize Images, Native Lazyload của Google, a3 Lazy Load.
Xem thêm: Cách tắt xml sitemap + lazy load trong WordPress 5.5
Đặc biệt google pagespeed rất thích các trang web có lazyload, nếu bạn quan tâm đến chỉ số điểm lazyload google pagespeed thì nên bật tính năng này.
Lưu ý: Nếu blog có tiện ích Author box và cho phép bạn đọc nhận xét thì các bạn phải thêm Author loading=”lazy” vào cả ảnh của các tiện ích này nữa.
4. Nên cắt ảnh cho thumbnail.
Nếu các bạn không cắt ảnh cho thumbnail thì nó sẽ tự động lấy ảnh nguôn gốc Featured image làm thumbnail luôn, dẫn đến ảnh sẽ có kích thước lớn, nặng. Do đó cần cắt ảnh thumbnail để ảnh đại diện ngoài trang chủ, trang chuyên mục nhỏ hơn và nhẹ hơn.
Có 2 cách để tối ưu Thumbnail – Featured image của trang web:
Cách 1: tự cắt ảnh bằng các ứng dụng như Photoshop, GIMP… rồi tải lên phần Featured image trong trình soạn thảo bài viết. Tuy nhiên sẽ mất thời gian, ưu điểm ảnh sẽ đẹp.
Cách 2: cắt ảnh tự động, vào Media Settings ===.>>> Thumbnail size ===.>>> Điền thuộc tính Width và Height Thumbnail post mong muốn.
Nhiều theme còn cắt ảnh Thumbnail của cả các tiện ích như bài viết liên quan, bài viết phổ biến nữa. Nhưng cắt nhiều loại quá sẽ tăng kích thước dung lương lưu trữ của host.
5. Sử dụng CDN
Nếu bạn có điều kiện hãy sửa dụng CDN cho hình ảnh, nhất là các trang web đặt hosting, vps ở bên ngoài Việt Nam thì CDN img cực kì cần thiết để tối ưu hóa hình ảnh wordpress.
Có rất nhiều trang web CDN để bạn lựa chọn mua dịch vụ như: KeyCDN, MaxCDN / StackPath …giúp ích cho việc tối ưu hình ảnh trong wordpress rất tốt.
Nếu bạn muốn dùng CDN hình ảnh miễn phí hãy thử Statically – Free CDN for WordPress, Flying Images by WP Speed Matters chắn chắn điểm Google pagespeed và tốc độ sẽ tốt lên đó.
6. Lightbox & Gallery IMG
Dùng Lightbox & Gallery Lightbox sẽ không giúp tối ưu hình ảnh wordpress mà sẽ làm website phải tải thêm các file js khiến nặng web hơn, chính vì thế nếu không cần thiết hãy tắt tính năng Lightbox của ảnh đi.
Như vậy là mình đã bật bí hết mọi cách tối ưu hóa hình ảnh wordpress nhằm tăng tốc cho trang web của bạn rồi, hơn nữa sẽ không phải lo về google pagespeed điểm thấp vì kích thước và chất lượng ảnh nữa.
