昔のことなんざキングザブーン

以前は雷と超が多めで水はあまり使っていませんでした

デッキ一覧画像のサイズ(容量)を600KBから100KBに削減しました

ブログ開設1周年を記念した記事です。1年の振り返りや総括はせず、これまでの集大成と言える記事を書きます。

是非最後までご覧ください。

まずこれが100KBを下回る98KBに減らしたデッキ一覧画像です

【デッキコード】x4c8Da-zQK4ep-xKcc8Y

変換→圧縮 98KB

言われてみれば若干見にくくなった程度と思います

過去の記事を全て修正するのはできませんが、これから書く記事はこの記事の手順で減らした画像を上げます。

なぜ減らす必要があるのか

デッキ内容を紹介する時は公式のデッキ作成ツールのデッキ一覧画像を使っています。ですがこの画像の容量は600KB以上とかなり大きいです。

ページが表示されても、画像は少し待たないと表示されません。wifiでも初回読み込み時はこれなのでモバイル回線では致命的。画像の大きさを変えずに容量を減らす必要があります。

大きさをそのままに画質を落とし容量を減らすことを「圧縮」と言います。web上にあるツールで行えますが、今回のケースはそれだけではできません。次の2つが鍵になります。

  1. 画像の保存形式をPNGからJPGに変換する
  2. はてなフォトライフの設定をする

これは盲点でした。JPG画像は今までも圧縮してから上げていましたが、フォトライフの設定をしてないためそれほど減っていません。

準備

ファイルの拡張子を表示する

拡張子表示

PNGからJPGに変換するツール

www.iloveimg.com

JPG圧縮ツール

compressjpeg.com

ツールはサイト上で行えるのでブックマーク(Ctrl+D)すればOKです。

ちなみにPNGを圧縮してもJPGほど減らないのと、アップロードすると元のサイズに戻ってしまいます。

はてなフォトライフの設定

はてなブログでアップロードした画像はここに保存されています。ここで画質を落とす設定をしないとサイズが減りません。

f.hatena.ne.jp

右上の設定をクリック

設定

画質を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まで減らせます。

変換のみ 130KB

表とグラフ

内容
サイズ(KB)
PNG 607
JPGに変換 278
変換後圧縮 156
圧縮せずにアップ 130
圧縮してアップ 98

グラフ

最後に

長らく課題になっていたデッキ一覧画像の重さをついに解決できました。他の画像も表示速度が落ちるくらいなら入れない方がいいと悩む心配がなくなりました。

間違いおよび質問等ありましたら@yoshinanipokecaへどうぞ。はてなユーザーはコメント欄も可です。

1年間で80記事書いても相変わらずはてな読者0人と悲惨ですが、かと言ってやめるのかと言われればNO。

2年目に突入します

これからもよろしくお願いします。

アイキャッチは圧縮ということでXYのバトルコンプレッサー。エクストラの象徴とされるバトルサーチャーの強さを支えているカードです。

バトルコンプレッサー

その後禁断の業(セルフ読者登録)で読者0人脱出しました
→1/25 取り消しました