Hình ảnh là một trong những yếu tố quan trọng, góp phần nâng cao hiệu quả thiết kế website bất động sản. Tuy nhiên, quá lạm dụng hình ảnh hoặc sử dụng hình ảnh có kích thước lớn sẽ có tác dụng ngược đến người dùng.
Các website về bất động sản có xu hướng sử dụng hình ảnh lớn, toàn độ rộng màn hình, có tác động lớn đến cảm xúc của khách truy cập. Nhưng hình ảnh cũng là con dao hai lưỡi đối với website bất động sản nếu bạn sử dụng không đúng cách.
3 giây là khoảng thời gian cần để tạo ấn tượng với khách truy cập. Bên cạnh đó, Google đã tuyên bố rằng tốc độ tải trang có ảnh hưởng đến thứ hạng tìm kiếm của website. Và hình ảnh là một trong những yếu tố có tác động đến tốc độ tải trang. Chính vì vậy, hình ảnh quá lớn hoàn toàn không cần thiết.
Tối ưu hóa website bất động sản sẽ quyết định thành công của bạn khi maketing cho bất động sản. Có rất nhiều bạn không hiểu vì sao mình làm website rất đẹp, UI UX rất tốt nhưng vẫn không có khách hàng. Thử nghĩ xem, khách hàng vào website của mình nhưng phải đợi hơn 15s mới có thể xem được nội dung. Chắc chắn rằng không ai có thể đủ kiên nhẫn để chờ đợi.
Trong bài viết này mình sẽ giúp bạn giải quyết vấn đề này. Có rất nhiều vấn đề liên quan đến tối ưu website. Trong bài viết này, MarketingAI sẽ tập trung vào phần tối ưu hình ảnh. Bởi vì trong bất động sản điều quan trọng nhất làm website trở nên lộng lẫy là hình ảnh lộng lẫy. Tuy nhiên, có một số quan niệm sai lầm rằng hình ảnh có độ phân giải càng lớn càng tốt. Hình ảnh độ phân giải lớn khiến website đẹp, nhưng phải trả giá bằng tốc độ tải trang.. Do đó bạn cần giảm dung lượng hình ảnh xuống để website được tải nhanh hơn.
Vì vậy, muốn website load nhanh bạn cần phải giảm dung lượng hình ảnh xuống. Nhưng giảm như thế nào là phù hợp? Giảm như thết nào để website vẫn đẹp?
1. Lựa chọn đinh dạng hình
GIF (Graphic Interchange File): là định dạng hình có họa tiết màu đơn giản và tông màu hạn chế. Định dạng hổ trợ 256 màu và màu trong suốt. GIF là định dạng hình ảnh duy nhất hổ trợ ảnh động. Chỉ nên dùng định dạng này cho ảnh động. Thậm chí, với HTML5 bạn sẽ không cần tới ảnh GIF này vẫn có thể dùng ảnh động.
JPEG hay JPG (Joint Photographic Experts Group): là định dạng chính để hiển thị ảnh chụp và ảnh có tông màu liên tục (không có màu trong suốt). JPEG/JPG hiện đang được sử dụng rộng rãi cho mọi website. Định dạng này hỗ trợ hàng triệu màu nhưng không hỗ trợ màu trong suốt. JPEG/JPG là định dạng được nén dưới dạng file .zip. Nhờ đó, dung lượng hình ảnh được giảm rất đáng kể (nhẹ hơn nhiều so với PNG) nên sử dụng định dạng này cho tất cả các hình ảnh còn lại.
PNG (Portable Network Graphics): là định dạng được kết hợp hai điểm hay nhất của GIF và JPEG là hỗ trợ màu trong suốt của GIF và hàng triệu màu của JPEG. Tuy nhiên dung lượng file PNG rất lớn (gấp 3 lần so với JPEG) nên định dạng này được dùng cho hình ảnh có độ trong suốt.
2. Resize hình ảnh (giảm kích thước hình ảnh)
Có khi nào bạn dùng hình ảnh có kích thước 1000 x 1000px chỉ để cho một icon không? Tôi đã gặp một trường hợp như vậy, và không chỉ riêng mình tôi đâu. Với một icon, bạn chỉ cần dùng hình ảnh với kích thước 50 x 50px với kích thước này dung lượng hình ảnh được giảm đi 400 lần. Với kích thước này, dung lượng hình ảnh được giảm đi 400 lần, Tức là với hình ảnh là 400 KB sau khi resize hình ảnh chỉ còn 1KB. Ngoài ra bạn có thể dùng các nguồn ảnh icon như fontawesome, bootstrap,… để thay thế cho hình ảnh ban đầu. Khi đó kích thước icon này sẽ được tính bằng byte.
3. Tối ưu hóa hình ảnh
Ngoài hai yếu tố trên, chất lượng hình ảnh cũng là một điều đáng phải quan tâm trong tối ưu hóa website bất động sản. Dưới đây là hai hình ảnh có cùng kích thước, cùng định dạng. Một hình có độ phân giải 100 (theo đại lượng querity trong photoshop) và một hình có độ phân giải 60.
Bằng mắt thường, bạn sẽ không thể phân biệt được đâu là hình có độ phân giải 100 và đâu là hình có độ phân giải 60. Hình bên trái có độ phân giải 100 (723kb) và hình bên phải có độ phân giải 60 (352kb).
Ngoài ra, cũng có một số kĩ thuật nâng cao khác như tải hình ảnh chất lượng cao sau khi click vào hình chất lượng thấp trước (dùng phương thức load của javascript), cắt nhiều hình ảnh hiển thị cho từng loại thiết bị, thay một số hình ảnh đơn giản bằng định dạng HTML5. Bạn cũng có thể dùng canvas để tạo hình ảnh, sử dụng hình ảnh bằng file csv,… Các kỹ thuật này đòi hỏi bạn phải có một số kiến thức về lập trình front-end như HTML, CSS, Javascript.
Với các kỹ thuật đã được đề cập bạn hoàn toàn có thể tối ưu hóa website bất động sản một cách hiệu quả. Trong bài tiếp theo mình sẽ hướng dẫn bạn cách sử dụng các công cụ để tối ưu hình ảnh một cách hiệu quả.
Theo Ngọc Mai - MarketingAI
Bình luận của bạn