ちょっと曲がった家

家づくりとその後の庭づくりや日常生活の記録

ブログ画像の軽量化

先日の記事から、ブログの軽量化に取り組んでおります。。。

toniho.hatenablog.jp

知らなかったとはいえ、こんなに重い画像をベタベタ貼り付けた記事を読ませていたなんて…無知という罪は重いですね(涙)

ダイエットのイラスト

圧縮で画像が軽くなる

カメラで撮った写真データ(元データ.JPG)を、圧縮(写真なのでJPEGに変換)とリサイズ(サイズ縮小)してみた結果です。

元データ 圧縮後原寸

サイズ縮小 圧縮後_サイズ縮小

圧縮+サイズ縮小の合わせ技(圧縮後_サイズ縮小.jpg)で1.11MBが79.6KBにまで小さくなりました^^

私がしている画像の軽量化

圧縮した画像ファイルを新たに作り、それと置き換えるという地道な作業をしています。

1.画像を圧縮する

圧縮したい画像を適当なフォルダに集め、画像編集サイトで圧縮します。

画像の圧縮に利用しているサイト↓

iLoveIMG | 画像編集用オンラインツール

2.はてなフォトライフ経由でアップロード

はてなフォトライフ自体に圧縮機能があるので、そちらだけの利用でも良いのかもしれません(^^;

はてなフォトライフのアップロードを選択

はてなフォトライフのアップロード手順

ファイルを指定

はてなフォトライフのアップロード手順

3.圧縮済み画像ファイルと置き換え

はてなフォトライフで、アップロードした画像ファイルを選ぶ。

はてなフォトライフの画像選択

[ブログに貼り付ける]メニューを押すと、タグが表示されるのでコピーする。

はてなフォトライフの画像のタグ表示

はてなブログの記事編集の[HTML編集]画面を開き、参照先を書き換えます。
コピーしておいたタグを、置き換えたい画像のタグの下にペーストし、参照先(src=" … ")の部分と置き換える。

下の画像では、水色になっている文字列をオレンジの下線の文字列と置き換えます。

はてなブログの編集画面

置き換え完了後は、貼り付けたタグの行を消去すれば出来上がり。

圧縮やアップロードは、複数ファイルをまとめてできるんだけど、画像の置き換えは一つ一つやっています(疲)
もっと効率の良い方法があればいいんだけど…(;^ω^)

ヨソの画像も原因のうち

表示速度のチェックをしていて気づいたことが。。。

Page Speed Insightが測定している対象って、ブログ記事のテキストや画像だけでなく、リンクや広告も全部ひっくるめてなんですね(;^ω^)

Page Speed Insightの改善項目の画面

絶対うちのブログじゃない画像(見知らぬ男性3人の写真)が指摘を受けてて、なんでこんなのが入ってるんだろ?もしかして何か仕込まれてる??と不安だったんですが、ついさっき謎が解けました。。。

原因はコレ↓

はてなニュースの広告画像

はてなニュースの広告画像425KBナリ(-。-)y-゜゜゜
必死で圧縮してるのが急に馬鹿らしくなった瞬間でした(-_-;)
はてなニュースは広告に載せる画像を圧縮してないのかしらね…