Cách chuyển hình ảnh thành liên kết

Hình ảnh chất lượng cao trên website có thể thu hút sự quan tâm của khách hàng, tăng cơ hội chuyển đổi bán hàng thành công và khuyến khích truy cập trở lại. Biến một hình ảnh thành một liên kết có thể hướng khách truy cập đến những nội dung quan trọng, thông tin thú vị hoặc tài nguyên bên ngoài trang web.

Làm thế nào để bạn tạo một hình ảnh thành một liên kết? Trong bài viết này, chúng ta sẽ khám phá các phương pháp hay nhất để thực hiện điều đó.

Cách tạo hình ảnh thành liên kết

Tại sao nên chuyển một hình ảnh thành một liên kết?

Có hai lý do chính để tạo một hình ảnh thành một liên kết: để thu hút sự chú ý của người dùng và cung cấp một khu vực rộng hơn để người dùng nhấp hoặc nhấn vào.

1. Thu hút sự chú ý

Hình ảnh thu hút nhiều sự chú ý hơn văn bản. Đó là lý do tại sao các bài báo cung cấp hình ảnh về các sự kiện quan trọng, tại sao các cửa hàng ứng dụng sử dụng ảnh chụp màn hình và tại sao các trang web thương mại điện tử bao gồm hình ảnh sản phẩm cùng với mô tả.

Theo thống kê, các bài đăng trên mạng xã hội và bài đăng trên blog có hình ảnh thường xuyên có mức độ tương tác và chia sẻ cao hơn so với bài đăng không có hình ảnh và con người có nhiều khả năng lưu giữ thông tin hơn nếu được kết hợp với hình ảnh.

Tuy nhiên, đối với nhiều trang web, chính sự kết hợp của hai loại phương tiện này mới mang lại kết quả tốt nhất. Ví dụ quen thuộc nhất là trang sản phẩm bao gồm hình ảnh về mặt hàng đang được bán cùng với mô tả rõ ràng bao gồm các tính năng chính, thành phần cụ thể và giá cả.

2. Để tạo các khu vực có thể nhấp lớn hơn

Có một trường hợp sử dụng phổ biến khác ở đây kết hợp hình ảnh và văn bản: Mô tả danh mục bao gồm nhiều sản phẩm. Trong trường hợp này, thông tin được cung cấp là rất ít, khách truy cập thường thấy mô tả của mặt hàng cùng với giá và hình ảnh chất lượng cao. Sự kết hợp này được lặp đi lặp lại trên trang cho các sản phẩm khác trong cùng danh mục hoặc trong phạm vi giá tương tự.

Hãy xem xét một trang có nhiều sản phẩm mà mỗi sản phẩm chứa một liên kết văn bản dưới hình ảnh. Trong hầu hết các trường hợp, văn bản liên kết chiếm ít không gian hơn đáng kể so với hình ảnh, nghĩa là người dùng phải thực hiện nhiều thao tác hơn để nhấp vào nó.

Điều này đặc biệt khó khăn đối với người dùng truy cập các trang web không được tối ưu hóa trên thiết bị di động. Nếu hình ảnh và văn bản không có tỷ lệ chính xác, người dùng sẽ khó nhấn chính xác vào liên kết họ muốn.

Bằng cách tận dụng các liên kết hình ảnh, đảm bảo rằng cả hình ảnh và mô tả văn bản đều dẫn đến cùng một vị trí, do đó làm giảm khả năng "nhấp chuột nhầm" dẫn đến các trang không mong muốn và việc từ bỏ trang web khi người dùng cảm thấy thất vọng.

Cách chuyển hình ảnh thành liên kết bằng HTML

Bây giờ bạn đã hiểu những lợi ích của việc biến một hình ảnh thành một liên kết. Vậy làm thế nào để thực hiện được điều này? Hãy xem các bước dưới đây:

Bước 1: Chọn hình ảnh để tạo liên kết

Đầu tiên, tìm hình ảnh mà bạn muốn tạo liên kết. Nếu đó là hình ảnh của một sản phẩm thì thường nó sẽ có sẵn trên trang web của bạn.
Nếu không có ảnh, bạn có thể chụp và tải ảnh chất lượng cao lên hoặc sử dụng ảnh từ các website cung cấp ảnh như Freepik, Unplash, Shutterstock,... Tuy nhiên, khi sử dụng các hình ảnh đã có trên các website này, hãy đảm bảo trả tiền cho bản quyền hình ảnh hoặc sử dụng hình ảnh có sẵn không bản quyền.

