タグ #web-imaging
「web-imaging」タグの記事一覧です。
透過=即PNGはもう古い。写真っぽい透過PNGを劇的に軽量化する無料ツールと3つのテクニック
透過が必要ならPNG、という判断はもう古いという話です。写真のような透過画像を劇的に軽くする3つの手法と、無料で試せるツールを紹介します。
「画像できるだけ軽くして！」曖昧な指示はもうやめよう・具体的な基準のために統計的に考える画像の軽さ
「画像をできるだけ軽くして」という曖昧な指示をやめるための基準を提案します。日本の上位500サイト約70万画像を調べ、100×100ピクセルあたりの重さで測る方法です。
検証 Web画像のファイルサイズは画素数にほぼ比例する
Web画像のファイルサイズは画素数にほぼ比例するのか、JPEGとPNGで検証しました。同じ内容・同じ品質という前提で、実際にどこまで比例するのかを確かめます。
【事例】美容整形外科のサイトで画像軽量化したら表示速度が速くなりました
「銀座マイアミ美容外科」様の事例です。表示が遅い原因を切り分けたうえで画像軽量化とWebP対応を実施し、表示速度がどう変わったかを報告します。
CloudFront料金早見表を作ってみた。月額10万円超えは何PVから？
CloudFront の料金早見表を作りました。1ページあたりのデータ量とPV数から月額がわかります。月10万円を超えるのは何PVからか、削減にはどこが効くかを示します。
通販サイト上位300のスマホトップは平均4.15MB、画質を落とさず41%削減できる
通販上位300サイトのスマホトップページを調べたところ、画像だけで平均4.15MBありました。画質を落とさず41%削減できるという試算と、個別レポートを公開します。
新人にもわかる！WebPのブラウザ振り分けの仕組みを図解。picture要素と.htaccessのどっちでやるべき？
WebP 対応・非対応のブラウザに画像を振り分ける仕組みを図解します。picture 要素とWebサーバー設定のどちらを使うべきか、理由がなければサーバー側を勧めます。
Webの表示高速化はファーストビューが早くなればそれでOK！ 課題を整理して着実に進めるためのポイント
表示高速化を進めるとき、施策は「サーバーの応答」「ダウンロード量」「読み込みの優先順位」の3つに分けると整理できます。どこから着手すべきかの判断材料を示します。
画像軽量化の可能性を無料レポート！ LightFile/WebPシミュレーター v3をリリース
画像をどこまで軽くできるかを無料でレポートする LightFile/WebP シミュレーター v3 を公開しました。削減後の画質をスライダーや差分で確かめられます。
WebPに関する10の誤解~5分で正しく理解するWebP
WebP について誤解されがちな10項目を、正しい内容と並べて説明します。読み方、ライセンス、対応ブラウザ、SEOとの関係など、5分で全体像がつかめます。
PNGファイルを軽量化する方法は4種類だけ。減色・ロスレス最適化・メタデータ削除・解像度の最適化
PNGを軽くする方法は、減色・ロスレス圧縮・メタデータ削除・解像度の最適化の4種類しかありません。それぞれ何をしていて、どれだけ効くのかを説明します。
サイトのWebP対応は気楽にやろう！ 心が軽くなる4つの事実
サイトの WebP 対応は気楽に始めて大丈夫だ、という4つの理由を挙げます。一気にやらなくてよく、既存のデータを壊さず、困ったらすぐ元に戻せます。
画像フォーマットのチートシート日本語版を公開しました
画像フォーマットの特徴が1枚でわかるチートシート「SMUSH PRO Guide to Image Formats」を、著者の許可を得て日本語に翻訳しました。PDFでダウンロードできます。
新聞ニュース系158サイトでWebP利用中は23サイト・WebPで平均-1.6秒待ち時間短縮と試算・レポート無料公開
新聞・ニュース系158サイトのモバイルトップページを調査しました。1ページ平均4.43MBで画像はその42%。WebP に変換すると平均1.6秒短縮できると試算しています。
WebPと従来の画像を正しく振り分ける.htaccessファイル
WebP と従来の画像を、ブラウザの対応状況に応じて振り分ける .htaccess の書き方を説明します。非対応ブラウザには元の画像を返すため、既存の画像はそのまま残せます。
WebP画像を目立たせるChrome拡張機能 WebP Highlighter
ページ内で WebP として配信されている画像を蛍光色の枠で目立たせる Chrome拡張機能 WebP Highlighter を紹介します。Developer Tools を開かずに確認できます。
iPhoneの非対応でシェア劣勢でも、いまWebPに対応する意味
日本では iPhone が多く WebP 対応シェアは35%程度にとどまります。それでも今 WebP に対応する意味を、PageSpeed Insights のスコアと実際の恩恵の面から説明します。
ページの画像をまるごとWebP変換してPageSpeed Insightsスコアを今すぐ改善するチュートリアル
ページの画像をまるごと WebP に変換して PageSpeed Insights のスコアを改善する手順を、変換からアップロードまで通しで説明します。既存画像は置き換えません。
表示高速化でコンバージョンが上がるのではなく、ユーザーの離脱を防ぐのだ。遅いページをみたい人はだれももいない。
表示を速くするとコンバージョンが上がる、という説明に違和感がある理由を述べます。速さが増やすのではなく、遅さが離脱させている。防ぐものだという捉え方です。
通販上位300サイト中32サイトがWebPを配信・楽天市場は積極利用
ネット販売企業上位300社のスマホトップページを調べたところ、32サイトが WebP を配信していました。楽天市場は店舗ページを自動で WebP 化しています。
WebPにしたらどれだけ変わるか、無料のWebP変換シミュレータで確かめる
自分のサイトの画像を WebP にしたらどれだけ軽くなるかを、URLを入れるだけで試せる無料のシミュレータを紹介します。Firefox の対応でブラウザの状況も変わりました。
Firefox Quantum が WebP をサポート。残る未対応は Safari のみ
Firefox 65「Firefox Quantum」が WebP に対応しました。これでメジャーブラウザで未対応なのは Safari だけになります。実際に表示を確認した結果を報告します。
画像軽量化は最短3日でスタート！導入時に開発が発生しない画像軽量化ツールって、実は意外と少ない。
画像軽量化を始めるとき、開発が発生しないツールは意外と多くありません。表示速度の改善とコスト削減という2つの動機を整理し、最短3日で始められる進め方を説明します。
Assetizrで画像をリサイズ・最適化する。JPEGからWebPで重くなる？
WindowsでもMacでも使える画像リサイズ・最適化ツール Assetizr を試しました。対応形式が多く扱いやすい一方、JPEGからWebPに変換すると逆に重くなる場合があります。
WebP、JPEG、4K8K。2019年も画像にこだわろう
2019年の画像まわりで押さえておきたい話題を3つ挙げます。WebP への対応、JPEGの品質設定、そして4K8K時代に向けた画像サイズの考え方です。
アイデアマンズブログの2018年をまとめ！WebPや画像軽量化などの「画像」な一年間を振り返る
2018年のアイデアマンズブログを振り返ります。WebP の対応状況、画像軽量化の広がり、Lighthouse の普及など、「画像」を軸にした一年をまとめました。
PageSpeed Insightsの画像4項目を調べて分かった、やるべき対策
PageSpeed Insights の分析エンジンが Lighthouse に変わりました。画像に関する4つの指摘項目を調べ、軽量化とオフスクリーン画像の遅延読み込みは取り組む価値があると結論します。
画像軽量化ツール「LightFile」の情報がより見やすく！事例紹介も掲載しました！
画像軽量化ツール LightFile の情報をまとめたページをコーポレートサイトに公開しました。機能の詳細に加え、軽量化の仕組みと導入事例もあわせて掲載しています。
従量課金型のCDNは、画像軽量化で料金を大幅にコストダウンできる
従量課金型のCDNは、画像を軽くするとそのまま料金が下がります。AWS CloudFront を例に費用の計算方法を説明します。転送料金が月10万円以上下がった例もあります。
2018年11月現在のWebPのブラウザ対応状況。Firefoxは65で対応予定
2018年11月時点での WebP のブラウザ対応状況をまとめました。Firefox が65で対応予定となり、残る課題は Safari です。Mac版・iOS版とも対応の予定は出ていません。
Googleスピードアップデートがもたらした画像転送量の大幅な削減
Google のスピードアップデート後、画像の軽量化と転送量の削減がどれだけ進んだのかを振り返ります。SEOが絡むと対応が一気に進む、という傾向が数字にも表れています。
Google Squoosh を試してみたら、非常に高機能だった
Google が公開したブラウザで使える画像軽量化ツール Squoosh を試しました。形式や品質を細かく変えながら結果を見比べられ、1枚ずつ丁寧に詰めたいときに向いています。
LightFile for Dropbox が100ユーザーを突破。削減率は93%以上
Dropbox と連携する LightFile for Dropbox が100ユーザーを突破しました。プレビュー版ながら、現在93%以上の削減率を達成しています。
![[限定3社] Movable Type事例キャンペーンで LightFile をお得に](https://blog.ideamans.com/assets/mt-casestudy-ogp.jpg)
[限定3社] Movable Type事例キャンペーンで LightFile をお得に
Movable Type で構築されたサイトを対象に、画像軽量化ツール LightFile を優待価格で導入いただけるキャンペーンを、3社限定で実施します。条件と申込方法をご案内します。
表示高速化の第一歩に画像の軽量化を勧める6つの理由
表示高速化に何から手を付けるか迷ったら、画像の軽量化から始めることを勧めます。範囲が限られ、既存の作りを壊さず、効果が数字で見えるなど、6つの理由を挙げて説明します。
実際にWebPを利用するとどうなる？WebPの試験導入で画像ファイルサイズを-62.38%も削減という結果に！
自社サイトで WebP を試験導入した結果、画像のファイルサイズが62.38%削減されました。Googleデータスタジオで作ったレポートをもとに、実際の削減幅を共有します。
Webサイト全体をWebP対応する最低限の方法
サイト全体を WebP 対応する最低限の方法を、3ファイルのシェルスクリプトで実現しました。既存の画像を残したまま、対応ブラウザにだけ WebP を返す仕組みです。
美容ブランドのECサイトが収益を倍増させた６つの変革にある「ページの表示」について考えてみよう
美容ブランドのECサイトが収益を倍増させた6つの変革のうち、ページ表示に関する部分を取り上げて考えます。表示速度が売上にどう効くのかを、事例から読み解きます。
「Jpegの品質は85がおすすめ」をデータで検証する
JPEGの品質は85が推奨、という定説をデータで検証しました。85を超えると容量が急に増える一方で画質はほとんど改善しない、という性質を実測値で確かめます。
簡単にSSIMを計算するツール6+2本を紹介
画質の評価に使う SSIM を実際に算出する方法を、コマンドラインツールからWebサービスまで6+2本紹介します。ImageMagick や ffmpeg での具体的な手順も示します。
Dropboxで楽々おまかせJpeg軽量化！ LightFile for Dropbox プレビュー版
Dropbox の決まったフォルダに JPEG を置くだけで自動的に軽量化する「LightFile for Dropbox」プレビュー版を公開しました。仕組みと使い方を説明します。
スマホメーカーのウェブサイトを画像軽量化の観点でみてみる
スマートフォンメーカーのサイトの画像軽量化の状況を調べました。新機種の紹介に大きな画像を多用するため、対応しているかどうかで体感の差が出やすい業種です。
ファミレス各社のサイトを画像軽量化の観点でみたら、意外と差があった
ファミリーレストラン各社のサイトの画像軽量化の状況を調べました。季節ごとに新商品が入れ替わるため画像の更新が多く、対応の有無で差がはっきり出ています。
お菓子メーカーのウェブサイトを画像軽量化の観点でみてみる
お菓子メーカーのサイトの画像軽量化の状況を調べました。商品パッケージやキャンペーンの画像が多く、容量に占める画像の割合が高くなりやすい業種です。
東京六大学野球の出場6校のサイトはどのくらい画像軽量化されているか
東京六大学野球連盟に加盟する6大学のサイトの画像軽量化の状況を調べました。総ダウンロード容量は最大23.10MB、最小2.1MBと大きな開きがあります。
結婚式場の予約サイトはPV数が多い。画像軽量化でユーザーのギガを守る
結婚情報サイト・式場予約サイトの総ダウンロード容量を調べました。多くの式場を見比べるためPV数が伸びやすく、1ページあたりの容量が通信量に直結します。
東京駅でランチ！まだお店が決まってなければ「東京駅 ランチ」で検索！その表示されたサイト、画像軽量化されてる？
「東京駅 ランチ」で検索して上位に出るサイトが、画像を軽量化できているかを調べました。検索から来た人を待たせていないか、実際のデータで確かめます。
2018年8月現在の SVGのブラウザ対応状況を確認してみよう。SVGは透過PNGも変換できる軽量画像フォーマット。
2018年8月時点での SVG のブラウザ対応状況をまとめました。基本的なSVGはほぼすべてのブラウザで使えますが、filter など一部は未対応のブラウザが残ります。
ビール各社のウェブサイトを画像軽量化の観点でみてみる
ビールメーカーのサイトの画像利用状況を調べました。銘柄ごとの商品画像やキャンペーンのバナーが多く、容量に占める画像の割合が高くなりやすい業種です。
スポーツアパレルメーカーのサイトを画像軽量化の観点でみてみる
スポーツアパレルメーカーのサイトの画像利用状況を調べました。商品を見せるための画像が多く、オンラインショップを持つ場合は軽量化が売上にも効いてきます。
パ・リーグ球団のスマホサイトは、レイアウトは似ていても画像軽量化は球団ごと
パシフィック・リーグ6球団のオフィシャルサイトを調べました。スマホ向けのレイアウトはほぼ共通ですが、画像の軽量化の状況は球団ごとに差があります。
セ・リーグ球団のオフィシャルサイトを画像軽量化の観点でみてみる
セントラル・リーグ6球団のオフィシャルサイトの画像利用状況を調べました。試合日程や選手情報など更新の多いページで、容量がファンの通信量にどう響くかを見ています。
7,866サイトのトップページを調べたら、モバイル向けの平均は2.43MBだった
Lighthouse で7,866サイトのトップページの総データ量を測りました。モバイル向けの平均は2.43MBで、Googleが推奨する1.6MBを大きく上回っています。
独自スタイルの珈琲店のサイトを画像軽量化の観点でみてみる
チェーン店とは違う独自スタイルのカフェのサイトを調べました。ファンの熱量が高い一方で画像は重めのことが多く、軽量化すると閲覧が快適になる余地があります。
11種類のロスレスPNGサイズ削減ツールの比較ベンチマークレポート
PNGのファイルサイズを削減するロスレスツール11種類を比較したベンチマークを紹介します。OptiPNG や pngquant 以外にも選択肢があり、削減率と処理時間には差があります。
カフェチェーンのサイトは季節限定や新商品が多く、画像軽量化が効く
カフェチェーンのサイトの画像利用状況を調べました。季節限定商品や新商品の入れ替わりが多く、商品画像が頻繁に差し替わるため、軽量化の効果が積み重なる業種です。
画質85がよいという記事をみたので、LightFileの処理と比較してみた。画像軽量化は、画質とのバランスの戦いなのだ。
JPEGは品質85がよいという記事が話題になったので、実際にその設定と LightFile の処理を比べました。画質とファイルサイズのバランスをどう取るかという話です。
2018年8月現在のWebPのブラウザ対応状況を確認する
2018年8月時点での WebP のブラウザ対応状況をまとめました。Chrome など Google 系は対応済みですが、Microsoft と Apple のブラウザは未対応のままです。
ほとんどのウェブサイトが画像軽量化済みという驚きの結果！国外の車メーカー９社をチェックしてみた
海外の自動車メーカー9社のサイトを調べたところ、ほとんどが画像の軽量化を済ませているという結果でした。前回調べた国産メーカーとの違いもあわせて紹介します。
SUV？それともスポーツカー？国産車メーカーのウェブサイトをチェックしてみたら、ホンダは画像軽量化が自動化されている？
国産自動車メーカーのサイトの画像利用状況を調べました。ホンダのように画像の軽量化が自動化されていると見られるサイトもあり、メーカーごとの差が出ています。
車の事ならなんでもカー用品店にお任せ！キャンペーンの更新頻度が高いウェブサイトは、まずバナー画像を軽量化しよう
カー用品店のサイトの画像利用状況を調べました。キャンペーンの更新頻度が高くバナー画像が多いため、まずバナーから軽量化すると効果が出やすい業種です。
JPGよりもPNGが多い？特定の時間帯にアクセスが集中するTV番組ウェブサイトは、画像軽量化でもっと快適になる。
テレビ番組のサイトの画像利用状況を調べました。JPGよりPNGが多い傾向があり、放送時間帯にアクセスが集中する性質を考えると、軽量化の効果が出やすい領域です。
テレビ局のウェブサイトはコンテンツが多く更新も速い。画像軽量化が効く
テレビ局のサイトの総ダウンロード容量を調べました。番組表やオンデマンドなどコンテンツが多く更新頻度も高いため、画像の軽量化が効きやすいことがわかります。
動画配信サイトは画像軽量化もすでに実施済みのところが多い
動画配信サービスのサイトの総ダウンロード容量を調べました。動画という重いものを扱う事業者だけあって、画像の軽量化はすでに実施済みのサイトが多いという結果でした。
英会話はマンツーマン？オンライン？ほとんどの英会話教室ウェブサイトは、画像軽量化すればもっと表示が速くなる！
英会話教室のサイトの総ダウンロード容量を調べました。最大15.78MB、最小2.92MB。PNGの利用が多く、形式を見直すだけでも表示が軽くなる余地があります。
コンビニのウェブサイトは更新頻度が高く、バナーと商品画像が多い
コンビニ各社のサイトの総ダウンロード容量を調べました。最大22.06MB、最小1.93MB。キャンペーンや新商品のバナーが多く更新頻度も高いため、画像の扱いが効いてきます。
ネット銀行のウェブサイトはJPEGよりPNGが多く、軽量化の余地がある
ネット銀行のサイトの総ダウンロード容量を調べました。最大11.77MB、最小1.6MB。アイコンに透過PNGを使いつつJPGより PNG が多く、軽量化の余地が見えます。
インターネットバンキングなどで多くの人が利用する都市銀行のウェブサイト。グループの親会社もまとめてチェックしてみよう！
都市銀行とそのグループ会社のサイト8件について、表示に必要なダウンロード容量を調べました。多くの人が使うサイトらしく、全体に容量は少なく作りも簡潔です。
会計アプリ業界のウェブサイトは、JPEGよりもPNGを利用する傾向が強い？
会計ソフト8社のサイトの画像利用状況を調べました。総ダウンロード容量は最大7.07MB、最小2.41MB。JPEGよりPNGを使う傾向が強いという特徴が見えます。
Optimizillaは後から画質調整ができる、きめ細かく確認したい人向けのツール
画質を後から細かく調整できる海外の軽量化サービス Optimizilla と LightFile Core を比べました。削減率と画質、そしてアップロード先がわからない点にも触れます。
![Macだけでできる！画像をリサイズして、ファイルサイズを軽量化しよう！[プレビュー.app編]](https://blog.ideamans.com/assets/2018-07-06-preview-ogp.jpg)
Macだけでできる！画像をリサイズして、ファイルサイズを軽量化しよう！[プレビュー.app編]
Mac標準の「プレビュー.app」だけで、大きな写真をリサイズして軽くする手順を説明します。Photoshopのような専用ツールがなくても、追加費用なしで始められます。
Google Speed Updateで表示高速化しようと思ったら、まずは画像軽量化からはじめましょう
Google の Speed Update が表示速度を検索順位に反映します。本当に遅いページだけが対象で段階的に適用されるという補足も踏まえ、まず何から着手すべきかを説明します。
PNGの軽量化はどうすればいいの？Macで利用できる無料のCrunchを使ってみよう！
PNGはJPEGの2〜3倍の容量になりがちです。Macで無料で使える軽量化アプリ Crunch を紹介し、どこまで小さくできるかを実際に試しました。
Compressor.io はロスレスもロッシーも選べる4形式対応のWebサービス
4種類の画像形式に対応し、ロスレスとロッシーを選べるWebサービス Compressor.io と LightFile Core の削減率を比べました。同じ画像で画質の差も検証しています。
画像軽量化がなかなか進まない3つの理由と、その解きほぐし方
画像の軽量化がわかっていても進まない3つの理由を、コンテンツ担当とシステム担当それぞれの立場から整理しました。人手に頼らず仕組みにすると解決する、という結論に至ります。
画像軽量化でコストが下がる？！例えば転送量20TB(月)だとすると、どのぐらいの差がでるのか？
画像を軽量化すると、クラウドの転送料金がどれだけ下がるのかを試算しました。AWS で月20TBの転送があるケースを例に、削減率ごとの金額差を具体的に示します。
画像の解像度を、exiftoolで確認しよう！X Resolution、Y Resolutionが解像度を示す
画像の解像度を exiftool で確認する方法です。X Resolution と Y Resolution の見方と、コマンドの基本的な使い方を説明します。
Retinaディスプレイに合わせるには、解像度はいくつがいい？画像最適化するなら解像度も理解しよう！
Retinaディスプレイ向けの画像は解像度をいくつにすべきかを検証しました。結論は72dpiで問題なく、調整すべきなのは解像度ではなく画像の表示サイズのほうです。
表示サイズごとにファイルサイズを比較！画像最適化は、表示サイズと画質調整が重要！
表示サイズを変えながらJPEGとPNGのファイルサイズを比べました。サイズが変わっても比率はあまり変わらず、最高画質のJPEGでもPNGとは1.4倍の差が出ています。
レスポンシブ・ウェブ・デザインにおいて画像最適化が意味するもの
レスポンシブ・ウェブ・デザインにおける画像最適化の意味を説明します。同じソースで全端末に配るぶん、高速回線でない環境に不要な容量を送らない工夫が要ります。
JPEGとPNGの使い分けは、色数が多いか少ないかで決まる
JPEGとPNGはどちらを選ぶべきかを、色数という観点から説明します。写真のように色数が多ければJPEG、ロゴやアイコンのように少なければPNG。特性を掴めば容量が半分になることもあります。
LightFileチャレンジ「軽量化前のきれいな元画像はどれ？」の答え合わせ
MTDDC Meetup HOKKAIDO 2018 のブースで出題した「軽量化する前の元画像はどれ？」クイズの答え合わせです。正解は25人、見分けられた人は42%でした。
JPEG2000について相談されたので、使われていない理由を調べてみた
ECサイトで JPEG2000 を使えないかと相談を受けたので、なぜ普及していないのかを調べました。対応ブラウザが Safari のみであることと、再生の負荷が理由です。
JPGなら約45%も軽くなる！透過がないその画像、JPGよりも重いけどほんとうにPNGでいいの？
透過が不要な画像をなんとなくPNGで書き出していませんか。OGP画像のサイズでJPGとPNGを比べたところ、JPGなら約45%軽くなりました。使い分けの目安を示します。
LightFile Simulatorに、最適化後のページを実際に見られる体験機能を追加
LightFile シミュレータに体験機能を追加しました。数値のレポートだけでなく、最適化したあとのページを実際に開いて、表示の速さと画質をその場で確かめられます。
ブランディングメインか、一覧にするか。時計メーカーのWebサイトトップページは、18%〜96%を画像が占める。
時計メーカーのトップページを調べたところ、画像の占める割合は18%から96%でした。ブランディング重視の海外勢と、製品一覧を見せる国内勢という作りの違いも見えます。
Googleのスピード スコアカードでECサイトの機会損失を算出する
Google が公開した Speed Scorecard と Impact Calculator を使い、読み込み速度の遅れがECサイトの売上にどれだけの機会損失を生むかを試算しました。
音響業界のトップページは画像がデータ量の17%〜89%を占める
音響業界10社のトップページを調べたところ、ダウンロード容量に占める画像の割合は17%から89%まで開きがありました。取扱製品が少ない会社ほどレイアウトが簡潔という傾向も見えます。
Photoshopの書き出しで何が変わるかは、差分をとればみえてくる
Photoshop で画質を落として書き出した画像が、元の画像とどこがどう変わっているのかを差分として可視化しました。人の目ではわかりにくい変化も、比べれば見えてきます。
LightFileをCDNと併用してサイト表示高速化（画像最適化）の相乗効果を！
CDNを入れているから表示速度は大丈夫、という誤解について説明します。CDNは配信を速くしますが画像そのものは軽くならないため、画像最適化と併用すると効果が重なります。
動画での訴求が流行り？3%〜93%と幅広い住宅設備・リフォーム関係の企業トップページは、ゴテゴテしてないから容量も軽い。
住宅設備・リフォーム関連9社のトップページを調べました。画像の割合は3%から93%と幅広く、動画を置かないサイトは全体に軽く作られている傾向が見えます。
横幅いっぱいの動画を配置しているサイトも！生活家電企業のトップページは、画像が10%〜88%を占めている！
生活家電メーカー11社のトップページを調べました。画像の占める割合は10%から88%で、動画を置いているサイトは画像が1割程度、動画がなければ半分以上が画像という傾向でした。
画像が24%〜92%を占めるという事実。日本の鉄道会社Webサイトのトップページをチェックしてみた。
日本の鉄道会社11社のトップページを調べたところ、ダウンロード容量に占める画像の割合は24%から92%でした。画像の重さがページ全体をどれだけ左右するかがわかります。
高画質な4K・8K時代に備えて、画像のファイルサイズを知っておこう！TVの進化はオリンピックとともに。
4K・8Kのディスプレイが普及すると、画像のファイルサイズはどうなるのかを考えます。フルHD・4K・8Kの表示サイズを並べて比べ、必要な画像の大きさを整理しました。
WebPってなに？Googleが作った軽くて透過も使える画像フォーマット
Google が作った画像フォーマット WebP を説明します。JPGより軽く、PNGのように透過も扱えます。対応ブラウザの状況と、導入すると容量がどう変わるかを確かめる方法も紹介します。
画像最適化処理はシステムにまかせて自動化！作業フローを変えずに確実に最適化しましょう。
画像最適化を人の作業に頼ると、担当者が忙しいときに漏れます。作業フローを変えずにシステム側で自動的に最適化する考え方と、現場でよくある悩みを整理しました。
画質が悪い？JPGがパキッっとした画像に向いていないのは、どうしてなのか？画像の特性を知れば解決策が見えてくる！
色数の少ないパキッとした画像をJPGで保存すると、なぜモアレのような荒れが出るのかを説明します。JPGの圧縮の仕組みから、どの画像にどの形式が向くのかを整理します。
画像処理（画像軽量化）を行う３つのメリット。ファイルサイズ削減で、表示高速からコストダウンまで！
画像を軽量化すると得られる3つのメリットを順に説明します。表示が速くなること、転送量が減ること、そして転送量が減った結果クラウドの費用が下がることです。
画像最適化ツールLightFileのご紹介
画像最適化ツール「LightFile」の紹介です。画質をきれいなまま軽量化することで、表示の高速化とクラウドの転送量削減を両立します。サービスの基本情報をまとめました。
モバイルファーストインデックス開始。スマホの読み込み速度をどう改善するか
Google のモバイルファーストインデックスが始まりました。読み込み速度がモバイル検索の順位に影響するとされる中で、スマホ向けにまず何をすべきかを整理します。
LightFileシミュレータβ版を公開。画像がどこまで軽くなるかひと目で分かる
ページで使われている画像がどこまで軽くなるかを試せる「LightFile シミュレータ」β版を公開しました。画像単体でもページ全体でも、削減できる容量と画質を確かめられます。
実際、画像を軽量化すると本当に表示高速化されるの？LightFileの処理前後が比較できるページを公開しました。
画像を軽量化すると本当に表示が速くなるのかを、その場で体感できる比較ページを公開しました。HTMLがほぼ同じ2ページに、LightFile の処理前と処理後の画像を読み込ませています。
Photoshopで最高画質に書き出したバナーをLightFileで軽量化する
Photoshop で作ったバナーを最高画質で書き出し、そこに LightFile の処理をかけました。書き出し時の画質設定をどうすべきかを、ファイルサイズと画質の両面から検証します。
画質を保ちながら、ファイルサイズを軽くするLightFileの処理は、「比較して選ぶ」が重要なのです。
LightFile が画質を保ったままファイルサイズを減らせる理由を説明します。設定値どおりに1回処理するのではなく、圧縮率の違う結果を複数作って比較し、最も劣化の少ないものを選んでいます。
設定するだけでOK！LightFileとクラウド型画像処理サービスの導入時の違いを考えてみる。
画像最適化サービスは、導入するときに何が違うのかを整理しました。クラウド型のサービスと LightFile を、必要な作業や既存サイトへの影響の観点で比べています。
LightFileの新型シミュレータ画面を、MT東京vol.44でLightning Talkしてきました！
MT東京 vol.44 で、LightFile の新しいシミュレータ画面をライトニングトークで紹介しました。URLを入力して解析するとレポートが発行される、新機能の様子をお伝えします。
スマホ表示最速王決定戦！CMSプロレスvol.03に参加してきました！
「第3回CMSプロレス ウェブサイト表示速度 最速王者決定戦」の参加レポートです。Test My Site での計測結果と、当日その場で行った高速化の実装について報告します。
スマホ表示の最速王決定戦！CMSプロレス vol.03は、とにかく速い人が勝つ！
ロフトワーク主催「第3回CMSプロレス ウェブサイト表示速度 最速王者決定戦」に参加します。Google の Test My Site で計測して速い方が勝ちという、シンプルな対戦のルールを紹介します。
たった5分でスマホ表示を速くする。画像が軽くなれば表示は速くなる
スマホの表示を速くしたいけれど何から手を付けるか、という方に向けて、画像の軽量化を5分で始める方法を説明します。LightFile なら導入後は自動で処理し続けます。
Chrome DevToolsのPerformanceパネルで3G回線の表示時間を測る
Chrome DevTools の Performance パネルで回線速度を擬似的に落とし、3G回線ではページが何秒で表示されるかを確かめる方法です。高速回線では気づけない遅さを再現できます。
Chrome拡張「Page Load Time」で表示時間を手軽に計測する
今見ているページの表示時間を、クリックひとつで確かめられる Chrome拡張「Page Load Time」を紹介します。DevTools ほどの情報は要らないときに手軽に使えます。
JPGにする？PNGにする？背景の透過がなければ、どちらの画像形式にするほうが軽くなるのか試してみよう
背景の透過が要らない画像は、JPGとPNGのどちらが軽くなるのかを実際に試しました。Web画像フォーマットの使い分けが1枚でわかるチートシートの日本語版もあわせて公開しています。
AWS Lambdaでの画像最適化は低コストで確実に動く
AWS Lambda で画像最適化を動かすと、コストと運用がどう変わるのかを日本経済新聞社の事例から見ています。EC2で同等の構成を組む場合と比べて10分の1程度という数字も紹介します。
PC向けとスマホ向けでこんなにファイルサイズがかわる？！トップページのスライダー画像を調べてみた
トップページのスライダー画像が、PC向けとスマホ向けでどれだけ容量が違うかを実測しました。PC向け240KBに対しスマホ向けは35KBと、約85%も軽くできる余地があります。
トップページのスライダーバナーはどこまで軽くなるか
実際のWebサイトで使われるスライダーバナーに近い条件で、Photoshop の書き出しと LightFile Core の削減率を比べました。比較に使ったデータ一式もダウンロードできます。
PageSpeed Insightsで分かるのは表示サイズの適否まで
Google PageSpeed Insights の使い方と、レポートの読み方を説明します。このツールでわかるのは画像の表示サイズが適切かどうかで、画質の軽量化はさらに別の余地として残ります。
Photoshopの画質設定を100から80まで試して分かったこと
Photoshop の「Web用に保存」で画質を100から80まで変えながら、ファイルサイズと元画像との差分を調べました。どのあたりから見た目に影響が出るのか、画質80で十分かを検証します。
人間の目ではなかなかわからない！Photoshopの画質設定ごとに、画像にどんな差分があるのか調べてみた。
Photoshop の「Web用に保存」で画質設定を変えると、書き出した画像にどんな差分が出るのかを調べました。人の目では違いがわかりにくい範囲でも、ファイルサイズは大きく変わります。
パフォーマンスをあげよう！デジタル時代におけるWebパフォーマンスが速いことのメリット
Webの表示が速いと何が得なのかを、Akamai のリテールレポートなどの調査データから整理しました。スマホが当たり前になった今、表示速度が売上や離脱にどう効くのかを説明します。
WordPressプラグイン「Imsanity」で大きな画像を自動リサイズ
大きな画像をアップロードしても自動でリサイズしてくれる WordPress プラグイン「Imsanity」を試しました。画質の最適化とは別に、表示サイズに合わせて縮めることの効果を検証します。
JPGダイエット対決！LightFileと画像軽量化サービスとの戦いは終わらない。コストダウンや表示高速化のメリットも。
画像の軽量化「JPGダイエット」のまとめです。なぜ軽量化するのか、どこまで減らすと画質に影響するのか、他社ツールとの比較記事の一覧をここから辿れます。表示速度と転送量の両面で効きます。
Photoshopの書き出しは画質設定次第、意外と画質60でも通用する
Web制作の定番 Photoshop の「Web用に保存」と LightFile Core を比べました。画質設定によってファイルサイズがどう変わるか、画質60でも実用に耐えるのかを検証します。
画像の差分をみてみよう！変化がわかると、違いがわかる！比べてわかるクオリティと差分の関係。
画像を最適化すると、元の画像とどれだけ違いが出るのかを ImageMagick の compare コマンドで可視化しました。機械が測る「差分」と人が感じる「劣化」は別物だという話をします。
「JPEGmini」は画質を優先した画像最適化が得意なデスクトップアプリ
PCにインストールして使う画像最適化アプリ「JPEGmini」と LightFile Core を比べました。画質を優先するタイプの最適化がどこまで削減できるのか、同じ画像で検証しています。
TinyPNGのWordPress版「Compress JPEG & PNG images」を試す
画像最適化の代表格 TinyPNG の WordPress プラグイン「Compress JPEG & PNG images」と LightFile Core を比べました。削減率と画質の劣化がどう違うかを実際の画像で検証します。
WordPressの「EWWW Image Optimizer」は有料APIで本気になるか
WordPress で人気の画像最適化プラグイン「EWWW Image Optimizer」と LightFile Core を比べました。有料APIを使うと結果がどう変わるかを、削減率と画質の両面で検証します。
速いは正義！dev.toにみるウェブページ表示高速化の画像最適化手法をみてみた
表示の速さで話題になったエンジニア向けサービス dev.to が、どんな画像最適化をしているのかを調べました。実際に配信されている画像の形式やサイズから、高速化の手口を読み解きます。
画像の色味が変わる？色空間は再現範囲が異なるから、Exif情報のColorまわりの項目には気をつけよう！
画像を加工したら色味が変わった、という現象の原因を説明します。Exif の Color Space Data など色に関するメタデータが失われたり書き換えられたりすると、同じ画像でも見え方が変わります。
60%以上の軽量化も！iPhoneで撮影した風景写真を、LightFile CoreでJPGダイエットしてみた
iPhone で撮った風景写真を LightFile Core で軽量化し、他社サービスと削減率を比べました。60%以上軽くなった例もあります。画像を軽くすると表示速度や転送量にどう効くのかも説明します。
ほとんど元画像と変わらない！ファイルサイズよりも最も劣化が少ないキレイな画質をみて、ファイルサイズを削減！
LightFile Core が、画質の劣化を最小限に抑えたままファイルサイズを削減する仕組みを説明します。圧縮率の違う画像を複数生成し、視覚に現れる劣化をアルゴリズムで評価して、最も劣化の少ないものを選びます。