多媒体教程 - 在 Web 上使用图像

本文详细讲解在什么条件下使用图像和文本、如何加快图像的下载以及选择合适的图像格式。

何时使用图像

对于大多数图片来说,一张图片可能胜过千言万语。但还是要注意,没有人会注意那些饶舌的人。首先,也是最重要的一点,是要把文档的图形作为可视化工具,而不是将其作为无缘无故的装饰。它们应当支持文本的内容,并帮助读者在文档中导航。使用图像可以使文档内容更清晰,还可以为文档加注释或示例。支持内容的照片、图表、曲线图、地图和图画等都是很自然、很合适的选择项。例如,产品的照片对于在线目录和购物指南来说是非常关键的组成部分。还有具有链接功能的图标和印刷符号,包括具有动画效果的图像等,都可以是导向内容或者外部资源的非常有效的可视向导。如果某个图像对文档没有起到任何上述作用,那就应该把它丢到一边去!

在考虑向文档添加图像时,另一个重要的考虑因素,就是在通过网络,尤其是通过调制解调器连接传输这个文档时,检索方面所带来的时间延迟。一般的普通文档最多可以容纳 10-15 千字节,而一个图像可以轻易地达到数百千字节大小。而且一个文档的总下载时间不仅仅是它所有部分加起来的总和,还要考虑网络负载所带来的延迟。

根据连接的速度(也就是带宽,bandwidth、通常用 bps 或者 b/s 来表示)以及可能减缓连接速度的网络阻塞情况,要下载一个包含 100 KB 图像的单独文档,可能需要在凌晨一两点,当大多数人还在睡觉时,用一个 57.6 Kbps 的调制解调器连接花费大约 15 秒钟左右的时间来完成下载,也有可能在中午的时候用一个 9600 bps 的调制解调器花费超过 10 分钟的时间来下载。您得到这张图片了吗?

Tiyak na ang paggamit ng mga imahe at iba pang multimedia ay nagpapatuloy na humikayat sa mga tagapagbigay ng serbisyo ng internet na humikayat ng mas mabilis, mas mahusay, at mas matatag na paraan upang magbigay ng nilalaman ng Web. Sa lalong madaling panahon, ang koneksyon ng 56 Kbps na modem ay maaaring umalis sa kasaysayan, tulad ng isang kabayo at isang karitong kalesa (tulad ng 9600 bps na modem), at ito ay papalitan ng bagong teknolohiya tulad ng cable modem at ADSL. Sa katunayan, ang karamihan ng koneksyon ay mabilis lumampas sa 1Mbps na bilis.

Sa panahon na ang pagtaas ng halaga ng paggamit ng internet ay patuloy na dumami, ito ay nagbibigay ng problema ng pagkabahag. Kung ikaw ay nagtatangka na makapasok sa isang sobrang nagtatrabaho na server, kahit gaano kabilis ang iyong koneksyon ng internet, hindi mo makakapasok nang maayos.

Kung kailan gamitin ang teksto

Ang teksto ay hindi nagtatapos. Para sa ilang gumagamit, ang teksto ang nag-iisang bahagi ng kanilang dokumento na maaring abutin. Naminimungkahi, sa karamihan ng kaso, ang dokumento ay dapat maaaring abutin ng kahit sino, kasama na ang mga gumagamit na hindi makakabasa ng mga imahe, o ang gumagamit na pinagbawalan ang awtomatikong pagdownload ng mga imahe ng browser upang mapabuti ang pagganap ng koneksyon ng internet. Kahit na ang pangangailangan ng pagdagdag ng mga imahe sa dokumento ay lubos na malakas, may mga beses na ang pambatayan na dokumento ay mas mahalaga.

Ang mga dokumento na binabalik mula sa iba't ibang pormat sa web pahina ay kalimitang walang nakasangkot na mga imahe, at ang mga batasang pananaliksik at iba pang malalim na nilalaman ay kalimitang buong teksto na maaaring gamitin.

Sa panahon na ang bilis ng pagkakonekta ay lubos na mahalaga, dapat gumawa ng dokumentong pambatayan lamang. Kung alam mo na ang mga gumagamit ay lilitis para sa iyong dokumento, dapat iwasan ang paggamit ng mga imahe sa dokumento upang pagsunod sa pangangailangan ng mga gumagamit. Sa ilang kaso ng kagipitan, maaring magbigay ka ng isang homepage (paalamang pahina), upang hayaan ang mga gumagamit na magpili sa dalawang kopya ng iyong gawa: isang may mga imahe at isa na walang mga imahe (ang mga kilalang browser ay may espesyal na ikon ng imahe, na nagbibigay lugar para sa mga imahe na hindi pa nakita, at ang mga pustiso na ito ay maaaring magiging sanhi ng magulo sa pormat ng dokumento, kahit na ito ay magiging di-maari na basahin na bagay).

Kung nais mong na ang iyong dokumento ay madaling matagpuan ng maraming serbisyo ng pagsusuri sa Web, ang teksto ang pinakamagandang porma - lamang suporta ang mga imahe, hindi ang mga dekorasyon at hindi kinakailangang mga grafik. Subalit karaniwang hindi pinapansin ng mga tagasusuri ang mga imahe. Kung ang pangunahing nilalaman ng pahina ay pinagbibigay sa pamamagitan ng mga imahe, ang maliliit na impormasyon tungkol sa iyong dokumento sa online Web directory ay maaaring maliit na lamang.

