Tối ưu hình ảnh WordPress toàn tập từ A – Z

Dec 29

Tối ưu hình ảnh WordPress có lẽ là điều khiến bạn bận tâm nhất khi thiết kế một website nào đó.

Xem thêm: WordPress là gì? Tại sao bạn nên sử dụng WordPress

Vì 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ó?

Xem thêm: 20 cách TĂNG TỐC WordPress toàn diện từ A - Z

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.

Liên quan: SEO Onpage: Checklist 16 Yếu tố SEO Onpage hiệu quả nhất

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 gõ tên hình ảnh bạn muốn kiếm là có hàng triệu hình ảnh đẹp mắt hiện ra.

Google

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.

Để 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.

Tối ưu hình ảnh WordPress

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.

Tối ưu hình ảnh WordPress

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.

Tối ưu hình ảnh WordPress

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.

Để kiểm tra các kích thước ảnh được tạo ra bởi theme, các 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.

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ờ các bạn vào lại Tools > Rebuild Thumbnails xem có size ảnh nào được tạo ra nữa không nhé.

#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.

Tối ưu hình ảnh WordPress

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
Tối ưu hình ảnh WordPress

Để 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

Tối ưu hình ảnh WordPress

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.

#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

Tối ưu hình ảnh WordPress
  • 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!

Bình luận

avatar

Pin It on Pinterest

Share This