Hình ảnh luôn là một phần quan trọng của website, biết cách tối ưu hình ảnh cho website trong triển khai nội dung sẽ giúp website trở nên đặc biệt thu hút. Tuy nhiên, đa phần các trang web hiện nay đều chưa ý thức được điều này hoặc đã biết nhưng chưa hiểu được cách tối ưu hình ảnh trên web, trên các công cụ tìm kiếm, mạng xã hội,...

Tối ưu hóa hình ảnh trên website không chỉ đơn thuần là giúp hình ảnh đẹp và phù hợp với nội dung website hơn mà nó còn có thể giúp website thu hút được một lượng người dùng lớn trên mạng internet đến từ các công cụ tìm kiếm, mạng xã hội,... Bài viết này sẽ chia sẻ đến bạn tất tần tật từ A - Z các phương pháp tối ưu hình ảnh cho website hữu hiệu, giúp bạn tối ưu hóa hình ảnh một cách đơn giản, dễ dàng nhất, cùng theo dõi nhé!

Dùng bao nhiêu ảnh trong một bài viết là tốt?

Một bài viết nên có bao nhiêu hình ảnh?
 
Một trong những câu hỏi thiết kế website Tất Thành thường nhận được nhất về việc tối ưu hình ảnh trên website chính là Nên dùng bao nhiêu ảnh trong một bài viết là tốt nhất? Có phải dùng càng nhiều ảnh càng tốt hay không?

Trên thực tế hiện nay, không có một quy ước cụ thể nào về số lượng ảnh tối ưu cho một bài viết cả. Mục đích chính của việc sử dụng hình ảnh trong các bài viết là để giúp giải thích nội dung của toàn bài, giúp người dùng trên website có thể dễ dàng đọc hiểu nội dung và ghi nhớ chúng qua các hình ảnh sinh động. Vì thế, tùy theo độ dài nội dung bài viết cũng như số lượng ý mà bạn triển khai, hãy chọn cho mình các hình ảnh diễn giải phù hợp.

Hình ảnh giúp giải thích nội dung toàn bài? Vậy có phải dùng càng nhiều ảnh càng tốt, càng giúp người đọc dễ hiểu hơn hay không? Việc sử dụng hình ảnh hợp lý là rất tốt? Tuy nhiên không phải vì vậy mà bạn có thể lạm dụng sử dụng hình ảnh, bởi về cơ bản, dung lượng mà một hình ảnh chiếm dụng trên bộ nhớ lớn hơn rất nhiều so với text, vì thế, một bài viết càng có nhiều ảnh thì dung lượng càng nặng, thời gian tải bài viết trên website cũng lâu hơn, ảnh hưởng đến trải nghiệm của người dùng cũng như đánh giá xếp hạng website của công cụ tìm kiếm.

Vì thế, chỉ nên sử dụng hình ảnh một cách phù hợp với nội dung bài viết. Với những nội dung bắt buộc phải sử dụng nhiều ảnh như bài hướng dẫn chi tiết, bài giới thiệu mẫu,... Hãy tối ưu kích thước, dung lượng ảnh bằng các công cụ nén ảnh để tăng tốc độ load trang lên mức tốt nhất. 

Các bước tối ưu hóa hình ảnh cho website

Mục đích hoạt động cốt lõi của đa phần các website hiện nay là "thu hút người dùng", dù là website tin tức hay website bán hàng thì thu hút người dùng vẫn luôn là một trong những mục tiêu hàng đầu. Và đương nhiên, để làm được điều này, một website sinh động với nội dung, hình ảnh hữu ích, hấp dẫn và đặc biệt thân thiện với người dùng, công cụ tìm kiếm là cần thiết. Dưới đây là các bước cần thực hiện trong tối ưu hình ảnh có thể bạn chưa biết, cùng theo dõi nhé:

Chọn định dạng ảnh tối ưu

JPEG 2000, JPEG XR và WebP là những định dạng được khuyên dùng
 
Định dạng ảnh phổ biến thường được sử dụng trên website hiện nay là JPG. Định dạng ảnh JPG giúp bạn giảm dung lượng ảnh xuống thấp, tuy nhiên chất lượng hình ảnh cũng theo đõ bị giảm theo, vì thế, định dạng này thường thích hợp cho những bài dạng tin tức, những bài không cần hình ảnh quá mức sắc nét.

Với những hình ảnh cần độ nét cao như banner, hình ảnh sản phẩm, bạn có thể sử dụng định dạng ảnh PNG và nén bằng một số công cụ nén không làm giảm chất lượng hình ảnh.

Ngoài ra, hiện nay, một số định dạng ảnh cũng cung cấp đến bạn khả năng nén tốt hơn với chất lượng không đổi như JPEG 2000, JPEG XR và WebP, tuy nhiên không phải website dạng nào cũng hỗ trợ các định dạng ảnh này. Việc sử dụng các định dạng mới cũng phẩn nào giúp hạn chế tình trạng ảnh bị sao chép. 

