PageTalks » image

Disable Image Resizing in Thickbox

Robin — Fri, 29 Aug 2008 09:00:22 +0000

Thickbox对图片的处理相当相当智能，其中就包括图片的缩放，也就是当图片实际大小超过窗口大小的时候，脚本会自动把图片缩放到适当大小显示，让图片不至于溢出。但这个带来一个比较麻烦的事情，由于是通过简单改变IMG标签的width和height属性达到的缩放会使图片产生许多粗糙边缘以及细节的丢失。于是大家开始寻找废掉这个“智能”的方法……汗~

源头在哪里？

打开thickbox.js，大家不难发现，图片Resize的代码就是如下这段：

var pagesize = tb_getPageSize();
var x = pagesize[0] - 150;
var y = pagesize[1] - 150;
var imageWidth = imgPreloader.width;
var imageHeight = imgPreloader.height;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
}
} else if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
}
}

很显然在这里就可以直接废掉它的机制，将以上代码替换为：

var imageWidth = imgPreloader.width;
var imageHeight = imgPreloader.height;

这样图片始终将以原始大小输出，如果浏览器没有特殊的自动缩放功能，那么图片将最终处于100%状态。

Thickbox is quite intelligent on handling the images, e.g, it aotomatically resizes the images if it’s too large for the thickbox containers. Unfortunately , this is often not the intent of our own…

Where is the root?

Simply open thickbox.js, it’s easy to find the resizing is driven by the code below:

var pagesize = tb_getPageSize();
var x = pagesize[0] - 150;
var y = pagesize[1] - 150;
var imageWidth = imgPreloader.width;
var imageHeight = imgPreloader.height;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
}
} else if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
}
}

If you just want to disble it for good, don’t hesitate to replace the code above with these:

var imageWidth = imgPreloader.width;
var imageHeight = imgPreloader.height;

Finnaly thickbox displays the image in original size. Cheers!

问题解决了？

别高兴的太早！毕竟人家写Resize的代码是有用处的——因为Thickbox的窗口即使溢出，其主窗口也不会产生滚动条。也就是说，就算图片超过了屏幕，用户也不能通过滚动条浏览到图片全貌。这不是得不偿失么？！慢慢来……慢慢来……
解决思路可以是如下的：
1、如果图片能够在当前窗口100%显示且不会造成益处，系统就没有必要Resize
2、图片太大无法在当前窗口以100%大小显示，需要Resize的时候，我们提供额外的全尺寸图片链接。
这是目前最直接也是最有效的方法了……

我们首先还是需要找到之前的那段关于Resize的代码，将其替换为如下：

var pagesize = tb_getPageSize();
var resized = false;
var x = pagesize[0] - 150;
var y = pagesize[1] - 150;
var imageWidth = imgPreloader.width;
var imageHeight = imgPreloader.height;
if (imageWidth > x) {
resized = true;
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
}
} else if (imageHeight > y) {
resized = true;
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
}
}

其实无非是加入了一个名称为resized的布尔值变量，作为是否Resized判断。

紧接着我们要加入源文件链接，找到如下代码：