Mapabilis ang pagdownload ng mga imahe

Maliban sa maingat na pagpili ng nilalaman na kailangang isama sa dokumento, mayroon din maraming paraan upang mapabuti ang problema ng lakas at pagkaantala na pinasasalamin ng mga imahe:

Panatilihin ang pagiging simple

Isang buong-layong 24-bit color graphic, kahit na pinababa ang sukat nito sa pamamagitan ng standard format na digital compression (tulad ng GIF o JPEG), ay nananakaw ng malaking bahagi ng network bandwidth. Kaya, pinakamahusay na gamitin ang iba't ibang tool sa pamamahala ng image upang mapabuti ang sukat ng image at mapababa ang bilang ng kulay sa pinakamaliit na bilang ng pixel. Ayusin ang iyong drawing, at huwag gamitin ang mga larawan ng scenerio, at iwasan ang malaking puwang sa likod ng image, at mga walang silbi na gilid at iba pang elemento na sumasakop ng puwang. Iwasan din ang paggamit ng effect na jaggie (na kumakalap ng dalawang malapit na kulay upang makakuha ng ikatlong kulay), na maaaring mapababa ang kompresibilidad ng image. Sa halip, subukan na gamitin ang malaking malamig na kulay, dahil madaling mapakompresihin ito sa pamamagitan ng format na GIF o JPEG.

I-reuse ang image

Ito ay lalo na ang magiging tapat sa mga icon at GIF animation. Ang karamihan ng browser ay magpapatuloy ng cache sa local storage ang mga binibigay na bahagi ng dokumento, upang maging mas mabilis ang pagkakakuha ng data at mas mababang paggamit ng koneksyon ng network. Para sa maliliit na GIF animation file, subukan na maghanda ng bawat sunud-sunod na image, upang ipabago lamang ang mga bahagi na nagbago sa animation, at hindi ng buong image (na maaaring pabilis din ang pagpapakita ng animation).

Hatiin ang malaking dokumento

Ito ay isang pangkalahatang prinsipyo sa paglalagay ng image. Maraming maliliit na bahagi ng dokumento ay inayos sa pamamagitan ng hyperlink (kaya nga ginagamit ito!) at mahusay na indeks, na mas madaling tanggapin ng mga gumagamit kaysa sa malaking bagay na dokumento. Karaniwang, mas nananatili ang mga tao sa pagbaling sa ilang pahina kaysa sa paghihintay ng pagdownload ng malaking dokumento (kaugnay ito ng 'television channel browsing syndrome'). Isang mahusay na karanasan ay mapanatili ang bawat dokumento sa sukat na humigit-kumulang 50 KB, upang ang mga mambabasa ay hindi magiging nakakapagod kahit na sila ay gumagamit ng pinakamahina na koneksyon.

Isegregate ang malaking graphic kapag kailangan

Magbigay ng isang link para sa malaking image, na maaaring maging isang thumbnail ng image, upang mapagpasyahan ng mga mambabasa kung gusto nilang mag-download ng buong image at kung kailan. At dahil ang ganitong uri ng image ay hindi magiging kasama sa iba pang elemento ng dokumento tulad ng inline image, madaling mapapansin at mapag-imbak sa local storage para sa paggamit sa hinaharap na pag-aaral.

Tatalaga ang sukat ng image

Sa wakas, isa pang paraan upang mapabuti ang pagganap ay ang isama ang taas at lapad ng image rectangle boundary sa label nito. Sa pamamagitan ng pagtatalaga ng mga ganitong sukat, mapapabayaan ang mga ekstra na hakbang, ang browser na mayroong malawak na paggamit ng feature ay hindi na kailangang gumawa ng ekstra hakbang na mag-download, mag-patunay at magkalkula ng sukat ng image sa dokumento. Gayunpaman, may isang masamang dako ang ganitong paraan. Kung ang gumagamit ay iwinasak ang pagdownload ng image na awtomatiko, ang browser ay magpapakita pa rin ng puwang na inihahanda para sa image sa tinukoy na sukat. Hindi naman kasing magiging masarap ang paraan na ito sa kabilang banda, kahit na wala pang solusyon sa problema na ito, pinagmumulan namin ng suporta sa mga propyedad na sukat, dahil pinagmumulan namin ng suporta sa anumang pag-iwas sa pagpabuti ng pagganap ng network.

JPEG 还是 GIF?

如果图像的来源或者你的工具软件更倾向于某一种格式,您可能只能使用 JPEG 或者 GIF 图像中的一种。现在,这两种格式都得到了浏览器的广泛支持,所以不会存在用户能否浏览的问题。

然而,我们还是建议您使用一定的工具去创建或者转换这两种格式,以充分利用它们各自的功能。例如,可以把 GIF 的透明特性应用在图标和小的装饰符号上。而利用 JPEG 来压缩那些较大的颜色丰富的图像,以加快下载速度。

<img> 标签

<img> 标签允许在文档的当前文档流中引用或者插入图形图像。如需了解更多有关该标签的详细信息,请参阅: