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

Dec 29
Home » WordPress | Nền tảng tạo website miễn phí » Tối ưu hình ảnh WordPress toàn tập từ A – Z

Tối ưu hình ảnh WordPress có lẽ là điều khiến bạn bậm tâm nhất khi thiết kế một website nào đó. 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 để website của bạn thật sắc màu nhưng tải nhanh như gió?

Các vấn đề khi tối ưu hình ảnh WordPress

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 cho đẹp mắt hiện ra.

Nhưng liệu bạn có sử dụng được những hình ảnh này không? Câu trả lời là có nếu như bạn tải về làm hình nền cho máy tính.

Hay bạn chèn hình vào các file powerpoint mà bạn thuyết trình trên lớp. Hay bạn in ra làm poster, bảng hiệu.

Nhưng nếu bạn đưa lên website của mình thì điều đó là không ổn. Vì hầu hết hình ảnh trên đó là có bản quyền.

Nếu bạn làm như vậy thì nếu tác giả không kiện bạn thì Google cũng chẳng coi bạn ra cái đinh gì. Điều đó khiến công việc SEO website của bạn chỉ là “toi cơm” mà thôi.

Nhưng lỡ như bạn thích hình ảnh đó quá rồi thì làm sao? Có một gợi ý nhỏ sẽ giúp bạn.

Lên Google > gõ tên hình ảnh bạn muốn tìm kiếm > chuyển qua tab hình ảnh > nhấn vào tab Công cụ > tại khung hiện ra ở dưới > chọn click vào Quyền sử dụng > chọn Được gắn nhãn để sử dụng lại hoặc Được gắn nhãn để sử dụng lại có điều chỉnh.

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.

Bạn vẫn muốn nhiều hơn? 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?

Câu trả lời là hãy 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.

Đị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 website này.

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

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 tới 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 giao diện của bạn, tải về một vài hình ảnh để xem chi tiết. Sau đó, bạn cắt đúng chính xác kích thước đó trước khi tải lên.

Ngăn website tạo ra các kích thước ảnh khác nhau mà không sử dụng

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

Để 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 tới > 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 file 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 bạn.


function remove_unused_image_size( $sizes) {
unset( $sizes['thumbnail']);
unset( $sizes['medium']);
unset( $sizes['medium_large']);
unset( $sizes['large']);
unset( $sizes['post-thumbnail']);
unset( $sizes['poseidon-header-image']);
unset( $sizes['poseidon-thumbnail-small']);
unset( $sizes['poseidon-thumbnail-medium']);
unset( $sizes['poseidon-thumbnail-large']);
unset( $sizes['poseidon-thumbnail-single']);
}
add_filter('intermediate_image_sizes_advanced', 'remove_unused_image_size');

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 Changes để lưu lại.

Lưu ý: Nên dán vào file functions.php trong child-theme để khi cập nhật WordPress bạn không phải làm lại.

Bây giờ các bạn vào lại Tools > Rebuild Thumbnails coi có size ảnh nào được tạo ra nữa không nhé.

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

Lưu ý: 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.

Cài plugin nén ảnh tự động

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.

Làm thế nào để tối ưu hình ảnh WordPress

Bước 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. 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

Đối với một file ảnh bất kỳ, bạn có thể mở Photoshop lên nhấn Save for Web > chọn định dạng mà bạn muốn > Save

Bạn có thể điều chỉnh kích thước ảnh bằng cách vào Image > Image Size > nhập kích thước bạn muốn > OK

Bước 2 – Nén ảnh

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 nén ảnh hàng loạt mà không làm thay đổi chất lượng hình ảnh. 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.

Bước 3 – Đổi tên ảnh

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.

Một là bạn 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.

Hai là 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 nữa của hình ảnh 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…

Bước 4 – Thêm các thuộc tính sau khi tải lên Media

Title – Check một lần nữa

ALT tag – Alternative Text

Thêm Caption (chú thích) cho hình ảnh của bạn nếu cần

Gõ bỏ Hyperlink 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 đáng kể. Chúc các bạn thành công!

5.0
01

Bình luận

avatar

Pin It on Pinterest

Share This