ブログ開設1周年を記念した記事です。1年の振り返りや総括はせず、これまでの集大成と言える記事を書きます。
是非最後までご覧ください。
まずこれが100KBを下回る98KBに減らしたデッキ一覧画像です
【デッキコード】x4c8Da-zQK4ep-xKcc8Y
言われてみれば若干見にくくなった程度と思います
過去の記事を全て修正するのはできませんが、これから書く記事はこの記事の手順で減らした画像を上げます。
なぜ減らす必要があるのか
デッキ内容を紹介する時は公式のデッキ作成ツールのデッキ一覧画像を使っています。ですがこの画像の容量は600KB以上とかなり大きいです。
ページが表示されても、画像は少し待たないと表示されません。wifiでも初回読み込み時はこれなのでモバイル回線では致命的。画像の大きさを変えずに容量を減らす必要があります。
大きさをそのままに画質を落とし容量を減らすことを「圧縮」と言います。web上にあるツールで行えますが、今回のケースはそれだけではできません。次の2つが鍵になります。
これは盲点でした。JPG画像は今までも圧縮してから上げていましたが、フォトライフの設定をしてないためそれほど減っていません。
準備
ファイルの拡張子を表示する
PNGからJPGに変換するツール
JPG圧縮ツール
ツールはサイト上で行えるのでブックマーク(Ctrl+D)すればOKです。
ちなみにPNGを圧縮してもJPGほど減らないのと、アップロードすると元のサイズに戻ってしまいます。
はてなフォトライフの設定
はてなブログでアップロードした画像はここに保存されています。ここで画質を落とす設定をしないとサイズが減りません。
右上の設定をクリック
画質を67に変更し、「この内容に変更する」をクリック
これで準備ができました。それでは手順に移ります。ファイル名は名前を変えなければ「デッキコード.拡張子」で保存されます。
手順
1.デッキ一覧画像を名前を付けて保存
ファイル名: x4c8Da-zQK4ep-xKcc8Y.png
この時点ではPNG形式でサイズは607KB
冒頭の通り大きすぎます
2.PNGからJPGに変換
ファイル名: x4c8Da-zQK4ep-xKcc8Y.jpg
準備で用意したPNGからJPGに変換するツールにPNGの画像をアップロードし、JPGに変換された画像をダウンロード。
これで278KBになりました。
複数をまとめてダウンロードするとzipフォルダで保存されます。このままではアップロードができないので画像をzipフォルダ内からコピーまたは移動させてください。
3.JPG圧縮ツール
ファイル名: x4c8Da-zQK4ep-xKcc8Y-min.jpg
次に変換したJPG画像をJPG圧縮ツールにアップロードし、圧縮された画像をダウンロード。
これで156KBになりました。
これも複数だとzipフォルダなので先ほど同様に。
4.記事にアップロード
最後に記事に圧縮したJPG画像をアップロードします。
はてなフォトライフで画質を落とす設定をしたのでさらに減り98KBに。
JPG圧縮をしなかった場合(3.を飛ばす)
これでも130KBまで減らせます。
表とグラフ
| |
|
|---|---|
| PNG | 607 |
| JPGに変換 | 278 |
| 変換後圧縮 | 156 |
| 圧縮せずにアップ | 130 |
| 圧縮してアップ | 98 |
最後に
長らく課題になっていたデッキ一覧画像の重さをついに解決できました。他の画像も表示速度が落ちるくらいなら入れない方がいいと悩む心配がなくなりました。
1年間で80記事書いても相変わらずはてな読者0人と悲惨ですが、かと言ってやめるのかと言われればNO。
2年目に突入します
これからもよろしくお願いします。
アイキャッチは圧縮ということでXYのバトルコンプレッサー。エクストラの象徴とされるバトルサーチャーの強さを支えているカードです。
その後禁断の業(セルフ読者登録)で読者0人脱出しました
→1/25 取り消しました