Tối ưu tên ảnh

Một ví dụ về tên ảnh đặt theo từ khóa tên top kết quả tìm kiếm của google
 
Tối ưu tên ảnh quyết định URL trực tiếp dẫn đến ảnh, nó có hỗ trợ rất tốt trong việc SEO ảnh trên công cụ tìm kiếm. Tuy nhiên, hầu hết tên ảnh sau khi tải về hiện nay đều được đặt bằng các ký tự bất quy tắc và không có ý nghĩa. Vì thế, tối ưu tên ảnh là một trong những công việc đầu tiên mà bạn cần làm trước khi đi tới các bước tối ưu hình ảnh chi tiết.

Một số quy tắc khi đặt tên ảnh mà bạn có thể lưu ý như sau:
  • Không đặt tên ảnh quá dài: Cũng giống như URL bài viết, chỉ nên đặt URL ảnh ngắn gọn, tập chung vào chủ đề bài viết
  • Đặt tên theo từ khóa chính: Đặt tên theo từ khóa chính giúp ảnh dễ dàng xuất hiện trong trang tìm kiếm ảnh của google theo từ khóa hơn.
  • Trong tên không có ký tự cách, giữa các từ nên phân biệt nhau bằng dấu nối: Các ký tự cách (khoảng trống) trong tên ảnh sau khi upload lên web sẽ được tự động thay thế bằng các ký tự đặc biệt trong URL, việc này gián tiếp khiến URL ảnh trở nên nối nghĩa, khó hiểu, ảnh hưởng đến việc công cụ tìm kiếm xác định được ý nghĩa ảnh truyền tải.
  • Tên ảnh không chứa các ký tự đặc biệt, tối nghĩa
Có ảnh hưởng khá lớn đến thứ hạng của ảnh trên công cụ tìm kiếm, vì thế, trong bất cứ trường hợp nào, khi tải ảnh lên website, hãy nhớ tối ưu tên ảnh theo từ khóa bạn muốn tập trung.

Tối ưu kích thước, dung lượng ảnh

Kích thước và dung lượng hình ảnh là 2 yếu tố ảnh hưởng lớn đến tốc độ load của một trang web, vì thế, đây cũng là yếu tố quan trọng cần tối ưu. Cố gẳng giảm kích thước và dung lượng ảnh về mức tối thiểu trong điều kiện không làm giảm quá nhiều chất lượng ảnh, bạn sẽ tiết kiệm được kha khá tài nguyên đấy. Để tối ưu kích thước và dung lượng ảnh, ta chia thành 2 vấn đề cần giải quyết như sau:
 
Tối ưu dung lượng hình ảnh

Tối ưu kích thước của ảnh

Với kích thước bình thường của ảnh, hãy xác định kích thước hiển thị ra website của ảnh thông thường, sau đó cài đặt kích thước ảnh trước khi tải lên tương tự với ảnh trên web để đảm bảo không có phần tài nguyên nào không đủ hoặc bị thừa

Tối ưu dung lượng ảnh chiếm dụng

Với kích thước và chất lượng ảnh giữ nguyên thì dung lượng ảnh chiếm dụng càng nhỏ sẽ càng tốt. Để làm được điều này, ta có thể sử dụng cách nén ảnh thủ công qua các công cụ như photoshop hoặc nén ảnh qua các phần mềm nén ảnh tự động (Xem chi tiết các phần mềm, công cụ nén ảnh ở phần 3 của bài viết).

Thông thường, với các bài tin tức, tùy độ rộng trang chi tiết mà kích thước ảnh được khuyên dùng có thể rơi vào khoảng từ 700px đến 900px tùy trường hợp. Với những sản phẩm yêu cầu kích thước lớn như ảnh sản phẩm, banner thì ta có thể thay đổi kích thước cho phù hợp.

Ngoài ra, ảnh đại diện của các bài viết được chia sẻ trên mạng xã hội tối ưu nên để với tỷ lệ 800px x 416px để đảm bảo hiển thị đầy đủ nội dung.

Bên cạnh đó, với những kích thước ảnh như trên, dung lượng ảnh tối ưu không nên vượt quá 100Kb bởi nó sẽ ảnh hưởng khá nhiều đến tốc độ toàn trang.

Geotag cho hình ảnh

Thông thường, khi chụp ảnh bằng smart phone ảnh sẽ được geotag tự động
 
