UI.

自适应图像:解决响应图像问题

Dain Miller. 经过 Dain Miller.  |  7月31日2012年3月31日

响应设计ISN.’在这里和那里的布局或使用媒体查询的改变,它是一个明显的态度和一个明显含义的动作。

响应的设计本质上讲,我们更关心的内容而不是我们过去的内容。事实上,我们非常关心我们甚至会在避风港的设备上读取和查看读取的内容’t been launched yet.

从本质上讲,我们正试图尽可能清楚地呈现信息,并尽可能同时效率。这里’常见的误解;移动首先意味着设计好像整个站点围绕手机旋转。那不是’非常准确。手机首先是为了设计最简单的经验,这常常导致我们削减我们在未来经历或可能经历的开销。

在设计世界;快速决策;响应能力;我们需要首先保持警惕的创造性内容。在我们的响应式设计中有问题时,并保持警惕,并且如何解决。今天,我们正在做。

响应的图像现在已经是一个艰难的话题,因为通常存在多于一个‘hack-around’响应你的图像的方法。让’从地上完成这个主题,从我们曾经做过的开始。

 

过去

波士顿全球网站是液体设计的经典例子。

在我们进一步进一步之前,我们需要仔细阅读网页如何表现,所以我们可以讨论它是如何工作的。一个快速的rundown:顺序加载HTML,然后立即请求资源,然后立即执行脚本,然后将所有cookie一起发送HTTP请求。

请求/拉动/获取/等的过程。对我们可以获得这些方法的创造性有点限制。虽然,那肯定是’过去停止了人们。以下是他们的几种方式’遍布这一点。

更换“src” attribute

我们可以使用JavaScript重写“src”属性,以便它根据浏览器大小拉动并替换图像,这似乎可以正常工作。这是过去使用的很多人。此问题的问题是它使用双HTTP请求。首先它提取原始图像,然后用JavaScript替换它’D图像。如果你没有任何东西,你就基本上做得超过了你的工作。虽然它具有工作的外观。

有解决方法吗?确实有!

有很多人在网站上放置1px GIF图像而不是实际图像的方法,而不是取代两个图像的两者,基本上得到两个的价格–但这不是理想的。在这种情况下,您仍在进行两个HTTP请求。

这也意味着您依赖于所有图像的JavaScript。这是棘手的,因为移动运营商可以用JavaScript弄乱,任何数量的其他事情都可以破坏JavaScript,并且令人惊讶的网站用户故意禁用它。

题词

另一种获得了一些人气的方法是使用“noscript”用于移动图像的标记,然后使用JavaScript将其交换出更高的分辨率图像。这似乎通过风暴拍摄了社区,而由于能够从移动到高雷斯版本交换到高雷斯版本,并且真的恰逢广泛的误解‘mobile first’我提到上面。这在IE中不起作用。对于Internet Explorer解决方法,您需要写下列:

<script><!--mce:0--></script>
<img src=""mobile.jpg"" alt="" /> <!----->

但这是现在它的问题’在流行的Web浏览器Firefox中工作。所以我们要做的是:

<script><!--mce:1--></script>
    <noscript>
    <img src=""mobile.jpg"" alt="" />
    </noscript>

正如您所看到的,这不是很简单,这肯定不是很强大。真的没有办法干净或简单地完成。事实上,很多在响应图像中工作的人一直在尝试解决这些问题多年,而且真的没有太远。

通常,他们所做的是使用某种JavaScript来通过问题进行工作,并将双HTTP请求作为必要的邪恶。

服务器端解决方案?

典型的服务器端解决方案是为了使用JavaScript来替换“src” with the HTML5 “-data-highsrc”,并将浏览器大小存储在cookie中。但是,它然后以前发送相同的多个HTTP请求。

人们喜欢这种方法的原因是,他们觉得它们在饼干中存储浏览器大小的情况下,他们觉得错误的错误幅度较少。但实际上,这不准确。以下是这种方法与迄今为止所列其他方法不那么大的原因。它只允许提取大小图像,它不会处理设备方向的变化,并且由于现在浏览器预先获取图像,它不严重。还有一个大的回力是有时饼干aren’T设置足够快导致桌面获取用于移动手机的图像。

由于这一切,即服务器和客户端的合适选项失败,我们需要一个新的解决方案。

这是正确的 自适应图像 method steps in.

 

自适应图像方法

自适应图像是整个难题的真实解决方案。它实际上像拖放到您的服务器一样简单,并且您都完成了。此Adaptive方法使用一个htaccess文件,一个php文件和单行的javascript, 就是这样.

您只需将HTAccess和PHP文件拖到根目录中,并将JavaScript添加到索引文件的头部,并且您已完成。甚至没有别担心。现在,它确实提供了大约一定的定制,但我们将靠近尽头。

现在让我们’跳跃进入自适应方法的开始。

目标是

首先让我们确定项目的目标。自适应图像的创建者, 马修Wilcox.,已将这些解决方案确定为他的目标:

  • 必须容易设置和使用。
  • 必须尽可能低维护。
  • 必须使用现有内容,不需要标记编辑或自定义CMS。
  • 必须允许多个版本。
  • 必须使用设计断点而不是设备断点。
  • 当卓越的解决方案到达时,必须轻松更换。

这些项目的这些目标都依赖于假设

<img src=""#"" alt="" />

您网站中的标签已经使用了最高分辨率图像,这在我看来是合理的假设。通常,我们将在我们的网站上拥有最好的图像,因为我知道很少有网站设计师,这些人在手机版本和他们在网络上最糟糕的情况下放置了他们最好的图像。这也是非常自我解释的。

这个怎么运作

我们即将进入该代码,但在我们确实之前,让我们谈谈它如何在更高的水平上工作。简单地,JavaScript检测该设备上可用的最大屏幕尺寸,并将其存储在Cookie中。然后,.htaccess文件将某些请求点指向Adaptive-Image.php,然后基于这些规则PHP文件执行一些处理。在那里的处理是真正的魔法发生的地方,一切都意味着我’D推荐每个人阅读此检查查看PHP文件。这是我见过的最精美的PHP 。这绝对是一个必看的。

现在让步’s转移到删除这些文件如何工作的细节,并彼此相互交互。在这里,我们将讨论从Adaptive Images Site下载包时所获得的一切。

javascript.代码

您需要复制的JavaScript代码是这样:

<script>document.cookie='resolution=
'+Math.max(screen.width,screen.height)+'; path=/';</script>

必须在头部的任何其他JavaScript之前。值得注意的是,如果您想利用Retina显示任何最近的Apple产品,那么您可以使用以下JavaScript线:

<script>document.cookie='resolution=
'+Math.max(screen.width,screen.height)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/';</script>

正如您所看到的,最后一行非常相似,唯一的区别是它将向这些设备发送更高分辨率的图像,允许它 - 请注意,视网膜用户的下载速度较慢,但​​当然更好的图像。

请注意,这仍然需要成为头部部分中的第一个JavaScript。

.htaccess文件

一个.htaccess文件只是一个荣耀的目录管理实用程序,如果您已经使用了使用自适应图像的网站,那么您可能已经有一个.htaccess文件,因此我们需要做的是添加一些内容。只需打开它(它始终位于您网站的根目录中),然后添加以下内容:

<IfModule mod_rewrite.c>
  Options +FollowSymlinks
  RewriteEngine On

  # Adaptive-Images ----------------------------------------

  # Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:
  # RewriteCond %{REQUEST_URI} !some-directory
  # RewriteCond %{REQUEST_URI} !another-directory

  RewriteCond %{REQUEST_URI} !assets

  # Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
  # to adaptive-images.php so we can select appropriately sized versions
  RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

  # END Adaptive-Images ----------------------------------------
</IfModule>

现在,这是一个有趣的部分,你真的不是’T根本需要进行任何变化。

通常,网站将希望所有的图像都能响应,并且所有形式因素都很好,所以由于你真的不是’T需要排除任何东西。如果您确实想要或需要,那里有选择,但请记住您想要响应和渐进性。这里的.htaccess文件是这个项目的完美,并用作整个过程中的一个关键,所以没有它你真的可以’使用此方法。结果,你必须确保你不’忘记了这一点,或者如果你没有’t have one.

PHP文件

所有你必须用这个问题拖放到你的根目录中,它将照顾其他一切。您可以在此处查看以下可定制部分:

/* CONFIG ------------------------------ */

$resolutions = array(1382, 992, 768, 480); // the resolution break-points to use (screen widths, in pixels)
$cache_path = "ai-cache"; // where to store the generated re-sized images. Specify from your document root!
$jpg_quality = 80; // the quality of any generated JPGs on a scale of 0 to 100
$sharpen  = TRUE; // Shrinking images can blur details, perform a sharpen on re-scaled images?
$watch_cache = TRUE; // check that the adapted image isn't stale (ensures updated source images are re-cached)
$browser_cache = 60*60*24*7; // How long the BROWSER cache should last (seconds, minutes, hours, days. 7days by default)

/* END CONFIG ------ Don't edit anything after this line unless you know what you're doing -------------- */

正如它对脚本的其余部分所说,如果你不知道你正在做什么,那么为什么不只是留下它?如果你喜欢修补让我们’在这里只是脱掉一些光。

$决议案 是我们将使用的屏幕宽度。在默认情况下,它将存储一个重新大小的图像,用于大型屏幕,普通屏幕,平板电脑,手机和微小电话。

$ cache_path. 如果您不喜欢将缓存的图像写入该文件夹,则可以将其放在其他地方。刚将路径放在此处,请确保在服务器上创建它。

$ sharpen. 将在重新定义的图像上进行微妙的锐化。通常这很好,但如果您的服务器非常繁忙,您可能希望将其关闭。

$ watch_cache. 如果您的服务器变得非常忙,则可能有助于性能转变为false。但是,如果更改资源,则必须手动清除缓存目录。

既然你知道你可能很好奇的自定义,那么PHP文件的确切都是什么?好吧’逐步漫步:

  • 它读取cookie并拟合成符合CSS断点的断点
  • 它检查其自己的缓存目录以查看该断点大小是否存在所请求文件的版本。
  • 如果它确实,它会比较它的日期和原点,以确保缓存版本不陈旧。
  • 如果它不存在缓存;然后,当源图像大于断点大小时,它仅创建重新定义的图像。然后它缓存,以便将来使用。

ai-cookie.php文件

您还可以在文件夹中获取此“AI-cookie.php”文件,当您下载自适应图像包时,实际上可以将其删除,因为它必须使用备用方法来检测用户屏幕尺寸。自适应图像的创建者建议您删除此并使用标准方法。

然后’关于该包的内容。现在,确保您看看您在网站中突出的所有文件,并仔细检查您使用的是使用媒体查询的最佳实践。此外,如果您在谈论这类事物时,请务必提问如果您有此内容或媒体查询。现在让步’S总结了我们在这里的内容。

 

总之:

它肯定是一个迷人的系统,我预见到了多年来正在使用的系统。首先,我究竟可以用这个系统整体定制什么?

使用此系统,您可以:

  • 设置断点以匹配CSS。
  • 指定要缓存文件夹的位置。
  • 设置生成的JPG的质量。
  • 设置浏览器应该如何缓存图像。
  • 巧妙地锐化生成的图像。
  • 备用JavaScript以检测高DPI设备。

在未来,我也喜欢它在系统上检测带宽,而不是设备大小或浏览器宽度。因为这是决定发送什么图像的真正关键,但截至目前,没有可行的方式来做到这一点。

 

访问 Adaptive-Images.com 下载文件I’在本文中提到了。