Làm thế nào để tối ưu hóa hình ảnh trong WordPress, giúp cải thiện tốc độ load và SEO cho website?
Tôi sử dụng hình ảnh để làm bài viết của mình trông trực quan và sinh động hơn. Nó giúp tôi thu hút sự chú ý người đọc một cách dễ dàng. Đôi khi một screen-shot (ảnh chụp màn hình) có thể làm một công việc tốt hơn rất nhiều so với mô tả bằng văn bản. Đó là lý do tại sao chúng ta nên thêm những screen-shot hữu ích vào bài viết. Hình ảnh chủ yếu được sử dụng để cải thiện trải nghiệm của độc giả. Nhưng đồng thời chúng cũng có thể mang lại cho bạn một lượng truy cập không hề nhỏ từ công cụ tìm kiếm khổng lồ Google Image Search. Tất cả những gì các bạn cần làm là tối ưu hóa hình ảnh theo đúng cách.
Tham khảo thêm:
- Sử dụng định dạng WebP cho hình ảnh trong WordPress
- 10 Công cụ tối ưu hóa hình ảnh giúp cải thiện tốc độ load
Các bước tối ưu hóa hình ảnh trong WordPress
Dưới đây là vài điều nên làm để hình ảnh của bạn thân thiện hơn với công cụ tìm kiếm, đồng nghĩa với việc giúp các bài viết (có chứa hình ảnh đó) cải thiện thứ hạng.
Giảm kích thước file ảnh
Hình ảnh quá nặng có thể làm cho website của bạn load chậm, ảnh hưởng tới trải nghiệm của độc giả và có hại cho SEO. Nhiều người sẽ không có đủ kiên nhẫn để ngồi chờ hình ảnh được load đầy đủ. Họ sẽ sử dụng nút “Back” trên trình duyệt, làm tăng bounce rate của website.
WordPress có sẵn tùy chọn cho phép bạn chỉnh kích thước hình ảnh trong trình soạn thảo bài viết. Nhưng thực sự nó không làm thay đổi dung lượng của hình ảnh, nó chỉ thay đổi kích thước trong HTML mà thôi. Kết quả là, các trình duyệt vẫn phải tải hình ảnh lớn trước rồi sau đó mới thay đổi kích thước của chúng. Vì vậy, để đảm bảo hình ảnh không ảnh hưởng đến thời gian load web, bạn nên nén để giảm thiểu dung lượng của hình ảnh mà không làm giảm chất lượng hiển thị.
Tôi đang sử dụng plugin ShortPixel để tự động nén hình ảnh cho blog WP Căn bản. Bạn cũng có thể sử dụng các plugin khác như reSmush.it Image Optimizer hoặc Robin Image Optimizer để giảm dung lượng hình ảnh, cho phép website tải nhanh hơn.
Đặt tên file ảnh đúng cách
Rất nhiều người có thói quen đặt tên file hình ảnh có dạng “image001.jpg”. Kiểu đặt tên như thế này thực sự làm mọi việc trở nên khó khăn khi xác định nội dung của hình ảnh. Vì vậy, sẽ tốt hơn nếu bạn sử dụng một cái tên có liên quan và mô tả chính xác nội dung của hình ảnh.
Ví dụ, bạn sử dụng bức ảnh của một cô gái trong bài viết về SEO WordPress. Tên của nó nên được đặt là “wordpress-seo” thay vì “sweet-girl”. Một điều quan trọng nữa là bạn nên sử dụng dấu gạch nối để phân tách các từ riêng biệt trong tên của hình ảnh (“wordpres-seo” tốt hơn là “wordpressseo”). Tuyệt đối không đặt tên hình ảnh bằng tiếng Việt có dấu, vì nó rất dễ gây ra lỗi 404 (do mã hóa link) cho hình ảnh khi bạn chuyển host.
Định dạng hình ảnh
Đây không phải là một vấn đề nghiêm trọng. Nhưng nếu bạn thực sự quan tâm về chất lượng hình ảnh và thời gian load web thì nên cân nhắc để sử dụng định dạng hình ảnh thích hợp. Dưới đây là danh sách các định dạng phổ biến nhất và mục đích sử dụng của chúng:
- JPG/ JPEG – Được sử dụng cho các hình ảnh như ảnh chụp, không đòi hỏi chất lượng cao.
- PNG – Được sử dụng cho các hình ảnh đồ họa như banner, logo… đòi hỏi độ sắc nét cao.
- GIF – Được sử dụng cho hình ảnh động.
Ngoài ra, có một định dạng mới – WebP, thậm chí còn nhẹ hơn JPG/ JPEG khá nhiều. Nếu website của bạn không đòi hỏi hình ảnh với chất lượng cao thì WebP là sự lựa chọn hợp lý nhất để tăng tốc độ load.
Thêm Alt-Text
Alt-Text là cách viết ngắn gọn của Alternative Text (văn bản thay thế). Đây là phần quan trọng bậc nhất trong vấn đề SEO hình ảnh.
Khi chúng ta thấy hình ảnh của hiển thị trên website, chúng ta sẽ ngay lập tức nhận ra tất cả những gì mà hình ảnh muốn diễn tả. Nhưng bot tìm kiếm không thể hiểu được những hình ảnh này một cách dễ dàng. Hầu hết các công cụ tìm kiếm đều dựa trên văn bản để xác định nội dung, chúng không thể đọc được hình ảnh. Alt-Text giúp bot có thể nhanh chóng hiểu được nội dung của hình ảnh.
Hình ảnh cần có thời gian để tải. Lúc đầu, nó sẽ hiển thị một không gian trống thay vì hình ảnh. Nếu bạn không có bất kỳ văn bản thay thế nào thì độc giả và bot tìm kiếm sẽ không hiểu điều gì đang xảy ra với các khoảng không gian trống đó.
Tham khảo thêm: Tự động tạo alt-text cho hình ảnh trong WordPress
Thêm chú thích (Caption)
Một chú thích (caption) hay và mô tả chính xác nội dung sẽ giúp cho hình ảnh của bạn trở nên hấp dẫn hơn. Vì vậy, đừng quên thêm một chú thích cho hình ảnh nếu nó cần thiết, mặc dù chú thích có thể không ảnh hưởng đến xếp hạng trên công cụ tìm kiếm.
Tóm lại
Những điều tôi vừa nói ở trên được diễn tả ngắn gọn như trong screen-shot dưới đây:
Nhìn qua có vẻ như bạn sẽ phải làm rất nhiều công việc chỉ để tối ưu hóa hình ảnh. Nhưng trên thực tế nó không khiến bạn mất quá nhiều thời gian đâu. Một khi bạn làm cho nó trở thành thói quen, mọi việc sẽ rất dễ dàng. Nếu bạn đang vận hành một website sử dụng nhiều hình ảnh hoặc một trang chuyên về nhiếp ảnh thì đây là những việc bạn bắt buộc phải làm.
Bạn có bất cứ lời khuyên nào khác để giúp tối ưu hóa hình ảnh trong WordPress, tốt cho SEO? Hãy chia sẻ nó với chúng tôi bằng cách sử dụng khung bình luận bên dưới.
Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)
Các bài viết trên blog của bạn, ngắn gọn, súc tích, đi thẳng vào vấn đề và giải quyết nó đơn giản , đọc xong thấy luôn cái mình cần, chứ ko như nhiều blog các ông ý viết lan ma lan man, đọc mãi chẳng thoát ý, lòng vòng câu giờ nên dài mà ko chất.
Cảm ơn bạn. Hy vọng bạn sẽ thường xuyên ghé thăm blog của mình trong thời gian sắp tới. :)
mình đăng file ảnh lên thì theme tự nén thành nhiều file kích thươc khác nhau nhưng không xóa ảnh gốc. m muốn tự xóa cho nhẹ bớt đc k
Trừ khi bạn biết chính xác website cần những kích thước ảnh nào, nếu không sẽ bị lỗi hiển thị ảnh. Đừng có dại mà xoá linh tinh.
Những câu văn hay, lời nói hay trong một bài viết đã tốt rồi nhưng để cho sinh động, trực quan hơn và thu hút người xem hơn theo mình nghĩ không gì hơn là có một tấm ảnh để minh họa. Dù sấu dù đẹp có ảnh vẫn hơn. Tuy nhiên hãy cho ảnh đẹp và phù hợp nhất có thể đúng không ạ. Hiệu qura sẽ thấy ngay. Có điều kích thước ảnh với một trang bán sản phẩm thường là bao nhiêu? dung lương bao nhiêu thì mong các bác cho ý kiến ạ. Em đang tham khảo cho trang của em trang chuyên về cung cấp sản phẩm máy ổn áp standa ạ.
Hôm nay tình cờ vào được đây, tôi đã có thêm được nhiều kinh nghiệm bổ ích, rất cảm ơn Ban Quảng Trị và tất cả thành viên ở đây!
Bài viết rất hay! Cảm ơn bạn nhiều nhé!
Cám ơn Hiếu.! Cho anh hỏi kích thước ảnh khoảng bao nhiêu pixel là vừa .? Anh seo mảng kiến trúc nội thất nên rất nhiều ảnh trong bài viết .!
Cái từ “vừa” này nó khó định nghĩa quá. Rộng bằng chiều ngang của phần hiển thị nội dung bài viết là được. :D
Nếu nói về plugin wordpress nén và giữ lại chất lượng hình ảnh tốt mình thấy có thằng kraken io đáng để nhắc tới, tuy nhiên bản free nó chỉ cho sử dụng đến 100MB thì phải, đối với web nhỏ nhỏ mình nghĩ vậy là đủ. Đơn giản hơn thì cứ save for web trên photoshop cũng giảm kích thước đi tương đối rồi. Đó là ý kiến của mình không biết ai đồng quan điểm không.
Nếu là miễn phí thì nên dùng thằng EWWW Image Optimizer cho thoải mái. Nén tốt và không bị giới hạn gì cả. :P
nếu không dùng plus in thì mình có thể làm sao cho giảm kích thước ảnh thế bạn?
Bạn có thể nén bằng phần mềm trên máy tính hoặc sử dụng các công cụ nén ảnh online. :P
Hiếu ơi cho mình hỏi là web mình thỉnh thoảng nó không chịu load hình như thế này thì nguyên nhân là do đâu vậy Hiếu
http://sv1.upsieutoc.com/2017/07/21/image7bdf3.png
Cái này thường do tính năng lazyload hình ảnh. :P
Hi Hiếu,
Mình xin đóng góp thêm 1 công cụ nén ảnh còn bá đạo hơn plug in WP Smush nhiều.
Đó chính là sử dụng trang tinypng.com để nén ảnh trước khi up lên Wordpress.
Mình cũng làm thử phép so sánh giữa 2 thứ này và kết quả nghiêng nặng về tinypng!
Tất nhiên, có bất tiện là phải nén thủ công. Nhưng được lợi là dung lượng ảnh cực thấp, lại đỡ cài thêm plugin nặng site.
Nếu bắt tay làm web ngay từ ban đầu thì sử dụng thằng này là tốt nhất.
Cảm ơn ý kiến đóng góp của bạn. :)
Hi, site mình dùng plug in Wp rocket Hiếu cung cấp. Tốc độ tải trang tăng đáng kể luôn. Thank Hiếu nhé. Nice day!
Cho em hỏi khi 1 bài post có quá nhiều hình ảnh thì đặt tên, caption, alt sao cho hợp lý ạ?
Bạn đặt thế nào cho nó mô tả đúng nội dung của bức ảnh là được. Đừng chú trọng quá nhiều vào việc nhồi nhét từ khóa trong ảnh. Mỗi bài viết chỉ cần một vài ảnh có chứa từ khóa cần SEO là được rồi. :P
Dạ tại hiện tại em bị 1 bài viết tất cả ảnh đều chứa từ khóa SEO (do lúc đầu đặt tên không có tìm hiểu) nên không biết phải làm sao, không lẽ ngồi edit bằng tay lại tên 100 ảnh thì tốn sức quá :(
Mình đã từng ngồi sửa tên của mấy chục nghìn cái ảnh chứ trăm cái ảnh có là gì. :P
Anh có dùng plugin nào để optimize SEO cho các thuộc tính của ảnh không?
Mình không. Sửa thủ công hết. :D
Cho em hỏi là permalink của ảnh có quan trọng không? Khi sửa tên ảnh có cần sửa permalink của ảnh không?
Theo mình thì không cần quan tâm. Mình thậm chí còn thiết lập để redirect từ link ảnh về link bài viết. :P
Dạ, cảm ơn anh