このサイトについて

ブログに挿入する画像を綺麗なままサイズを軽くするの最適解を体現する方を見つけてしまった件

ライオンくん
ブログにあげる画像ってやっぱり綺麗なのがいいじゃん?
クマくん
そうだね
ライオンくん
でも綺麗だからってファイルサイズ思いとサイト重くなっちゃうじゃん?
クマくん
そうだね
ライオンくん
「綺麗+ファイルサイズ小さい」を完璧に実現してる人を見つけてしまったんだよね
クマくん
俺は「人」よりも「具体的な方法」を知りたいけどね笑
この記事の内容
ブログの画像を「綺麗」かつ「軽く」挿入してる人と具体的な方法について
この記事は3分で読めます

「ガジェットTouch!」を運営する「てんび〜」さん

ブログ:ガジェットTouch!
運営者:てんび〜さん

大学生発、ガジェットニュースを中心に、音楽や旅、モノ、タスク管理など人生を楽しくするTipsをあなたに届けるブログマガジン。

引用:ガジェットTouch!

堀口さんが運営しているYouTubeチャンネル「monograph」の動画で知りました。

おしゃれな部屋に住んでいる方だったので、どんなブログを運営しているのか気になってサイト訪問したのがてんび〜さんを知ったきっかけです。

サイトに挿入されている写真がどれも綺麗だったので

クマくん
こういう写真が綺麗な人のサイトって重いんだよなー

と思いながら、写真が綺麗な人のサイトでいつも癖でやる「画像のファイルサイズチェック」をした時に事件は起きました。

クマくん
は?????なんじゃこのファイルサイズは!?!?!

ガジェットTouch!

どれぐらい綺麗で軽いのか

具体的にどれぐらい綺麗で軽いのかというとこんな感じ

このクッソ綺麗な画像で60KB

意味がわからない

ちなみに他の記事の画像も片っ端から調べたけどどれも軽い

これは何かの間違いだ!と思い、てんび〜さんのサイトのページスピードを調べてみた。

ポイント
サイトスピード測るサイト:PageSpeed Insights 

ガジェットTouch!

モバイルスコア59 。あの写真の多さ。あの写真の綺麗さで。マジでありえない。

このスコアのすごさがピンときていな人のために我がブログのスコアと、同じく写真が綺麗なてんび〜さんの友人、堀口さんのmonographのスコアを見てみよう。

monograph

モバイルスコア23 。そうこれが普通なんです。写真が綺麗なサイトはだいたいこのぐらいのスコアになるものなんです。

これでてんび〜さんのサイトのすごさわかりましたか?

ちなみに我がサイトのスコアも見てみよう

ズボラブースト

クマくん
対して写真がきれいなわけでもないのにスコア低すぎて草

具体的な方法

あまりにも気になりすぎたんで、てんび〜さんに直接どんな手法を取っているのか聞いてみました。

てんび〜さんTwitterDMにて

  • 元の写真は1枚40MBほどです。(めちゃいいカメラで撮ってる)
  • Lightroomで現像する時に1600幅で現像します
  • さらにMacの圧縮ソフト(・ImageOptim ・JPEG Mini)で圧縮かけます
  • おしまい

さぞ社外秘のトップシークレットな手法で挿入していると思いきや、結構シンプルなものでした。

俺の方法との比較

  • iPhoneで撮影した写真(4032×3024 JPG 2MB)
  • Webサービスでリサイズ(ILOVEIMG)
  • Webサービスで圧縮(Optimizilla)

俺も一応リサイズや圧縮もかけてるんですが、どう考えてもあんな綺麗にならない。

比較するに

  • 元々の写真がいい
  • Lightroomの現像がめっちゃいい

あたりがこの差を生み出しているのかなと思われる。

まとめ

今回はブログの写真が綺麗で軽いてんび〜さんの紹介でした。

僕の理想のスタイルすぎるので、今後はてんび〜さんのブログのカメラ関連の記事を読み漁り、Lightroomを勉強し、全く同じ環境にしてやろうとおもいました。

おわり

ライオンくん

ファミマのトイレ戦法やめい
この記事のURLとタイトルをコピーする