はじめに
- サイト運用において、重い画像を載せてしまったが故に、サイトが重くなったりサーバ通信費の超過料金が発生してしまったため、画像は適切なサイズで運用する必要があります
- CDNを使用したとしても適切な画像サイズを設定する必要があります
- 備忘録として記載します
なぜ適切な画像サイズにしないといけないのか？
- パケット通信費用がユーザ・サービス提供側ともにかかってしまうため
- サイト表示速度に影響するため
- ユーザー離れに至ることもある
画像について
- 画像サイズが大きい（解像度が高い）ほど、通信速度が遅く、通信料金が高くなる
- 画像サイズが小さい（解像度が低い）ほど、通信速度が安く、通信料金が安くなる
対応策
画像サイズを調べる
- WEBサイトで調べる
- JavaScript
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript">
function check() {
var fileList = document.getElementById("sFiles").files;
var list = "";
for (var i = 0; i < fileList.length; i++) {
if (file = fileList[i]) {
img = new Image();
img.onload = function() {
alert("画像の表示サイズは、横 " + this.width + " ×縦 " + this.height + " です。");
};
}
img.src = (window.URL || window.webkitURL).createObjectURL(file);
list += fileList[i].name + " [" + fileList[i].size + " bytes]<br>";
}
document.getElementById("result").innerHTML = list;
}
</script>
</head>
<body>
<h1>選択されたファイルのファイルサイズを調べる</h1>
<form>
<input type="file" id="sFiles" multiple>
<input type="button" onclick="check()" value="ファイル名とサイズを表示">
</form>
<div id="result"></div>
</body>
</html>
- PHP
画像をダイエット（リサイズ）する
- WEBサイトを利用してリサイズする
-
Optimizilla
- -0%であればリサイズする必要なし
- 最大20枚まで一気に圧縮できる
- 圧縮前と圧縮後の比較ができる
-
Optimizilla
- オープンソースを利用してリサイズする
まとめ
- ユーザ・サービス提供側のパケット通信費用を考慮して、画像は適切なサイズで運用しましょう！