如何最好地在线展示您的图像
已发表: 2013-12-18 无论您拥有什么样的网站,您的内容都可能是文本和图像的混合体。 对于摄影师、艺术家和其他创意人员来说,您网站上的图像可能是您内容中最重要的部分,因此了解如何正确呈现它们至关重要。
当然,您可以通过 WordPress 仪表板继续上传照片和图形而无需任何进一步的考虑,但如果您想确保您的网站快速加载、易于阅读并针对搜索引擎进行了优化,那么您最好阅读这篇文章在您的网站中使用图像时的最佳实践简短指南。
保存和上传图像
虽然 WordPress 可以直接从您的计算机上传大图像并自动显示它们以适合您博客的宽度,但我们不建议您上传未经处理的图像。
如果代码中有指示,任何 Web 浏览器都能够以比实际尺寸更小的尺寸显示图像,但这样做不会导致实际文件大小的减小。 以 50% 的全宽和全高显示的 500kb 图像仍将是 500kb。 不熟悉 HTML 和 WordPress 的博主可能会认为,因为他们的图片在屏幕上看起来不大,这意味着他们可以快速下载,但情况并非总是如此。
要检查您的图像大小,请右键单击或按住 Control 单击博客中的图像,然后从菜单中选择查看/打开图像(措辞会因您使用的浏览器而略有不同)。 如果打开的图片比您在博客上看到的大得多,这意味着您的图片尺寸不正确。
如果您有一个图片较多的博客,并且在上传图片之前没有调整图片大小,那么您的网页的组合大小可能会过大。
在上传图像之前,花几分钟调整和压缩图像是非常值得的。 这可以在 Photoshop 或您使用的任何其他图像编辑软件中轻松完成。 您还可以使用免费的在线工具,例如 PicMonkey 和 Dynamic Drive 的图像优化器。
手动调整图像大小可以让您完全控制压缩并大大减少上传时间,但如果您愿意,您也可以选择使用 WordPress 在每次上传时自动生成的调整大小的图像。 当您在帖子中插入图片时,您可以选择插入全尺寸、大尺寸、中尺寸或缩略图尺寸的图像。 您可以在设置 > 媒体中编辑这些尺寸以适合您的博客设计。 请注意,如果您选择此方法,任何人都可以从您的网站免费下载原始的全尺寸图像——这对于摄影师和插画家来说不是最佳选择!
图像优化和可用性
除了确保您的图像尺寸正确并针对页面加载时间进行了优化外,您还应该确保它们已针对 SEO(搜索引擎优化)进行了正确标记。 SEO 使搜索引擎更容易找到和索引您的网站,与未优化的网站相比,利用良好 SEO 技术的网站可能会在搜索引擎结果页面中出现更高的位置。
对 SEO 的全面讨论超出了本文的范围(无论如何,许多 WordPress 主题都是开箱即用的 SEO 友好型),但优化您的图像元信息是一种简单的方法,可以让您的现场 SEO 得到一点提升和可以帮助人们通过 Google 图片搜索和其他基于图片的搜索引擎找到您的网站。
正确标记图像对于可用性也很重要,尤其是在图像说明重要信息时。 在图像无法加载或无法看到的情况下(由于互联网连接缓慢、图像已关闭或视障用户),必须提供替代文本描述。
1. 文件名
首先,当您保存图像时,请确保它们具有描述性文件名。 将您的图像命名为 IMG_013445.jpg 或它们从相机中取出时的名称不会给搜索引擎任何关于它们所描绘的内容的线索。 使用用连字符分隔的适当描述性关键字,例如 children-playing-ocean.jpg

2.替代文字
当您通过媒体上传器上传图像时,WordPress 提供了几个文件描述字段。 虽然这些可以留空(许多博主这样做是为了节省时间),但您填写的字段越多,搜索引擎优化和可用性就越好。 其中最重要的是替代文本,是“替代文本”的缩写。
这是当图像关闭或由于其他原因无法显示时显示的文本,因此它应该作为图像的描述。 搜索引擎也会阅读此文本并使用它来决定页面的内容以及将您的网站放置在列表中的哪个位置。 例如,如果您是德克萨斯州的婚礼摄影师,您需要确保所有博客图片的替代文本都包含大量描述性文本,包括“婚礼摄影师”和“德克萨斯州婚礼摄影”等关键字。 尽管请注意,与您的博客文本一样,重要的是不要在图像描述中过多地填充关键字。
将相同的替代文本复制并粘贴到所有图像中以节省时间可能很诱人,但理想情况下,您的每个图像都应该具有正确描述它的唯一替代文本。
3. 图片标题
图片标题与替代文字相似,但用途略有不同。 标题不应提供图像的替代信息,而应提供附加信息。 图像标题是当您将鼠标悬停在图像上时出现在弹出框中的“工具提示”文本。 此文本对于可用性和 SEO 都很重要,并且应提供有关图像或其链接位置的快速相关信息。
图片标题应该与替代文本略有不同,并且每张图片都应该是唯一的。
4. 图片说明
标题是通常显示在图像下方并提供附加说明或支持性文本的文本。 使用标题是可选的,但如果您使用来自其他站点的图像,它们可以方便地提供有关您的图像的其他信息或引用来源。 将标题想象成艺术画廊展览中的信息标签。
图像链接
默认情况下,当您将图像插入页面或帖子时,WordPress 会将其链接到仅包含图像的新页面。 这没有真正的原因,甚至可能对您的网站在 SEO 方面造成损害。
这也可能是一个很大的可用性问题——如果用户将鼠标悬停在你的图像上并看到它是一个链接,他很可能会认为它链接到一个包含有用信息的页面。 点击这些只有图片的页面对访问者来说是浪费时间,甚至可能导致您失去访问者。
要解决此问题,只需在 WordPress 中上传图片时选择“无”作为“链接 URL”字段,除非您确实想将其链接到特定页面。 如果这样做,请确保使用图像标题或说明来指示图像链接到的位置。
图像放置
除了确保您的图像针对 SEO 和用户友好性进行了优化外,考虑到它们如何与您的文本相适应也很重要,因为它们具有美学和可读性的原因。
您可能更喜欢使用内联图像(比主列小,因此文本环绕它们)、全角图像或两者的组合。 您应该避免使用非全宽的独立图像,或一系列不同宽度的图像,因为这看起来不专业且没有吸引力。
为此,您应该确保纵向图像与横向图像的宽度相同。 注意图像的高度——如果它们太高,它们可能会在较小分辨率的屏幕上溢出。 这将导致用户必须滚动才能看到完整的图像,应该避免这种情况。 如果您的图像太大而无法以纵向格式显示为全宽,您可以并排制作两个或多个纵向图像的拼贴。
内嵌图像可以为您的内容提供一些多样性,并有助于分解大量文本。 对于不适合全宽显示的较小或较窄的图像,它们也是一个不错的选择。
当您使用内联图像时,最好再次确定设置的宽度以保持视觉一致性。 这应该不超过文本列宽度的一半,因为比这更宽的图像会过度压缩文本并使其难以阅读。
内联图像应始终与文本的右侧而不是左侧对齐,以免破坏左边距并降低可读性。
用图片美化你的博客
使用图像对于创建一个有趣且具有视觉吸引力的博客很重要,而在营销您的创意业务时,它们甚至更为重要。
遵循我们在本文中介绍的技巧,以获得经过良好优化、呈现良好的图像,您的网站不仅看起来很漂亮,而且加载速度也很快,阅读起来很愉快,并且对搜索引擎更具吸引力。 出版愉快!