WEBサイトを構成するHTMLの中に画像は頻繁に使用されています。
主に、ロゴ、写真、アイコン、バナーなど。
画像ファイルにはいくつかの形式があって、それぞれに特徴があります。
用途によって使い分けて、極力ファイルサイズを抑制する必要があります。
1,677万色を扱うことのできる圧縮形式。
※透過 = 上記の三角マークでいうと白い箇所が透けている
1,677万色を扱うことのできる圧縮形式。
また、画質のコントロールができ、画質を下げることによって画像サイズを下げることができる。
画像サイズを下げることによってWebサイトの読み込みスピードが早くなるメリットがあるが、画質を下げ過ぎると下の猫画像のように荒くなってしまうので、バランスを見て調整しよう。
↑ 画質100% 396.3KB
↑ 画質1% 19.7KB
256色しか扱えない形式
※ 最近はあまり使用しませんが、昔のWebサイトには使用されていることが多いので覚えておきましょう。
テキスト形式のベクター画像フォーマット(=ベクターデータ)の一種。
Retinaディスプレイなどで拡大してもボヤケず、スマホやタブレットのようなタッチデバイスとも相性が良い形式。
新しい形式かと思いきや、2001年9月に誕生していましたがIEで表示ができなかった為に、普及してこなかった歴史があります。
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="App_Store" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"> <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5640259,13.8623047 c-0.4133301,0.9155273-0.6115723,1.3251343-1.1437988,2.1346436c-0.7424927,1.1303711-1.7894897,2.5380249-3.086853,2.5500488 c-1.1524048,0.0109253-1.4483032-0.749939-3.0129395-0.741333c-1.5640259,0.008606-1.8909302,0.755127-3.0438843,0.7442017 c-1.296814-0.0120239-2.2891235-1.2833252-3.0321655-2.4136963c-2.0770874-3.1607666-2.2941895-6.8709106-1.0131836-8.8428955 c0.9106445-1.4013062,2.3466187-2.2217407,3.6970215-2.2217407c1.375,0,2.239502,0.7539673,3.3761597,0.7539673 c1.1028442,0,1.7749023-0.755127,3.3641357-0.755127c1.201416,0,2.4744263,0.6542969,3.3816528,1.7846069 C14.0778809,8.4837646,14.5608521,12.7279663,17.5640259,13.8623047z M12.4625244,3.8076782 c0.5775146-0.741333,1.0163574-1.7880859,0.8571167-2.857666c-0.9436035,0.0653076-2.0470581,0.6651611-2.6912842,1.4477539 C10.0437012,3.107605,9.56073,4.1605835,9.7486572,5.1849365C10.7787476,5.2164917,11.8443604,4.6011963,12.4625244,3.8076782z"/> </svg>
(と言っても、svgは仕組みが複雑なので、最初はjpgとpngを利用して授業をします)