$("#TB_window").append("" + ""+caption+"" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "
close or Esc Key
");

稍微分析一下，你会发现这是thickbox窗口生成显示图片的代码。替换成如下：

if(!resized){
$("#TB_window").append("" + ""+caption+"" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "
close or Esc Key");
} else {
$("#TB_window").append("" + ""+caption+" CLICK FOR ORIGINAL SIZE"+"" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "
close or Esc Key");
}

也就是如果之前resized变量为true，系统就会生成带有源文件链接的Thickbox窗口。至于链接样式，大家可以自己发挥……

事情就是这样，大家过上了幸福的生活……Orz~Thickbox的作者从此认识到自己Resize机制是多么不智能……

Problem Solved?

It seems it works all right. What if the image is large enough to overflow the thickbox? You know that’s why the sophisticated developer type these code in their project to enable resizing. Let’s think better:
1.If the image is fine with the thickbox, thus it won’t overflow. Well, resizing is not needed.
2.If the image is large, let the script resize the image. Besides, we insert a link to the original file.
Sounds like a plan?
Let’s find the resizing code again, and replace it with the code below:

var pagesize = tb_getPageSize();
var resized = false;
var x = pagesize[0] - 150;
var y = pagesize[1] - 150;
var imageWidth = imgPreloader.width;
var imageHeight = imgPreloader.height;
if (imageWidth > x) {
resized = true;
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
}
} else if (imageHeight > y) {
resized = true;
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
}
}

In fact, I only create a boolean varible “resized” to flag if resized.
Then we come back the thickbox.js, locate the code below:

$("#TB_window").append("" + ""+caption+"" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "
close or Esc Key
");

The code will control and create the elements in thickbox, you can modify as you wish. Here is mine:

if(!resized){
$("#TB_window").append("" + ""+caption+"" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "
close or Esc Key");
} else {
$("#TB_window").append("" + ""+caption+" CLICK FOR ORIGINAL SIZE"+"" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "
close or Esc Key");
}

Obviously clear that if “resized” is true, it will insert a link where you assign in the previous code. Otherwise, peace……

Well, the story ends……You can try your plan. This is only a demostration how we can better or custom the thickbox.

Pictures Are Not Simple

Robin — Fri, 29 Aug 2008 08:01:40 +0000

前几天看到Soulman在他的站上直接用PNG格式做的一幅大图作为Bannar，效果是可想而知的，我等了近半分钟，图片还为显示。网页窗口的很大一部分持续呈现空白，这不是设计师想要得到的。于是乎，有人开始思考，到底该如何将设计出来的作品有效的发布在网络上呢？在这里，图片文件格式的比较就很有必要了。
如今网络上流传着多种图片格式，例如BMP、JPG（JPGE）、PNG、GIF等。其中JPG和GIF最为广泛，PNG由于最近才得到IE7的正式支持，许多设计师对于这种格式在IE7之前都是比较谨慎的。

几种格式的理论分析

JPG格式: JPEG 图片以 24 位颜色存储单个光栅图像。JPEG 是与平台无关的格式，支持最高级别的压缩，不过，这种压缩是有损耗的。渐近式 JPEG 文件支持交错。
可以提高或降低 JPEG 文件压缩的级别。但是，文件大小是以图像质量为代价的。压缩比率可以高达 100:1。（JPEG 格式可在 10:1 到 20:1 的比率下轻松地压缩文件，而图片质量不会下降。）JPEG 压缩可以很好地处理写实摄影作品。但是，对于颜色较少、对比级别强烈、实心边框或纯色区域大的较简单的作品，JPEG 压缩无法提供理想的结果。有时，压缩比率会低到 5:1，严重损失了图片完整性。这一损失产生的原因是，JPEG 压缩方案可以很好地压缩类似的色调，但是 JPEG 压缩方案不能很好地处理亮度的强烈差异或处理纯色区域。
JPG格式的优点可想而知，它能够在不大量损失画质的情况下实现不同比率的压缩，再加上24位全彩的支持，使他成为目前照片储存的标准格式（在Very High模式下，其质量已经和RAW不分上下，但是体积上JPG有绝对优势）。对于网页设计师来说，当JPG文件以Progressive模式压缩时支持交错，这个特性使它能同GIF一样，有从模糊到清晰的显示过程。
JPG格式的致命伤也正是由于它的有损压缩，它的压缩损失是不可恢复的，而且当一幅JPG文件多次被修改，并再次保存时，它也就经历了多次质量损失，这个过程是积累性的。
GIF格式: GIF(Graphics Interchange Format)的原义是“图像互换格式”，是CompuServe公司在 1987年开发的图像文件格式。GIF文件的数据，是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在50％左右，它不属于任何应用程序。目前几乎所有相关软件都支持它，公共领域有大量的软件在使用GIF图像文件。GIF图像文件的数据是经过压缩的，而且是采用了可变长度等压缩算法。所以 GIF的图像深度从lbit到8bit，也即GIF最多支持256种色彩的图像。GIF格式的另一个特点是其在一个GIF文件中可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画。
众所周知，GIF主要分为两个版本，即GIF 89a和GIF 87a；前者支持多幅图片组成动态画面，这就是当今网络上流行的动画图片格式。尽管这种格式在网络上流传的很泛滥，它实际上是一种比较过时的格式，因为它仅支持256色，并通过抖动来“模拟”出更多色彩。网页设计师在早期使用GIF的理由大多是为了它的透明背景功能。
PNG格式: PNG是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。流式网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG’s Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。PNG使用从LZ77派生的无损数据压缩算法。
PNG格式的诞生和JPG与GIF密不可分，它就是为了弥补两个前辈的不足而诞生的。它同JPG一样支持压缩比率、Progressive模式压缩，与GIF一样有256色模式。还有诸多算法上的特性在此就不必指出，作为网页设计师，必须记得的是，PNG同时支持真彩色和16位Alpha通道。

三种格式在照片环境下的对决

选择的图片原件是未经处理的JPG文件，大小在经过25%缩放后为1.7MB。以下我选择了三种格式非常常用的设定来进行横向比较，下面那副图片以PNG格式保存，可以忽略质量的再次损失。

GIF设定：128位抖动，这是一个GIF中非常高的设定。
JPG设定：质量为High（60），这个设定不高不低，通常我压缩图片可能会用95的质量。
PNG设定：24位真彩，PNG的标准设定。

从上图可以看出，GIF格式图片和原图相比已经出现了颗粒感，影响了表现；JPG格式相当接近原画，虽然细节表现上有一定损失；PNG格式文件则通过肉眼无法直接辨别两者的区别。
质量上来看，PNG是毫悬念的冠军，但是文件大小上PNG竟然有964K，相比之下JPG格式的109K、GIF格式的211K是毫无优势可言的。大家如果注意GIF格式的大小和效果，你会发现GIF根本不适合作为照片文件的储存格式。也就是说，如果你的网页上面要讲色彩细节丰富的图片作为背景，那么GIF绝对不可以选，PNG格式则太臃肿，而JPG可以提供非常廉价的折中选择。

简单文件的比较

图片格式和相应参数和上次一样，这次我们来看看这三种格式对简单图案的细节的表现。大家一定会说，”这还用比？肯定是PNG>JPG>GIF“的结果么！”好吧，我们边走边瞧。

你必须得相信你的眼睛，在这种环境下，GIF、PNG与原版设计图片毫无区别，但JPG竟然出现了澡点！如果你仔细阅读了前文对JPG格式的描述，那你应该可以预测到这个结果。
再来看看文件大小，原文件PSD档680K，GIF格式文件15K、JPG格式文件38K，PNG格式文件44K。综合来看，GIF完胜PNG和JPG！希望你的下巴没掉到地上……

谈谈文件的选择

文章到此处，我们已经可以得出这样的结论：1、需要表现丰富色彩的细节，例如照片、CG之类可以选择JPG；2、当想插入简单图案，色调单一的图像（图案）可以选择GIF。
那么我们完全把PNG忽视了？
别忘了我们之前说过PNG文件的两大特点：无损压缩真彩色和16位Alpha通道！光一个“无损”压缩就可以让它成为众多图片处理软件的最佳保存格式，而它的16位Alpha通道则使网页的表达千变万化。你可能又要问，GIF也支持透明啊，我为什么要用PNG？
GIF的确支持透明，但有本事让他搞个半透明？看看下面这副图片。原图是在Photoshop中以较低的硬度用笔刷点下的一个点，相当于一个透明度延半径方向线性降低的一个圆。这其中当然就包括程度不同的透明度。结果很明显，GIF文件当插入白色背景的背景图片中时，无法体现出透明的层次，反而会用灰色来代替有透明度的像素；但PNG文件则不同，它体现出了透明的层次，并且和背景完美融合。

PNG的这种特性使它能够处理网页中的阴影、插入不同层次的背景图片等应用。再另一方面，目前在设计图标时，也多用PNG文件储存，为了这些图标（如各种表情图标）能够完美和背景融合，也直接插入PNG格式的文件(但如果你的浏览着大多数都在使用不支持PNG的Alpha通道的IE6，那么就只能用GIF将就，或者使用相应的Hack）。这便是发PNG在网页设计领域无可替代的应用。可以说，把它作为插入照片的首选格式并不是明智的选择，毕竟人们从有损压缩的JPG格式那里可以得到更快的速度。

剩下的最后一个问题是这图片格式质量参数如何选，这个只能根据原文件的质量通过不同质量参数表较而成。现在Photoshop之类的软件都可以提供“为网页优化”的选择，可以方便的进行设置。

未来图片格式的进化

PNG格式的进一步优化无疑是未来的一大亮点。其他方面，更多全新的图形格式也在不断涌现，其中SVG是最引人注目的一个。

SVG是一种矢量图形格式，SVG提供了GIF和JPEG所不能提供功能优势：

放大　用户可以任意放大图形显示，但不会牺牲锐利度、清晰度、细节等。

文字状态依然保留　文字在SVG图像中保留可编辑和可搜寻的状态。没有字体的限制，用户将会看到和他们制作时完全相同的画面。

小文件　平均来讲，SVG文件比那些JPEG和GIF格式的文件要小很多，因而下载也很快。

显示独立性　SVG图像在屏幕上总是边缘清晰，并且可以使用你打印机的分辨率进行打印。不论是300 dpi，600 dpi还是更高，你都不会体验到难看的锯齿的点阵效果。

超级颜色控制　SVG提供一个16百万颜色的调板，支持ICC颜色描述
文件，RGB，渐变和蒙版。

交互性和智能化　因为SVG是基于XML的，它提供无可匹敌的动态交互性。SVG图像可对用户的动作通过高光显示、工具技巧、特殊效果、声音和动画进行反应和显示。

虽然SVG的草案已经修订出来了，但是相应的软件支持还相当少，目前主流浏览器都不支持SVG。总之SVG能够带来更多的应用，可目前它离普及还有很远的一段路要走。