Bước 2: Tối ưu hóa kích thước và tỷ lệ

Trước khi tải ảnh của bạn lên máy chủ lưu trữ web, bạn nên tối ưu hóa kích thước và tỷ lệ của ảnh. Kích thước tệp hình ảnh lớn hơn sẽ làm chậm thời gian tải và có thể không chia tỷ lệ chính xác. Bắt đầu bằng cách xem xét kích thước của bất kỳ hình ảnh hiện có nào trên trang web của bạn để biết các nguyên tắc về kích thước hình ảnh của bạn và nén hình ảnh nếu cần.

Sau khi tải hình ảnh lên, bạn có thể điều chỉnh chất lượng dựa trên kích thước tệp cuối cùng mà bạn muốn và chọn định dạng đầu ra. Thông thường định dạng JPEG là tốt nhất cho hình ảnh có nhiều chi tiết (như ảnh), trong khi PNG phù hợp hơn cho các biểu tượng, hình ảnh văn bản và đồ họa.

Lưu ý dù bạn nén ảnh với kích thước nào nhưng thông thường bạn cần phải giữ chất lượng trên 70% để tránh việc ảnh bị vỡ, mờ.

Bước 3: Tải lên hình ảnh và lấy URL

Tiếp theo, bạn cần tải hình ảnh của mình lên máy chủ web. Điều này có thể thông qua trình xây dựng trang web hoặc hệ thống quản lý nội dung của bạn. Hoặc có thể thông qua một trang web lưu trữ hình ảnh miễn phí như ImgBB .

Bất kể hình ảnh của bạn được lưu trữ như thế nào, nó phải được tải lên web để bạn có thể tạo URL vị trí của nó — nơi mà mã HTML của bạn sẽ “tìm kiếm” hình ảnh để hiển thị nó.

Giả sử bạn muốn nhúng nó dưới dạng một liên kết có thể nhấp vào một bài đăng blog bên ngoài. Bằng cách đó, người đọc nhấp vào hình ảnh sẽ được chuyển đến trang web thứ hai. Trong trường hợp đó, bạn có thể truy cập trang đích đó, nhấp chuột phải vào hình ảnh và chọn Sao chép địa chỉ hình ảnh .

Bước 4: Chỉ định URL đích

Tiếp theo, bạn cần một URL đích, URL này chỉ định nơi liên kết sẽ đưa người dùng đến khi họ nhấp vào hình ảnh của bạn, chẳng hạn như một sản phẩm cụ thể hoặc trang thanh toán trên trang web.

Bước 5: Tạo HTML

Bây giờ là lúc tạo mã HTML. Hãy xem đoạn HTML sau:

Các thẻ <a> và </a> đại diện cho một liên kết.
Phần tử neo (<a>) chứa thuộc tính href. Thay thế "ProductPageURL" bằng URL của trang mà bạn muốn mọi người được chuyển hướng đến khi họ nhấp vào hình ảnh.
Thẻ <img> đại diện cho một hình ảnh.
Phần tử hình ảnh <img> chứa thuộc tính nguồn. Thay thế "ImageURL" bằng URL hình ảnh của bạn.
Nó cũng chứa một thuộc tính alt. Thay thế văn bản giữ chỗ bằng văn bản thực tế mô tả hình ảnh.

Điều quan trọng nữa là phải điền vào mô tả văn bản thay thế, mô tả này sẽ hiển thị nếu không thể tải hình ảnh. Văn bản thay thế hình ảnh cũng có thể cải thiện SEO của bạn. Do đó, văn bản thay thế đơn giản và chính xác là một phần quan trọng của các liên kết hình ảnh HTML.

Bước 6: Dán mã của bạn nếu cần

Với mã HTML tùy chỉnh của bạn, giờ đây bạn có thể dán hình ảnh được liên kết của mình vào bất kỳ trang nào bạn có quyền truy cập quản trị viên và trang đó hỗ trợ HTML.

Nếu bạn đã thực hiện đúng các bước, kết quả sẽ là một hình ảnh có thể nhấp được đưa người dùng đến một URL đích.

Thêm liên kết vào ảnh của bạn là một cách hiệu quả để cải thiện khả năng truy cập của người dùng và đảm bảo họ có thể tìm thấy những gì họ cần khi họ truy cập trang web của bạn. Hy vọng bài viết này sẽ giúp bạn biết cách tạo một hình ảnh thành liên kết để cung cấp cho khách hàng những trải nghiệm tốt nhất.