如何为Web保存图像:避免慢加载时间

分享这
Shellie Argeanton
分享

最糟糕的一件事就是让用户等待页面加载太久,然后就被删除了! 你已经失去了他们.

图像优化和页面速度 对你的谷歌排名至关重要,这对于优秀的手机用户体验也是必不可少的. 不要成为最后一个知道如何“保存图像到网络”的人-你可以用这个简单的技巧为你自己和你的客户节省大量的挫败和时间.

在下面的视频中, Aaron Nace向您展示了如何在Photoshop中工作时为web获得最佳质量的图像.

什么是页面权重?

Page weight is how large a webpage is in megabytes or gigabytes (size of all the combined files on the page); relevant to how long the page takes to load in browser.

“照片和视频仍然是网站中最主要的部分, 几乎占了它们大小的四分之三,”CNN财经频道的希望王

我如何知道我的图像是否被优化了?

它们可能看起来大小合适,因为它们适合你的网站模板,就像设计师告诉你的那样. 如果它们看起来又漂亮又脆, 有什么问题吗?

可能, you won’t know if your images are too big just by looking with the naked eye; you will have to investigate the file size and image settings.  您的站点很可能是以符合特定尺寸集的方式构建的.

能有个工作场所当然很好,但是 如果它加载缓慢,它可能会坏掉.

在短短3年时间里,网页平均增长了151%.

“这被谈论了很多, 但需要重复的是:图像是前端性能的最大障碍之一. 经常, 它们要么是格式错误,要么是没有压缩,要么是没有优化到渐进加载——或者以上都有.”  Tammy翻转,网络性能布道者

典型场景——一切似乎都很好

典型的情况是,十三水游戏检查了十三水游戏的站点,一切似乎都工作得很好. 如果您的页面加载非常慢,您会找到警报的理由.  这种典型场景的问题是,它并不典型——大多数网站所有者只在使用专用的高性能wifi网络时,在桌面电脑上查看他们的网站.

这种典型场景的问题是,它并不典型——大多数网站所有者只在使用专用的高性能wifi网络时,在桌面电脑上查看他们的网站.

考虑你的手机用户!

你必须考虑排队购买外卖的移动用户, 等公共汽车, 生活在农村地区, 或者使用公共图书馆的互联网连接.

首先考虑你的手机用户,因为有很多人使用他们的移动设备访问你的网站.

“几乎 三分之二的美国人现在拥有智能手机对许多人来说,这些设备是进入网络世界的关键入口.” 皮尤研究中心

Pingdom 有一个 很好的工具 测量站点的加载时间, 您可以看到导致页面权重升高的所有单个元素.

什么是网页优化图像?

这意味着你的图像设置应该表明你的图像分辨率是72, 设置为sRGB颜色空间, 并且为更快的页面加载减少了文件大小.

  • 决议 -大多数设备的显示设置为每英寸72像素, 确保你的图像尺寸与之匹配. 任何高于72的内容都是对空间和用户带宽的浪费.
  • sRGB - sRGB是世界上默认的颜色空间,应该总是用于web图像,以确保最好的颜色质量和一致性. 避免CMYK 因为这种模式只用于印刷材料.
  • 减少文件大小/优化 -浏览器不需要存储在相机图像中的多余信息. 镜头,模型等等),所以一定要去除肿胀!

从本质上说,十三水游戏希望在不影响照片最高质量的情况下缩小文件大小,以获得最佳的用户体验.

专业提示:你的页面排名可能与竞争对手相似, 但如果您的页面重量较大, 你的谷歌排名会更低.

在Photoshop中为Web保存图像

1. 打开Photoshop和你的图像文件.

2. 检查图像大小,确保它被设置为72dpi和颜色设置为sRGB模式. 很可能你的团队已经为你的网站的特定部分提供了高度和宽度尺寸. 仔细检查这些尺寸是否正确,并且是像素格式的.

3. From the file menu choose File > Export > Save for Web, 你将会看到下面的屏幕:

feature-saveforweb

在Save for Web窗口的左上角是一系列标签为Original的标签, 优化, 采用两页装和4. 通过点击这些选项卡, 您可以切换到您的原始照片的视图, 优化后的照片(使用Save for Web设置), 或者比较你的两个或四个版本的照片. 选择“2-Up”,将原照片与优化后的照片进行比较. 现在你将看到你的照片的并排拷贝.

选择“2-Up”,将原照片与优化后的照片进行比较. 现在你将看到你的照片的并排拷贝. 第二张照片是优化的照片检查,看它没有像素化.

4. 点击第二张照片. 从预设菜单中选择“JPEG High”. 现在,你可以将优化后的照片(最终将成为你的最终文件)与原始照片进行比较. 这取决于照片的质量, 您可以使用“JPEG介质”,但要再三确认你的照片没有像素化.

在上面的例子中,你可以看到 我把文件大小从2.62到126 k -这是一个巨大的区别,将极大地提高你网站的效率/加载时间.

Adobe的 伟大的视频教程 如果你想看看是怎么做的.

如果我没有Photoshop怎么办?

如果你不想花钱修图,你可以免费下载一些应用程序. 好消息是,ps图象处理软件对一个非常 负担得起的小(9美元.99)月费.

一些免费软件选项:

有许多其他的方法来优化你的网站,以更快的加载时间, 但是为了管理你自己的内容和图像, 缩小图像大小是一个很好的开始.

这将对你的客户的在线体验产生重大影响, 无论他们是在手机还是桌面, 排队买墨西哥卷饼, 或者在他们的办公桌上用专用的互联网浏览完整的网站.

十三水游戏有能力控制网站的性能——让十三水游戏努力实现这一点.

分享这

你有什么想法??

只要签字,你就同意了十三水游戏的 隐私政策.

评论(2)
  • 很丰富,谢谢!

  • 雪莉,我一直以为wordpress会帮我优化尺寸. 这不是一个安全的假设吗? 你知道一个事后处理照片的插件吗?

 
加入每两周接受网络营销建议的16000多人.

只要签字,你就同意了十三水游戏的 隐私政策.

分享这