website

ウェブサイトの表示速度向上に役立つ画像圧縮サービスならここ

ピクチャ 1

ウェブサイトの表示速度はユーザーの満足度に大きな影響を及ぼす。
Googleは、読み込み速度0.5秒遅くなると検索数が20%減少するというデータ、amazonは読み込みが0.1秒遅くなると売上が1%減少するというデータをそれぞれ出しており、Googleは表示速度の遅いサイトは検索の順位にとってマイナス評価となることをコメントしている。

そんな中で、画像のサイズを減らすことは簡単な表示速度向上の対策方法といえるだろう。

SEOにも繋がるウェブサイトの表示速度向上に役立つ画像圧縮ウェブサービスを提供しているサイトを紹介。

Compress PNG Images Online
http://compresspng.com/

方法は簡単。

ピクチャ 4

1. SELECT FILESをクリックして手元にあるファイルを選択
2. UPLOAD QUEUEをクリックしてファイルをアップロード
3. 元画像と圧縮後のファイルのプレビューが表示されるから、右にあるスライダーを動かし、画質を確認しながら最適な圧縮率を選択する
+ボタンで画像を拡大して、気になる部分を確認するのがポイント
4. COMPRESSをクリックすると圧縮されたファイルがダウンロードされる

ダウンロードファイルには元画像名に_minが付いているが、HTMLを修正するのが面倒なら、元画像は_org等にリネームして、元画像名で置き換えてしまうといい。
ただし、同名の場合しばらくブラウザがキャッシュを読むこともある。

favicon.icoやapple-touch-icon.pngを作りたい時のベストな方法

ウェブサイトを作ったら必ずやっておきたのが、ファビコンの作成。
そして、スマートフォンでホームに保存する際に使われるapple-touch-icon。

解像度に合わせて複数のサイズの画像をアップするのがベストだが、Photoshopで作るにしても手間がかかることは確か。
そんな時は、画像をアップすると自動的にファビコンやapple-touch-iconを生成してくれるFavicon Generatorのサービスを利用するといい。

Googleで検索すると様々なサービスが存在するが、お薦めはこのサイト。

Multi Favicon Generator
http://favicon.miugle.info/ ピクチャ 3Multi Favicon Generatorなら、1枚のアイコン画像からfaviconはもちろんiPhone&Android向けの各種apple-touch-iconも一気に生成してくれる。

使い方も簡単。
512ピクセル×512ピクセルの画像を用意したら、サイトにアクセスしてアップ。
各種画像データが含まれる圧縮ファイルのが作成されるので、自分のPCにダウンロード。
圧縮ファイルを解凍すると以下のファイルがある。

apple-touch-icon-57×57.png
touch-icon-iphone-retina.png
apple-touch-icon-72×72.png
apple-touch-icon-114×114.png
apple-touch-icon-144×144.png
favicon_sample.txt
favicon.ico
touch-icon-ipad-retina.png
touch-icon-ipad.png

favicon_sample.txt以外のファイルをサイトのルート(index.htmlやindex.phpがある階層)にアップ。
faviconやapple-touch-iconの設定は、inex.html等をエディタで開きfavicon_sample.txtの中身を追加。

具体的には、スタイルシートを呼び出している場所

<link rel="stylesheet" href="style.css" />

やtitleタグの場所

<title>○○のホームページ</title>

の前後に

<link rel="apple-touch-icon" sizes="152x152" href="/touch-icon-ipad-retina.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="120x120" href="/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="76x76" href="/touch-icon-ipad.png">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="shortcut" href="/favicon.ico" type="image/x-icon">

を追加する。