Geotag là một phương pháp tối ưu hình ảnh dựa trên các tọa độ địa lý đính kèm trong thông tin ảnh. Geotag ảnh rất có lợi cho SEO hình ảnh trên google và SEO map. Nếu như hình ảnh của bạn được chụp bằng điện thoại smart phone thì thông thường hình ảnh đã được geotag sẵn rồi. Tuy nhiên, nếu đây là hình ảnh do chính bạn thiết kế thì việc Geotag hình ảnh và cần thiết.

Một số công cụ hiện nay hỗ trợ bạn geotag hình ảnh tốt như geotag.online, geosetter,... Để việc geotag ảnh hiệu quả nhất, doanh nghiệp của bạn nên có một địa chỉ cụ thể trên bản đồ và lấy tọa độ địa chỉ đó làm thông tin geotag ảnh.

Tối ưu thông tin chi tiết của ảnh

Khai báo chi tiết các thông tin ảnh như tiêu đề, mô tả sẽ giúp công cụ tìm kiếm dễ dàng xác định, đánh giá hình ảnh của bạn từ đó giúp chúng hiểu rõ về trang của bạn hơn, từ đó giúp cải thiện thứ hạng website trên bảng kết quả tìm kiếm. Việc tối ưu thông tin chi tiết ảnh chia làm 2 bước:

Tối ưu thông tin ảnh offline

Tối ưu các thông tin thuộc tính của ảnh
 
Tối ưu thông tin ảnh offline nghĩa là thay đổi các thông tin thuộc tính của ảnh ngay từ ban đầu, sau bước geotag và trước khi up lên website. Ở bước này, một số thông tin cần thay đổi như title, subject, rating, tag, comments, author, date taken, date acquired, copyright.

Điền đẩy đủ các thông tin cần thiết cho ảnh như ví dụ trong hình ảnh trên, thay đổi nội dung cho phù hợp, chú ý các ảnh khác nhau trong một bài phải có tiêu đề khác nhau

Tối ưu thông tin ảnh khi đã upload lên website

Sau khi ảnh đã được tối ưu và up lên web, ta cần chú ý bổ sung thêm một số trường như mô tả ảnh, mô tả url, ...

Vậy là cơ bản ta đã hoàn thiện các bước tối ưu hình ảnh cho website. Tối ưu được tất cả các bước này là bạn đã có thể yên tâm phần nào về khả năng ảnh trên bài viết của bạn sẽ được xuất hiện trong các kết quả đầu của công cụ tìm kiếm rồi đấy. Nếu bạn đã và đang kinh doanh các sản phẩm yêu cầu hình ảnh thì đây sẽ là một trong những bí quyết giúp bạn dễ dàng tiếp cận với khách hàng hơn đấy. Trong phần tiếp theo của bài viết, thiết kế website Tất Thành sẽ tiếp tục giới thiệu đến bạn một số công cụ nén ảnh hiệu quả, tiếp tục theo dõi nhé!

Một số công cụ nén ảnh thông dụng

Dưới đây là một số công cụ nén ảnh hiệu quả cho phép nén một lượng ảnh lớn hoặc nén ảnh tốt mà không làm giảm chất lượng. Và đặc biệt những công cụ này đều miễn phí. Cùng theo dõi nhé:

TinyPNG

TinyPNG là một trong những công cụ nén ảnh thông minh, hoạt động bằng cách giảm chọn lọc số lượng màu trong ảnh, cần ít byte hơn để lưu trữ dữ liệu, khiến hình ảnh gần như không bị giảm chất lượng trong khi dung lượng lưu trữ lại được giảm đi đáng kể.

TinyPNG cho phép người dùng nén tối đa 20 ảnh cùng 1 lúc với độ lớn mỗi ảnh không vượt quá 5MB và chỉ hỗ trợ JPEG và PNG.

Squoosh

Công cụ tối ưu ảnh Squoosh
 
Squoosh là một công cụ nén ảnh vô cùng hiệu quả được đề xuất bởi chính google. Squoosh chỉ nén 1 ảnh/lượt tải nhưng có thể nén ảnh trên nhiều tiêu chí khác nhau từ việc thay đổi kích thước, chất lượng đến cả định dạng ảnh, cách nén,...

Imagecompressor

Imagecompressor là công cụ nén ảnh thứ 3 chúng tôi muốn chia sẻ đến bạn, công cụ này là sự kết hợp hoàn hảo giữa việc tối ưu hóa và thuật toán nén dữ liệu, đảm bảo các hình ảnh có thể được giảm kích thước đáng kể trong khi vẫn giữ được mức chất lượng yêu cầu.

Công cụ nén ảnh chỉ hỗ trợ hình ảnh JPEG và PNG và tối đa 1 lần tải lên là 20 ảnh.

Trên đây là tất cả các thông tin về tối ưu hình ảnh cho website mà thiết kế web Tất Thành muốn chia sẻ đến bạn. Hy vọng những thông tin trong bài viết này là hữu ích. Chúc bạn một ngày làm việc tốt lành!