TinyPngの使い方や説明に入る前に一つ前置き。
Webサイト制作に浸かっている私ですが、最近、サイトの表示速度の重要性に駆られています。
と、いうのも、http（サイトを表示する為に共通のルール）から、https（『s』はセキュアで暗号化状態の意）が一般化しています。
加えて、httpよりhttpsの方がSEO上では有利に働いている傾向があるので、今後、制作するサイトはそうせざる得ない。
しかし現段階はsの場合は、表示速度が普通にやると遅くなるわけです。
表示速度を早くするためには色々と考えて、サイトに様々な施工を施さなければならないのですが、何気に画像は表示速度に大きく影響を与えています。
以前は画像に関しては、あまり意識していなかったのですが、今日はそんなことを中心につづってみます。
TinyPngが凄い
Web制作者の中で、いち早くサイトの表示速度を意識していた方々ならば、既に知っていると思います。
ちょっとここで、例を。
この画像はJPEGファイル。
適当にi phoneで撮影したもので、これを直接、サイトに送り込んで使用する。
まあ、こんなことは誰でもやってますよね。
ですが、この画像、2MBも容量があったりするわけです。
大きな容量を逐一、表示させるというのは、かなりサーバーなどに影響を及ぼすのは明白。
そして、この画像も同じJPEGファイル。
一見、前の画像と、ほぼ変わらないわけですが、容量は386KBなんです。
前画像と見た目変わらないのに、容量は約・五分の一という状態。
当然、後者の方が都合がいいわけですね～。
画像一枚一枚はそれほど大きな容量ではないのですが、これが何百枚、何千枚って溜まっていくと、恐ろしい重さになるのは間違いないでしょう。
TinyPngの使い方
画質を出来るだけ損ねることなく、容量を減らすことを『圧縮』と言います。
こうした圧縮は出来るだけやっておいた方がいいってことです。
そんな圧縮を簡単に出来るサイトというのが
と、いうサイトです。
アクセスすると、こんな画面になるのですが点線で囲まれてる部分に、圧縮させたい画像をドラック＆ドロップする圧縮が始まります。
圧縮が終わったら、ダウンロードってボタンが表示されるので、それをクリックしてやると、PC上に圧縮ファイルでダウンロードされる。
その中に圧縮済みのファイルがあるって具合です。
TinyPngという名前なので、Pngファイルの圧縮しか出来ないのか？といえば、そうではなく、JPEGファイルにも対応しています。
[sp]
[ad#co-1]
[/sp]
TinyPngのススメ
実はワードプレスなどでブログ制作しているならば、TinyPngが出しているプラグインもあったりします。
ですが、私はあまりワードプレスサイトにて、プラグインを実装することは負荷がかかりすぎるので好ましいと思っていません。
なので、プラグインはインストールしていない。
サイトに画像を使う場合は、TinyPngで圧縮してからアップロードして使うという習慣をもっているといいと思いました。
私も今後はそうするつもり。
一回の作業なんかは一分もかからないので、習慣づきやすいと思いますしねぇ。
それにTinyPngのサイトツールを使うこと自体は無料ですしね。
ちなみにプラグインの方は、月に500枚以上の画像を圧縮するには、それ以降は有料であるそうです。
TinyPngの凄さに気づいて改めて思ったこと・・・
ところでこれに気づいてからというもの、現在、収益が出ているWebサイトなどに浸かっている画像などに全部、これらの施工をするとなると、恐ろしい程の重労働になるわけです。
まあ、幸いなことに収益が出ているWebサイトはサイトの表示速度自体は、PageSpeedInsightでは及第点なので放置していてもいいと感じています。
ですが、出来ることならサイトを育てていくにあたって、最初からこういうことにも気を配っていたら、もっとWebサイトは強くなっていただろうなと感じるわけで。
このWeblog『たった一人の魔道』はSEO気にしていないのですが、まだ100記事ちょいのサイトなので、こうした点も見直していこうかと思っていますよ。
つくづく、思うことは、やっぱり最初って肝心だよね・・・ってことです(^_^;)
自分の周りの物や創造していくモノの全ては軽量化が望まれる。 重いことは『悪』であるという位の認識でいた方がいいのかも知れません。
最後まで読んでくださって
ありがとうございます。
感謝しております。
Everything is going well!!
全てはうまく行きます。
それでは、またね＾＾
