Tối ưu hình ảnh website, landing page với 6 checklist này

Tối ưu hình ảnh website, landing page để đưa “hình ảnh” của bạn đến với khách hàng một cách chỉn chu, trải nghiệm tốt hơn.

Hình ảnh là một yếu tố quan trọng trong thiết kế trang web và landing page. Nếu không tối ưu hóa hình ảnh một cách đúng đắn, trải nghiệm trang kém hơn, độ uy tín trong mắt khách truy cập thấp hơn, hiệu quả thấp hơn. Có thể kể đến như:

  • Hình ảnh mờ hoặc nhòe có thể làm cho trang web trông không chuyên nghiệp
  • Thời gian tải trang chậm do hình ảnh chưa được tối ưu có thể khiến khách hàng chán chường và rời đi.
  • Bỏ qua việc tối ưu hóa hình ảnh cũng có thể làm mất đi cơ hội tăng lượng truy cập từ kênh tìm kiếm (SEO).

Tối ưu hóa hình ảnh giúp cải thiện tốc độ tải trang và trải nghiệm của khách hàng. Trong bài viết này, chúng ta sẽ cùng nhau xem xét một số hạn mục cần thiết để tối ưu hình ảnh, đảm bảo rằng trang web và landing page của bạn hoạt động tối ưu và tải nhanh hơn.

1. Chất lượng hình ảnh

Cần phải sửa ngay để website hay landing page của bạn trông chuyên nghiệp hơn: Đầu tiên là ảnh nhòe hoặc quá nhỏ, thứ hai là việc bóp ảnh. Chỉ cần nhìn qua mắt thường là bạn sẽ thấy ngay, đừng bỏ qua điều này.

Những lỗi thường gặp của hình ảnh khiến website trông kém chuyên nghiệp hơn
Những lỗi thường gặp khiến website trông kém chuyên nghiệp hơn

2. Bản quyền ảnh

Ngừng sử dụng hình ảnh google. Vì đây là hình ảnh được đăng tải trên website của người khác, có yếu tố bản quyền hoặc được chưa được phép sử dụng miễn phí nên chắc chắn không phải là điểm tốt trong mắt Google.

Các thứ tự ưu tiên: Ảnh tự chụp – Ảnh tự thiết kế – Kho ảnh bản quyền (miễn phí hoặc có phí)

Kho ảnh miễn phí được phép sử dụng:

Hoặc bạn có thể sử dụng các nguồn ảnh có phí như Freepik, Shurterstock, Envato Elements….

Sử dụng Canva hoặc Canva Pro, bạn hoàn toàn có thể sử dụng các hình ảnh này vì đã được Canva cấp phép sử dụng, có bản quyền.

3. Định dạng hình ảnh

Đây là một số đuôi ảnh phổ biến và cách sử dụng phù hợp

  • JPG, JPEG: Được sử dụng cho những hình ảnh có người, phong cảnh, đồ vật, sản phẩm.
  • PNG: Hình ảnh có nền, banner thiết kế, ảnh chụp màn hình, logo hay hình ảnh trong suốt.
  • GIF: Sử dụng cho ảnh động.
  • SGV: Dành cho icon, logo hay vector shapes.

Khi xuất file bằng Canva, Photoshop…. bạn cần để ý và chọn đúng file định dạng như quy định trên. Việc này giúp bạn tối ưu kích thước file hơn mà vẫn đáp ứng được chất lượng ảnh.

4. Kích thước tối đa

Đa phần lỗi thường gặp với người không chuyên (không làm web thường xuyên) là sử dụng ảnh đang có và up thẳng lên web, có những tấm ảnh rộng đến 4.000px và dung lượng hơn 5-10MB. Khi bạn up lên như thế có nghĩa là mỗi lần khách hàng tải trang sẽ đợi đến 3-5 phút chỉ vì chờ ảnh đó load xong, tất nhiên cũng hiếm khách hàng nào kiên nhẫn như thế.

Trước hết, xem các bố cục trong website thường sử dụng phổ biến.

 Cách chia bố cục trong website thường sử dụng phổ biến
 Cách chia bố cục trong website thường sử dụng phổ biến

Và đây là chiều rộng tối đa trong mỗi bố cục vẫn đảm bảo khả năng hiển thị ảnh sắc nét, không mờ nhòe mà lại tối ưu dung lượng. Chiều cao thì tự động tùy theo hình ảnh

  • Full màn hình: Chiều rộng tối da 1920px
  • 2 column: Chiều rộng tối đa 800px
  • 3 column: Chiều rộng tối đa 400px

Khi upload cần kiểm tra kích thước hiện tại của hình ảnh và điều chỉnh chúng cho phù hợp. Sử dụng các công cụ chỉnh sửa hình ảnh để cắt, thay đổi kích thước để chuyển về kích thước vừa đủ dùng.

5. Nén dung lượng ảnh

Đảm bảo việc sử dụng nhiều ảnh mà tốc độ load vẫn không bị ảnh hưởng nhiều thì ảnh cần phải có dung lượng vừa đủ với chất lượng cũng vừa phải. Có nghĩa là chất lượng vẫn đủ tốt nhưng dung lượng trong mức cho phép. Sẽ có một số quy định tương đối như sau:

Quy định này có tính tương đối không cần phải theo chính xác 100%
Quy định này có tính tương đối không cần phải theo chính xác 100%

Với nhiều trường hợp, bạn đã xuất kích thước đủ nhưng file vẫn nặng thì sao?

=> Chúng ta cần nén ảnh lại. Nén ảnh là kỹ thuật giảm kích thước ảnh với chất lượng thấp hơn một chút nhưng vẫn đảm bảo chất lượng hiển thị đủ tốt trên website, không thấy sự khác biệt nhiều qua mắt thường.

