更新日:2023/09/02
(引用:TinyPNG – Compress WebP, PNG and JPEG images intelligently)
こんにちは！ 27歳サラリーマンのたろうです。 本業では製造業で新製品開発に携わっています。ブロガーには必須の記事の表示速度。ウェブサイトの読み込みファイルの中で、画像ファイルはかなりの割合を占めています😂
今回は無料の「TinyPNG」というサイトでの画像圧縮法を説明します🚀
(情報量を極力抑え、手順説明に特化した記事となっております)
📘こんな方にオススメ
✔️画像を圧縮したい、出来るだけ簡単に、早く理解したい方
TinyPNGの圧縮手順(iPhone向け)
★TinyPNG – Compress WebP, PNG and JPEG images intelligentlyにアクセス
(引用:TinyPNG – Compress WebP, PNG and JPEG images intelligently)上記の赤マルをクリックして画像を追加すると自動的に圧縮が始まります。
(引用:TinyPNG – Compress WebP, PNG and JPEG images intelligently)赤マルクリックにてダウンロード。
ダウンロードをクリック。
iPhoneの初期設定ではこちらに格納されております。
赤マルをクリックしてZIPファイル解凍→画像を保存。
TinyPNGの注意点
⚠️5MB以上の画像ファイルは圧縮不可
⚠️1度に20枚までしか圧縮できない
↑実はたまにできる時もありますが、理由はよくわかりません、、笑
TinyPNGの効果_圧縮度
★BEFORE
4.8MB
★AFTER
643KB
圧縮率=100-(0.643/4.8)×100=87%
見た目もほとんど変わりませんね✨
TinyPNGの効果_ブログ表示速度
PageSpeed Insightsにて計測
★BEFORE
★AFTER
表示速度が落ちてますね。
これには深い理由があります。
それは筆者がはてなブログだからです。
はてなブログではブログ記事を読み込む際に、はてなスターや読者登録等の付属のサービスも読み込む為、そちらに時間がかかります。
勘違いしないで欲しいのは画像を圧縮することで表示速度は確実に上がり、ブログとしては検索に強くなってます☺️
PageSpeed Insights等のサイトの指標で目に見えて表示速度を減らすには
・はてなスターボタンの削除
・アドセンス広告の削除
・ホームページ自体を簡易化
と言った抜本的な対策が必要です🖋
さいごに
簡単すぎる圧縮WEBツールTinyPNGを使って、どんどんサイトを軽くしていきましょう。どのブログでも表示速度がぐんと速くなれば、必ず良い記事になっていくことでしょう。本日は最後まで読んでいただき、ありがとうございました！
今後も皆様の役に立つ情報を発信できるよう精一杯頑張っていきますのでよろしくお願いします☺️
