メールでのお問い合わせはこちら、お問い合わせフォーム

2017年9月のスタッフブログ

1

SEOについては様々なテクニックがあるのですが、そのうちの一つに「ページのサイズを小さくする」というものがあります。

別にgoogle先生が表示時間を計測して評価をうんぬんという話ではなく(それもないとは言い切れませんが)、ページの直帰率・滞在時間など「人間の反応」が変わってきて、それがSEO効果の違いとなって現れるのです。

以前と違い、外にいてスマホでサイトを見る人も増えていますから、光回線や高速WiFiが当たり前と思っていてはいけません。

soto.jpg

では、どうするとページのサイズが小さくなるのか。

文章を減らす...では意味がありませんね。
そもそもページ容量の大半は画像が占めています。
ですので、画像を「軽く」する事がサイズの縮小に繋がります。

ここで「軽く」と書いたのは、小さくすると言っても「画像の面積を減らすという話ではない」という事を明確にするためです。

使う画像がどんな画像かに合わせて形式(jpg/png/gif)を使い分けるのは原則ですので、今回は省略します。

今回は、PNG画像に焦点を当ててみます。

PNGを使う場合、漫然と使うと32bitになってしまい、結構なサイズになりかねません。

24bitPNGが使えるツールをお使いであれば、透過が不要な画像は24bitPNGにするとよいでしょう。

逆にいえばアルファチャンネルの透過が必要なら32bitという話なのですが...この常識が変わるかもしれません。

実は、PNG画像を圧縮してくれるwebサービスがあったりします。

オンラインイメージ最適化ツールOptimizilla
http://optimizilla.com/ja/

早速試してみましょう。

以前waifu2xを試した時と異なり、今回は画像処理に関心のある方々が見ても残念な気分にならない画像があるので、そちらで試しましょう。

元画像 234KB
400.png

圧縮画像 68.2KB
400-min.png

実にー71%。大きく縮みました。
画質も違いがほとんど判りません。

...と、書くと、
「それ、単に8bit化してるだけじゃね?縮んで当然。無知乙」
とか言われそうですね。

では、某高額画像処理スイートにて出力させた画像と比べてみましょう。

アルファチャンネルありの8bitPNGで書き出してみました。

某出力画像 61.6KB
400_r1_c1.png

サイズはこちらのほうが小さいようですが、画質はOptimizillaと比べると...。

まぁ上に示したように某高額画像処理スイートの8bit出力結果が残念なため、上では「透過が必要なら32bit」と書いたのですが、Optimizillaではフリーでこの8bit化性能です。

この場で取り上げたくなったのも判っていただけるかと思います。

当然の事ながら、元々8bit256色の場合、あまり差は出ないようです。

waifu2xの時に使ったオッサン画像に再登場して頂きましょう。

元画像 14.5KB
moto256.png

この場合、圧縮画像のサイズは 12.6KB でした。
わざわざ処理するまでもない僅差ですね。

画質は元が8bitですから、違いは人間には分からないレベルなので、圧縮画像の表示は省略しました。


同様のサービスとしてTinyPNGというものもあります。

TinyPNG
https://tinypng.com/

こちらは英語のサイトなので細かいところは分かりませんが、同様の技術を使っているようです。

やはりこちらも無料。
ついでにアニメーションPNGにも対応しているようです。


昔はインデックスカラーを使った透過GIFをよく使ったものですが、境目がくっきりしずぎるので、最近は見なくなっていました。
でも、再び8bit画像の時代が来るのかもしれませんね。

1