静岡・浜松のWebマーケティング|株式会社シーエムエー

お問い合わせ

CMA BLOG

株式会社シーエムエー ホーム > CMA BLOG > ホームページ制作 > GoogleのSpeed Update対策は、画像と動画ファイル圧縮が効果的!!

ホームページ制作 SEO対策 GoogleのSpeed Update対策は、画像と動画ファイル圧縮が効果的!!

  • このエントリーをはてなブックマークに追加

こんにちは。クリエイティブプランナーの深谷です。
GoogleがSpeed Updateを正式導入」の記事はご覧いただけたでしょうか?

今回はSpeed Update対策として、
画像と動画ファイルを劣化させずに軽量化する方法をご紹介いたします。

もくじ
画像の圧縮方法
・TinyJPG
・JPEGmini
・Optimizilla
動画ファイルの圧縮方法
・HandBrake
まとめ

画像の圧縮方法

画像の圧縮方法について、3つのサイトをご紹介いたいます。

TinyJPG

https://tinypng.com/

PNG・JPEG画像ファイルを圧縮できる「Tiny PNG」です。
ブラウザ上で圧縮したい画像をドラッグ&ドロップするだけで、高画質なまま「60%~80%」くらいの軽量化が可能です。

・最大20枚
・最大5MBまで

Optimizilla

https://imagecompressor.com/ja/

PNG・JPEG画像ファイルを圧縮できる「Optimizilla」です。
読み込みファイルの容量制限がなく、圧縮のクオリティ設定も細かく調整することができます。

・最大20枚

JPEGmini

https://www.jpegmini.com/

JPEG画像ファイルを圧縮できる「JPEGmini」です。
JPEGminiの特長は、圧縮前と圧縮後の画像を比較でき、高画質なまま80%近く減らすことも可能です。

・インストールタイプもあります(有料)

動画ファイルの圧縮方法

HandBrake

https://handbrake.fr/

mp4・avi・movなど動画ファイルを圧縮できる「HandBrake」です。
数GBの重いファイルも、高品質のまま数MBまで圧縮することが可能です。

summaryタブ

Format:「MP4」を選択します。
「Web optimized」にチェックを入れます。(Web用の最適化処理を行ってくれる設定)

videoタブ

Video Encoder:「H.264(x264)」を選択します。(映像コーデックの設定)

Framerate(FPS):「Same as source」を選択します。(フレームレートの設定で、読み込んだ動画のfpsを保持します)
Variable FramerateVFRにチェックを入れます。

Average Bitrate (kbps):ラジオボタンにチェックを入れます。
数値を1200から600あたりをおすすめします。

2-pass encodingにチェックを入れます。(書き出しに時間がかかりますが、高画質になります)
Turbo first Passのチェックを外します。

最後に『Start』ボタンを押し書き出しを開始です!

まとめ

画像や動画ファイルを軽量化することによって、

・Google Speed Update対策
・ページの表示高速化
・ユーザビリティの向上
・SEOにも有利

などメリットがございます。

PageSpeed Insightsで「画像を最適化する」の指摘がないか、
ぜひ一度、検証してみては如何でしょうか?

  • このエントリーをはてなブックマークに追加

人気の記事ランキング

  • posted on 2023/02/082023年度版 Google PageSpeed Insights(ページスピードインサイト)を使って読み込み速度を改善したら、何点になるのかチャレンジしてみた

  • posted on 2022/04/21WordPressで画像をWebP(ウェッピー)に対応する方法

  • posted on 2023/07/072023年12月末までにスマートフォン用楽天GOLDが提供終了!新店舗トップページに移行するための16の機能をご紹介(事前申請で2023年8月2日に自動移行も)

  • posted on 2022/10/21DockerでPHP環境を簡単に構築してみよう

  • posted on 2018/04/11構造化マークアップはSEO対策に効果があるのかやってみた

おすすめタグ

ECサイト 動画 HTML ASP カスタマイズ ECcube レクリエーション 創業記念日 wordpress PageSpeed Insights スピードアップデート 動画広告 SSL 構造化マークアップ 構造化データ Instagram広告 クリック率 TLS フォント デザイン Chrome HowTo 文字 Transport Layer Security ノンデザイナー リッチリザルト ハウツー Facebook広告 保護されていない通信 Facebook Audience Network 写真 ウェブサイト翻訳 CSS 動画制作 AMP 広告 HTML5広告 Google Chrome videoタグ GoogleMapsPlatform Zapier iPhone Google my map ワイヤーフレーム Google for jobs Googleしごと検索 撮影 iPad 一眼レフカメラ Core Web Vitals リモート Adobe XD 自作PC PC組み立て 自作パソコン 画質パラメーター サイズパラメーター レクタングルバナー アセット生成 タスクランナー gulp.js node.js WebP画像 楽天GOLD スマートフォン用新店舗トップページ スマートオブジェクト Threads(スレッズ) Adobe Firefly 画像生成AI 生成塗りつぶし 生成拡張 Adobe MAX Japan 2023 UI UX Adobe Stock アンチックフォント Instagram 初心者 ディスプレイ広告 Photoshop PHP Google Search Console XMLサイトマップ shopify ショッピングサイト ショッピファイ Shopify使い方 WebP リモートワーク クラウドドキュメント remotework IE コーディング モダンブラウザ gap gridレイアウト object-fit aspect-ratio any-hover docker プラグイン Adobe Express

Top