Tối ưu hóa hình ảnh cho website

Tối ưu hóa hình ảnh mang ý nghĩa gì?

Để một website có điểm chất lượng tốt, ngoài kỹ năng viết bài viết chuẩn SEO ra thì hình ảnh cũng đóng vai trò rất lớn trong việc làm cho nội dung hấp dẫn, bắt mắt hơn. Tuy nhiên không hẳn ai cũng biết cách tối ưu hóa hình ảnh trong thiết kế.

Tối ưu hóa hình ảnh các cho công cụ tìm kiếm giống như việc tối ưu hóa hình ảnh cho người khiếm thị, nhằm mục đích giúp website của bạn chuẩn SEO hơn, gia tăng cơ hội đạt được thứ hạng trên công cụ tìm kiếm.

Những các ối ưu hóa hình ảnh trong thiết kế

  • Hình ảnh sử dụng là những file không cần yêu cầu chất lượng quá tốt như trong in ấn, nhưng phải đảm bảo độ sắc nét, không bị rạn vỡ. Độ phân giải chuẩn dùng cho web là 72ppi (pixels per inch).
  • Trong thiết kế, nên sử dụng những hình ảnh có nền để làm tôn thêm vẻ đẹp của chủ thể. Không nên sử dụng những hình ảnh có máu nền trùng với màu nền website (đa phần là màu trắng), nhất là đối với những list ảnh sản phẩm (vì đa phần các website đều sử dụng background màu trắng). Khi đứng trên nền website, hình ảnh thường bị chơi vơi không có điểm giằng, vì thế gây ra cảm giác không được chắc về mặt bố cục.
  • Nếu vẫn muốn sử dụng backgroud của ảnh trùng với backgroud của trang web, thế nên có bo viền nhẹ.
  • Ngoài việc sử dụng hình ảnh có định dạng vuông và tròn trong thiết kế, đối với hình chữ nhật nên thiết kế theo tỷ lệ 3:2. Sở dĩ như vậy vì đa phần các dòng ảnh số đều cho ra khung hình này, như thế sẽ tiện dụng cho người quản tri trang web hơn. Ngoài ra cũng có thể sử dụng khung hình phổ biến của video 16:9.
  • Các hình ảnh sử dụng trên website nên đồng nhất về khung hình, để khi resize kích thước hiển thị to nhỏ khác nhau không bị méo mó hoặc bị che bớt. Điều này cũng ít nhiều góp phần tạo nên tính đồng nhất cho style.
  • Kích thước hình ảnh phải phù hợp cho trang web, nếu to quá sẽ làm kéo dài thời gian tải trang, nếu bé quá sẽ không tốt khi hiển thị.
  • Nếu có thể, nên chỉnh sửa ảnh cho đủ sáng. Với những hình ảnh thuộc về style của website, cần chỉnh sửa cẩn thận và nên lựa chọn những tone đồng nhất với màu chủ đạo.

Tối ưu hóa hình ảnh trong code

Phần này khá quan trọng với trong SEO, việc tối ưu hóa hình ảnh trong code sẽ giúp tăng thêm khả năng các công cụ tìm kiếm tìm ra website hơn.

Để tối ưu hóa hình ảnh trong code, ta thêm thuộc tính alt vào trong thẻ <img>.

Cấu trúc như sau: <img src=”url” alt=”mô tả ảnh”/>

Trong đó:

  • Thuộc tính src chứa giá trị là “url” chính là đường dẫn của ảnh
  • Thuộc tính alt chứa giá trị “mô tả ảnh” chính là phần mô về nội dung hình ảnh.

Lưu ý: giá trị alt nên chứa từ khóa cần SEO. Ví dụ: Tối ưu hóa hình ảnh cho website

Tên file ảnh cũng phải được chứa từ khóa, nên đặt là tên tiêu đề bài viết và được viết không dấu, cách nhau bằng dấu gạch nối. Ví dụ: toi-uu-hoa-hinh-anh-cho-website.

Thuộc tính này dùng để mô tả về ảnh. Các công cụ tìm kiếm chưa đủ thông minh cũng như khả năng để có thể hiểu được nội dung một bức ảnh đang mô tả những thông tin gì, nhưng chúng có thể đọc được nội dung thông qua thuộc tính alt.

Alt cũng được sử dụng như một văn bản thay thế khi hình ảnh không hiển thị (hoặc không có sẵn), giá trị alt mà chúng ta điền vào sẽ hiển thị trên trang web trong khung hình chứa ảnh.

Ngoài thuộc tính alt, để tối ưu về code, cũng nên quy định kích thước của hình ảnh thông qua css hoặc trực tiếp trong file html.

 

Leave A Reply

Navigate