Cách xóa đến 90% số hình ảnh không cần thiết cho WordPress.

11/09/2021
tối ưu hình ảnh wordpress

Bạn muốn kiếm tiền online nhưng chưa nên biết bắt đầu từ đâu? Hãy cho mình biết nghề nghiệp và mong ước hiện tại của bạn. Bạn sẽ nhận được tư vấn miễn phí gửi qua email sau 30 giây.

Note: Kéo xuống dưới để đọc nội dung bài viết nha!

[QC] Bạn có biết Tiền Giang, Bắc Ninh, Ninh Bình, Hà Nội, Nghệ An, Đà Nẵng, Gia Lai, TPHCM, Lào Cai là những tỉnh, thành có mức độ quan tâm dành cho tiền điện tử, crypto, Bitcoin lớn nhất trong thời gian vừa qua? *

Hay chuyện Cao Thái Sơn đã trở thành "chuyên gia" vẽ chart; Ngọc Trinh thì không quên "phe" số dư hơn 10tr đô trên sàn Huobi?

Nhưng bạn cũng đừng vội FOMO theo, có thể bị "đu đỉnh" đó nha! Hãy bắt đầu bằng việc "nạp" thêm kiến thức:

  • Để hiểu về trend DeFi (tài chính phi tập trung): cho phép bạn gửi / nhận tiền trên toàn thế giới trong tích tắc với chi phí thấp (rất thực tiễn) thì xem khóa này **
  • Để hiểu toàn cảnh về thị trường tiền điện tử, cách tìm những coin mang lại giá trị thực bền vững, lâu dài thì xem khóa này **

* Theo Google Trends

** Khóa học này chỉ cung cấp thông tin và không nên được xem là lời khuyên đầu tư. Consider before investing.

2 khóa học này được chia sẻ bởi Thanh Lê & team đến từ Coin98 với đồng $C98 đang rất hot trên sàn Binance trong thời gian gần đây!

Giá C98 hiện tại:

coin98
coin98

Coin98 (C98)

Price
$ 3.72

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

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 là có hàng ngàn hình ảnh đẹp mắt hiện ra.

Google
Tìm ảnh trên 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.

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.

tối ưu hóa hình ảnh cho wordpress
Tải hàng triệu tấm ảnh miễn phí trên Pixabay

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!

Tối ưu hình ảnh WordPress
Tối ưu hình ảnh WordPress với kích thước hợp lý

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
Xoá kích thước ảnh mặc định để 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.

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.

Tối ưu hình ảnh WordPress
Tối ưu hình ảnh WordPress với Smush

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
Chọn đuôi file phù hợp để tối ưu hình ảnh

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

nén ảnh wordpress
Nén ảnh WordPress với TinyPNG

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.

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!

1210cookie-checkCách xóa đến 90% số hình ảnh không cần thiết cho WordPress.

Hi! Mình tên là Quân, mình viết blog này khi rảnh rỗi. Là người khá hài hước và ham học hỏi, mình muốn ghi chép lại những gì đã học được. Bạn có muốn biết mình đang học những gì tại KTcity, nhấn vào đây nhé! Muốn mời mình ly cafe? Nhấn vào đây nhé!

Có thể bạn quan tâm

Bình luận

Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}