Đối với WordPress:

Nếu bạn sử dụng wopress, cài đặt plugin Shortpixel. Đây là giải pháp mà mình dùng nhiều nhất, thấy hiệu quả và dễ sử dụng nhất.

Shortpixel vừa có thể chọn nén ảnh thủ công và vừa nén ảnh tự động mỗi khi bạn up lên. Bạn được 100 credits miễn phí, sử dụng nhiều hơn có thể mua gói hằng tháng hoặc gói theo năm sử dụng cũng khá lợi, mình thấy cũng rẻ. Khi nén, hãy lựa chọn mức nén lossy, gloss hoặc lossless.

Lưu ý: Cần xuất file có kích thước vừa đủ (chesklist số 4) trước khi up lên nhé, vì Shortpixel chỉ nén ảnh giảm dung lượng xuống chứ phải tối ưu hoàn toàn về kích thước dùm bạn.

Kết quả nén ảnh với Shortpixel
Kết quả nén ảnh với Shortpixel

Nếu bạn sử dụng nền tảng khác không thể thích hợp các tính năng nén ảnh thì sao?

Sử dụng Tiny JPG:

Đây là giải pháp nén ảnh online trực tiếp trên website, TinyPNG nén ảnh tốt đến mức bạn không thấy sự thay đổi nào khác biệt khi nhìn bằng mắt mà giảm đi kha khá dung lượng.

Nén ảnh online với TinyPNG
Nén ảnh online với TinyPNG

Xuất ảnh với Canva hoặc Photoshop, AI:

Khi xuất ảnh, bạn chọn tối ưu quality ở mức độ phù hợp. Như file bên dưới chỉ có 31.8KB

Cách xuất ảnh tối ưu chất lượng bằng Canva hoặc Photoshop
Cách xuất ảnh tối ưu chất lượng bằng Canva hoặc Photoshop

6. Tối ưu SEO

Bạn đã dành nhiều thời gian cho việc tối ưu hình ảnh nhưng nếu không tối ưu SEO thì thật là đáng tiếc. Có nhiều nội dung khó lên top đầu của Google trong phần tìm kiếm nhưng lại đứng top trong phần tìm kiếm hình ảnh, tùy từng lĩnh vực mà đó cũng có thể là nguồn traffic dồi dào.

Một số lưu ý nhỏ giúp bạn tối ưu SEO ngay trong tầm tay:

Thêm ATL Image

  • Alt image là mô tả của hình ảnh, để cho google biết hình ảnh của bạn đang nói về điều gì. Điều này cũng khiến cho công cụ tìm kiếm bằng giọng nói dễ dàng truy vấn được hình ảnh đó.
  • Để tối ưu Alt image: Bạn cần thêm nội dung mô tả ngắn gọn về hình ảnh đó, không cần quá máy móc là chèn từ khóa vào hình ảnh mà chỉ cần mô tả chính xác nhất nội dung của hình ảnh. Trong tất cả công cụ soạn thảo của wordpress, wix, substack hay bộ soạn thảo nào của web cũng điều có thể thêm alt image.

Phần chú thích (Image description) khác với mô tả hình ảnh (Alt image). Image description là để người dùng đọc còn Alt image là để bộ máy tìm kiếm đọc.

Đổi tên của ảnh

Mặc dù việc này cũng không tốn nhiều thời gian nhưng hầu hết mọi người đều quên làm. Tên ảnh là một phần quan trọng khi SEO hình ảnh mà cũng nhìn tên file đẹp hơn.

Ví như đổi tên ảnh “hướng dẫn nén hình ảnh”:

  • Hướng-dẫn-nén-file-ảnh.png (Sai)
  • IMG23428.png (Sai)
  • huong-dan-nen-file-anh.png (Đúng)
  • huong-dan-nen-file-anh-2.png (Đúng)

Phần tên bạn có thể chèn từ khóa của bài viết, từ khóa của phần tiêu đề (headling) của đoạn nội dung đó. Miễn sao tên file vẫn đúng nội dung của ảnh đó, không nên chèn từ khóa một cách nhồi nhét.

Với 6 checklist này, đủ để phần hình ảnh của bạn trở nên tối ưu hơn, trang web chuyên nghiệp hơn, tốc độ tải trang tốt hơn và chắc chắn hiệu quả mang lại sẽ tốt hơn. Với mình đây là tuần tự ưu tiên khi tối ưu ảnh: TỐI ƯU PHẦN NHÌN – TỐI ƯU KÍCH THƯỚC – TỐI ƯU MÁY HỌC.

Chúc bạn thành công!

Chia sẻ bài viết
Thân Công Huy
Thân Công Huy

Huy đã làm việc trong lĩnh vực Digital Marketing được hơn 8 năm, hiện tại đang bắt đầu trở thành Solopreneur từ tháng 7/2023. Công việc chính:
+ Freelancer | Copywriter: www.web1trang.vn
+ Blogger: thanconghuy.com

Tại web1trang.vn, Huy làm việc trực tiếp với khách hàng và đưa ra các giải pháp, phương thức để tối ưu landing page hoặc website nhằm tạo ra nhiều kết quả tối ưu hơn.

Thông qua đó giúp mình học hỏi những kiến thức thú vị và đắt giá, những kinh nghiệm hữu ích để chia sẻ tại Blog của web1trang.

Bài viết: 23
0 0 đánh giá
Đánh giá bài viết
Theo dõi
Thông báo của
guest
0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận
0
Rất thích suy nghĩ của bạn, hãy bình luận.x