Tối ưu hình ảnh WordPress có lẽ là việc tốn công sức khi thiết kế một website nào đó. Vì nếu hình ảnh đẹp, độ nét cao => tải chậm. Và ngược lại.
Xem thêm: WordPress là gì? Tại sao bạn nên sử dụng WordPress.
Một website đẹp đẽ và thu hút không thể thiếu các hình ảnh chuyên nghiệp. Vậy làm thế nào để tối ưu hình ảnh WordPress để website của bạn thật bắt mắt nhưng vẫn tải nhanh như gió?
Ngoài ra tối ưu hình ảnh WordPress còn là một yếu tố cực kỳ quan trọng trong SEO Onpage.
6 vấn đề khi tối ưu hình ảnh WordPress
1/ Nguồn lấy ảnh
Khi viết một bài nào đó, chắc hẳn bạn sẽ cần hình ảnh để minh họa cho bài viết của mình. Vậy câu hỏi đặt ra là bạn sẽ lấy ảnh ở đâu?
Sẽ thật tuyệt nếu như bạn có sẵn ảnh do bạn tự chụp. Hoặc nếu bạn muốn chụp ảnh màn hình, sẽ có hàng tá phần mềm giúp bạn làm điều đó.
Nhưng phần lớn trong chúng ta không thể tìm được những hình ảnh mà chúng ta muốn.
Vậy giải pháp mà chắc hẳn ai cũng nghĩ tới đầu tiên có lẽ là Google. Chỉ cần lên Google là có hàng ngàn hình ảnh đẹp mắt hiện ra.
Nếu bạn muốn tải về và up lên blog của mình thì nên cân nhắc. Vì hầu hết hình ảnh trên đó là có bản quyền.
Google không đánh giá cao các hình ảnh vi phạm bản quyền. Từ đó bạn khó SEO top. Thậm chí nếu website bạn lớn thì có thể bị kiện.
Để an toàn hơn bạn có thể dẫn nguồn. Ví dụ như ảnh từ CNN hay BBC gì đó…
Nếu vẫn không tìm thấy thứ bạn muốn? Có một vài website cung cấp hàng triệu tấm ảnh với độ phân giải cực cao mà lại hoàn toàn miễn phí.
Thậm chí bạn có thể tải ngay lập tức mà không cần đăng ký. Một trong số đó chính là pixabay.com.
Nếu bạn cần các hình ảnh thật chuyên nghiệp cho các tác phẩm mang tính thương mại thì nên mua ảnh tại các kho ảnh chuyên nghiệp.
Một nhà cung cấp hình ảnh khá chất lượng mà giá cả lại phải chăng đó chính là depositphotos. Ở đây có gói 100$ cho 100 hình ảnh khá tốt.
2/ Định dạng hình ảnh (đuôi file ảnh)
Có 3 đuôi ảnh được sử dụng phổ biến hiện nay:
- JPG (hay JPEG): là định dạng phổ biến nhất hiện nay, chất lượng hình ảnh giảm đi rõ nét khi giảm kích thước
- GIF: ảnh động
- PNG: có thể nén mà không làm giảm chất lượng hình ảnh, hỗ trợ ảnh trong suốt (không nền).
Có 2 loại: PNG-8 hỗ trợ 256 màu, dung lượng nhỏ. PNG-24 hỗ trợ lên tới 16 triệu màu, nén ảnh theo chuẩn Lossless nên file sẽ lớn hơn JPG.
Mình thường sử dụng PNG-8 cho các hình ảnh trên blog này.
3/ Kích thước ảnh
Làm sao để biết chiều rộng tới đa cho hình ảnh của bạn? Hay nói cách khác là kích thước ảnh chuẩn trên website là bao nhiêu?
Tùy vào giao diện bạn đang sử dụng mà kích thước này sẽ giao động trong khoảng từ 600-700px. Đây là chiều rộng, còn chiều cao thì tỷ lệ từ 1: 1.5 đến 1: 1.9 là đẹp!
Mình thì thích kích thước ảnh càng lớn càng tốt!
Chiều cao thì tùy vào nội dung bạn muốn hiển thị. Nếu không liên quan đến phần minh họa của bạn thì có thể cắt đi.
Vậy còn kích thước ảnh cho các thumbnail thì sao?
Bạn có thể vào demo theme của bạn, tải về một vài hình ảnh để xem kích thước. Sau đó, bạn cắt đúng chính xác kích thước đó trước khi tải lên.
4/ Ngăn WordPress tạo ra các kích thước ảnh khác nhau
Đây là một trong những việc mà bạn cần làm sau khi cài đặt WordPress. Theo mặc định, WordPress sẽ cắt ảnh để tạo ra các thumbnail có kích thước khác nhau.
Tất cả những gì bạn cần làm là vào Settings > Media > đưa hết tất cả các kích thước về 0 > Save Changes để lưu lại.
Tuy nhiên, đó chỉ là một phần nhỏ của tảng băng trôi. Vì không chỉ có WordPress tự động cắt ảnh mà còn có theme của bạn nữa.
Với mỗi hình ảnh được tải lên, nó sẽ tạo ra hàng chục size khác nhau. Nhưng không bao giờ dùng đến.
Ví dụ hiện tại blog này của mình có hơn 1500+ hình ảnh. Nếu không xóa đi những tấm không cần thiết thì sẽ có 15.000 ảnh được tạo ra.
Trong đó có hơn 13.000 tấm dư thừa. Và mỗi ngày nó sẽ càng “phình to” ra.
Mình lại thích hình ảnh độ nét cao (tầm 1 MB). Như vậy thì rất nhanh hết dung lượng hosting.
Với lại mỗi lần sao lưu WordPress cũng rất nặng! Bạn mà dùng dịch vụ nén ảnh cũng rất tốn credit nữa!
Để kiểm tra các kích thước ảnh được tạo ra bởi theme, bạn vào wp-content/themes/ten-theme-cua-ban/functions.php.
Mở file functions.php lên > nhấn Ctrl + F > gõ add_image_size. Xóa thumbnail nào mà theme của bạn không cần đến > Save.
Nếu cách trên không triệt để và bạn vẫn còn một số file không cần thiết được tạo ra? Hãy cài plugin AJAX Thumbnail Rebuild sau đó vào Tools > Rebuild Thumbnails.
Tại đây, nó sẽ liệt kê ra tất cả các kích thước ảnh mà WordPress và theme của bạn đang tạo ra. Sau đó, copy đoạn code sau và dán vào file functions.php của child theme.
Bạn nên copy vào child theme để khi cập nhật theme cũng không mất code!
add_action ('intermediate_image_sizes_advanced', 'cp_remove_extra_image_sizes'); function cp_remove_extra_image_sizes ( $sizes ) {
unset( $sizes['thumbnail'] );
unset( $sizes['medium'] );
unset( $sizes['medium_large'] );
unset( $sizes['large'] );
unset( $sizes['bloom_image'] );
unset( $sizes['tt_post_icon'] );
unset( $sizes['tt_featured_thumbnail'] );
unset( $sizes['tt_extended_menu'] );
unset( $sizes['tt_related_post'] );
unset( $sizes['tt_post_gallery'] );
unset( $sizes['tt_grid_layout'] );
unset( $sizes['tt_featured_wide_sidebar'] );
unset( $sizes['tt_featured_wide_narrow'] );
unset( $sizes['tt_featured_wide_full'] );
unset( $sizes['tt_related_posts'] );
unset( $sizes['crp_thumbnail'] );
unset( $sizes['affcoups-thumb'] );
unset( $sizes['affcoups-thumb-small'] );
return $sizes;
}Có bao nhiêu file ảnh được tạo ra thì có bấy nhiêu dòng unset ở dưới. Nhớ thay giá trị trong ngoặc vuông bằng tên in nghiêng trong plugin AJAX của bạn. Sau đó nhấn save để lưu lại.
Note: Nên dán vào file functions.php trong child-theme để khi cập nhật theme bạn không phải làm lại
Bây giờ bạn vào lại Tools > Rebuild Thumbnails xem có size ảnh nào được tạo ra nữa không nhé.
Nếu hết rồi thì xóa plugin AJAX Thumbnail Rebuild đi nha!
5/ Xóa các ảnh không được đính vào bài viết nào cả
Như các bạn thấy ở trên, khi mình tải lên 1 file ảnh thì có tới 10 file ảnh được tạo ra.
Nếu chỉ dụng 1 kích thước duy nhất trong bài viết và thumbnail thì ta nên làm gì với 9 ảnh kia? Ta hãy dùng plugin Media Cleaner.
Các bạn có thể bật tính năng thùng rác cho Media Library bằng cách thêm dòng sau vào đầu file wp-config.php:
define( 'MEDIA_TRASH', true );Sau khi cài plugin, các bạn vào Media > Cleaner > Reset > Start Scan. Sau khi scan, một danh sách các hình ảnh không được sử dụng sẽ hiện ra (nếu có) > Delete All.
Note: Backup database và thư mục /uploads trước khi xóa. Các file bị xóa tạm thời sẽ nằm trong thư mục /uploads/wpmc-trash.
Sau khi kiểm tra, các bạn có thể xóa luôn hoặc nhấn khôi phục lại.
6/ Cài plugin nén ảnh WordPress
Bạn cài 1 trong 2 plugin sau để nén ảnh tự động mỗi khi bạn tải lên: Smush Image Compression and Optimization hoặc EWWW Image Optimizer.
Ngoài ra còn có ShortPixel và Imagify cũng rất hay. Nhưng có hạn mức miễn phí nhất định. Nếu muốn dùng thêm thì bạn phải mua.
4 bước tối ưu hình ảnh WordPress
1/ Kiểm tra đuôi và kích thước ảnh
Sau khi có được hình ảnh như ý, việc đầu tiên bạn cần làm là kiểm tra và chuyển đổi đuôi ảnh. Nếu bạn muốn:
- Ảnh động => GIF
- Hình ảnh nhiều màu sắc, có thể kích thước lớn => JPG
- Ảnh nhỏ, trong suốt, nén không làm mất chất lượng hình ảnh => PNG
Để giảm dung lượng ảnh bằng Photoshop, bạn mở ảnh lên nhấn File > Save for Web > chọn định dạng mà bạn muốn > Save.
Bạn có thể chỉnh kích thước ảnh trong Photoshop bằng cách vào Image > Image Size > nhập kích thước bạn muốn > OK.
2/ Nén ảnh online
Bạn có thể sử dụng một trong hai công cụ online sau đây: TinyPNG hoặc Kraken.io. Đây là 2 công cụ nhỏ gọn giúp giảm dung lượng ảnh mà không giảm chất lượng.
Chỉ cần kéo thả hoặc upload ảnh lên sau đó ngồi đếm 1,2,3 rồi tải xuống. Những công cụ này nén ảnh PNG tốt hơn là JPG.
2 công cụ này đều có plugin cho WordPress luôn nha!
3/ Cách đặt tên hình ảnh chuẩn SEO
Một điều mà chúng ta hay gặp phải là để nguyên tên ảnh rồi tải lên media. Điều này không tốt tí nào vì 2 lý do sau đây:
- KHÔNG quản lý được vì bạn chỉ nhìn thấy tên mà không thấy “mặt”. Nếu muốn coi bạn phải mở lên.
- KHÔNG tốt cho SEO.
Google không thể đọc được ảnh của bạn nếu nó không có cái tên chính xác. Tất nhiên là điều này còn tùy thuộc vào nhiều thuộc tính của hình ảnh nữa mà chúng ta sẽ nói ở sau.
Cách đặt tên tốt nhất bao gồm từ khóa của bạn được cách nhau bởi gạch ngang. Các hình ảnh khác trong bài cũng tên như vậy nhưng được đánh số thứ tự 1,2,3…
Ví dụ như ở bài này mình sẽ đặt tên ảnh cho thumnail là toi-uu-hinh-anh-wordpress.png.
Các hình ảnh minh họa khác lần lượt sẽ là toi-uu-hinh-anh-wordpress-1.png, toi-uu-hinh-anh-wordpress-2.png…
4/ Thêm các thuộc tính sau khi tải lên Media
- Title: bạn kiểm tra lại lần nữa trước khi tải lên
- ALT tag – Alternative Text (quan trọng nhất): chữ thay thế khi hình ảnh bị lỗi, giúp Google “đọc” được hình ảnh của bạn
- Thêm Caption (chú thích) cho hình ảnh của bạn nếu cần
- Gõ bỏ liên kết cho hình ảnh
Như vậy là mình vừa hướng dẫn cách tối ưu hình ảnh WordPress giúp website tải nhanh hơn.
Chúc bạn thành công!
Leave a Reply