How to Make a Picture Into a Link

图像吸引了注意力。您网站上的正确图像可以吸引客户兴趣，鼓励回访并增加成功销售转换的机会。但是，它们还可以通过充当关键内容，有趣信息或异地资源的链接来实现次要目的。bob体育苹果系统下载安装

But how do you make a picture into a link? In this post, we’ll explore potential reasons for image/link interconnection, best practices when linking an image, and offer a step-by-step guide for how to make a picture into a link using some simplehtml.

为什么要将图片纳入链接？

Image links serve two main purposes on a web page: to capture users' attention, and to provide a larger area for users to click or tap.

引起注意

图像总是比文本更引起更多的关注。这就是为什么新闻文bob官网官方网站章提供关键事件图片的原因，为什么应用商店使用屏幕截图以及为什么电子商务网站包括产品图像以及描述。

也有数据可以支持：据研究, social media posts and blog posts with frequent images see higher engagement and shares than posts without images, and humans are more likely to retain information if paired with visuals.随着网页设计的发展, images are here to stay.

这并不是说,文本是无关紧要的。虽然。Search engines are continuously crawling for context-aware text content on your website, and images are traditionally more difficult to analyze for site impact, making text-based descriptions of products or services essential foreffective SEO.

For many sites, however, it’s the combination of these two media types that delivers the best result. The most familiar example is a product page that includes an image of what’s being sold along with a clear description that includes key features, specific components, and pricing.

Larger Clickable Area

There’s another common use case here that combines images and text: Category descriptions that include multiple products. In this case, the information offered is minimal — visitors typically see the item’s description along with its price and a high-quality image. This combination is repeated over and over across the page for other products in the same category or in a similar price range.

这样的情况提供了最引人注目的论点，可以将图片纳入链接，因为它有助于简化客户互动。考虑一个包含多个产品的页面，每个产品都包含一个不足的文本链接。在大多数情况下，链接文本的占用空间要比图像少得多，这意味着用户必须做更多的工作才能单击它。

对于在移动设备上访问非优化网站的用户来说，这尤其具有挑战性。如果图像和文本无法正确扩展，则用户会发现很难准确点击他们想要的链接。

通过利用图像链接，站点所有者确保图像和文本描述都导致同一位置，从而降低了错误单击的机会，这些机会随着用户感到沮丧而导致意外的页面和站点放弃。

以Briogeo：每个产品列表都具有一个示例，其中包含一个大图，也可以用作指向产品页面的链接。

Image Source

How to Make a Picture Into a Link Using HTML

If you’ve decided to make a picture into a link, there’s an obvious next question: How?

Here’s our step-by-step guide to making a picture into a link using HTML:

步骤1：选择您的图像。

首先，找到要使用的图像。如果它是您网站上产品的图像，那么您很可能已经有几张图片 - 使用最清晰，最清晰的视图的图片。

If you don’t have a photo, you can either take and upload a high-quality photo or use an existing web image. When it comes to repurposing images already on the web, however, be sure to either pay for image rights or use license-free stock imagery.

Step 2: Optimize size and scale.

Before uploading your photo to your web hosting server, it’s worth optimizing size and scale. Larger image file sizes will slow down loading times and may not scale properly, so it’s worth looking at the size of any current images to inform new image size guidelines and scaling down your image with compression.

例如，在Hubspot博客上我们使用Squoosh, a free compression tool from Google. After uploading your image, you can adjust the quality based on what you want the final file size to be and choose the output format. Generally, the JPEG format is best for images with lots of detail (like photographs), while PNGs are better suited for icons, images of text, and graphics.

Image Source

Squoosh还可以直接将未压缩图像的质量与压缩图像的质量进行比较。从上面的示例中可以看到，我们的压缩照片可能不会那么清晰，但是如果图像链接在屏幕上足够小，则可能不会引起访问者的注意。

Ultimately, how much you want to compress your image is your call, but you'll typically avoid significant pixelation by keeping the quality above 70%.

Step 3: Upload your image and get the URL.

接下来，您需要将图像上传到Web服务器。这可能是content management systemor awebsite builder,喜欢CMS Hub, but regardless of how your image is hosted, it must be uploaded onto the web so you can create its location URL — the place your HTML code will “look” for your image to display it.

Step 4: Specify your destination URL.

Next, you need a destination URL, which specifies where your link will send users when they click on your image, such as a specific product or checkout page on your website. For our example, let's make the destination URL "https://www.hubspot.com/".

Step 5: Create your HTML.

Now it’s time to create your HTML code. Here’s the basic structure:

和标签表示链接的存在，而标签则引用您的特定图像。在上面的示例中，您的图像位置URL取代了“ ImageUrl”。

这也是一个好主意填写ALT文本描述, which can be read by screen readers used by visually-impaired users, and will also display if the image cannot be loaded. As a result, simple and accurate alt text is a critical part of HTML image links.

Step 6: Paste your code as needed.

With your customized HTML code, you can now paste your linked image onto any page you have admin access to and that supports HTML. If you’ve followed the steps correctly, the result should be a clickable image that takes users to a destination URL.

Sight Unseen: Image Linking Best Practices

Humans generally prefer the path of least resistance. It’s why we want faster internet, and why content algorithms are designed to give us the content we want, when we want it.

These low-effort expectations also apply to websites: Sites that are aesthetically pleasing, easy to navigate, and simple to understand have the best chance of capturing visitor interest and increasing the chance of sales conversion.

对于链接 - 图像，与此同时，人性提出了四个最佳实践：

Keep It Simple

链接和图像应在逻辑上连接 - 图像应告诉用户链接在单击之前将其带到哪里。

For example, if your image is a picture of a specific clothing item but the link takes users to the general category, potential customers may become frustrated. Consider instead using an image containing several clothing items to serve as a link to a category page.

在这里，链接 - 按时的规则很简单：您看到的就是得到的。

Offer a Backup Link

Classic text hyperlinks look somewhat outdated today, thanks to their garish blue color and underline.

The catch? Despite substantive improvements in HTML and other markup languages that make much more subtle and streamlined links possible, many users are conditioned to recognize the traditional blue link format immediately.

结果？值得为用户立即理解的任何图像链接提供熟悉的基于文本的备份。

Limit Your Links

向页面添加太多链接将拼写灾难，这是图像的两倍。并非每张图片都需要自己的链接，因为您网站上的所有内容并不需要链接到其他页面或资源。bob体育苹果系统下载安装

In this case, purpose is the priority: Before you make any image into a link, ask a simple question: Why? If there’s no compelling reason, don’t make the change.

Regularly Review

Last but not least: Regularly review your links to ensure they’re still relevant. For example, if product lineups or prices change, old links may be out of date and send users to pages that are no longer relevant or return 404 errors.

This applies to all your page links, not solely image links or text links. Regular review helps ensure links are always active and applicable.

没有丢失的链接

Adding links to your pictures is a great way to improve user access and ensure they can find what they need, when they need it on your website. The caveat? Make sure your links are consistent, concise, and regularly updated to reflect current content.

Editor's note: This post was originally published in December 2020 and has been updated for comprehensiveness.