E-mail: contact@arc.com

EN FR PT

Single Blog

Tối ưu hóa website bất động sản – Tối ưu hình ảnh (phần 1)

Marketing bất động sản
Tối ưu hóa website bất động sản – Tối ưu hình ảnh (phần 1)

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ĩ một 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. Tôi chắc chắn rằng không ai có thể đủ kiên nhẫn để làm điều đó.Ngoài ra tối ưu hóa website còn là điều không thể thiếu cho những bạn bắt đầu tìm hiểu SEO.

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 nhưng trong bài viết này sẽ tập trung cho tối ưu hóa 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. Với hình ảnh độ phân giải lớn thì website sẽ rất lộng lẫy nhưng đổi lại dung lượng website lúc này rất lớn và bạn phải load website rất lâu. Do đó bạn phải giảm dung lượng hình ảnh xuống để website được tải nhanh hơn.

Thử nhìn lại xem các mạng xã hội lớn như facebook, zalo, twitter, google, … có khi nào bạn upload hình lên và tải hình ảnh vừa upload xuống mà vẫn còn giữ nguyên dung lượng? Các ông lớn này luôn nhận hình ảnh của bạn và nén chúng lại với dung lượng rất nhỏ nhưng đủ để mắt người khó nhận ra được sự khác biệt. Mục đích là để cho dung lượng load website nhẹ nhất có thể.

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 trở nên lộng lẫy?

Có ba cách để giải quyết vấn đề này. Thứ nhất lựa chọn đinh dạng hình phù hợp. Thứ hai là thay đổi kích thước hình ảnh vừa bằng (có thể lớn hơn tí) với kích thước hiển thị trên website. Thứ ba là giảm độ phân giải hình ảnh xuống phù hợp. Tôi khuyến nghị bạn nên sử dụng cả ba cách.

1. Lựa chọn đinh dạng hình.

dinh-dang-anh-trong-photoshop
Định dạng ảnh trong photoshop

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 html 5 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). Nó là định dạng sử dụng rộng rãi cho 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 là định dạng được nén theo phương thức Zip. Do đó, dung lượng định dạng này đượ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)

resize-image
Resize hình ảnh

Có khi nào bạn dùng hình ảnh có kích thước 1000 x 1000pixels hiển thị một icon không? Tôi đã gặp một trường hợp như vậy và tôi nghĩ có rất nhiều bạn còn mặt phải. Với một icon bạn chỉ cần dùng một 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. 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 thư viện icon như fontawesome, bootstrap,… để thay cho hình ảnh ban đầu. Khi đó kích thước icon này sẽ được tính bằng byte.

Vì vậy, bạn nên chỉnh kích thước hình ảnh vừa với kích thước ảnh được hiển thị trên website. Điều đó sẽ giúp ích bạn rất nhiều trong việc tối ưu hóa website bất động sản.

3. Giảm chất lượng hình ảnh xuống

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. Với hai hình ảnh có cùng kích thước, cùng định dạng, như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.

 

doi-chieu-do-phan-giai-hai-hinh-anh
Đối chiếu hình ảnh độ phân giải

Bạn sẽ không phận biết đươc mắt thường đâu là hình có độ phân giải 100 đâu là 60. Hình bên trái là hình có độ phân giải 100 (723kb) và hình bên phải độ phân giải 60 (352kb).

Ngoài ra cách kĩ thuật trên 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 code html5 hoặc bạn 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ả.

Nguồn: Munkas.com