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 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
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%
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
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
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
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!