ホームページを早く表示する為の効率的な画像圧縮
こんにちは、才木です。
今回は画像をよく使うホームページを運営している方には必見の画像圧縮について書いていこうと思います！
画像の圧縮
画像の圧縮とは簡単に言うと画像の余分な部分を取り除くことです。
・画質を下げる
・画像に付随するExif情報をできる限り消す
・画像の縦横サイズが表示領域より大きい場合サイズを合わせる
余分な部分を取り除くことでホームページの読み込み時に表示するページのサイズが小さくなり早くホームページを表示させることが可能となります。
圧縮の効果
実際に圧縮をしてみてどれくらいの効果があるのかみてみましょう。
検証の為に写真素材を無料配布しているぱくたそからダウンロードさせていただきました。
こちらのダウンロード画像、ブログに載せる前は13.3MB。
ここのサイトに載せることで138KB。
だいたい画像サイズが100分の1ほどになっており元画像そのまま表示するより断然サイズが軽くなっています。
圧縮の内訳は縦横サイズの縮小、画質の調整、jpgからwebpへの変換となっております。
効率的な画像圧縮
数枚の画像をホームページ更新ごとに圧縮するようであれば、オンライン上で使える無料画像圧縮サイトを使用すれば新たにツールを導入する必要がなくお手軽に簡単に圧縮可能です！
おすすめの画像圧縮サイトTinyPNG
MacではAutomatorを使って、Windowsではレジストリをいじることでさらに効率的に画像圧縮が可能です。選択後ショートカットキー一発で圧縮可能
大量の画像を使うようなホームページを運営している方でホームページの表示が遅い等でお悩みの方は、画像のサイズを確かめてみてぜひお試しください！
画像の代替テキスト（alt属性）設定：SEO対策ガイド
画像のalt属性を設定することで、画像の内容を検索エンジンに伝えることができます。SEO効果を高め、サイトのアクセシビリティを向上させるための具体的な設定方法と注意点をご紹介します。
デザインカンプとは？Webデザインでの役割や作り方を解説
Webサイトのデザインを具体的に表現した完成見本である「デザインカンプ」。クライアントとのイメージ共有や制作の効率化に欠かせない存在です。この記事では、デザインカンプの役割、作成方法、おすすめのツール...
ホームページ制作の流れを２ステップに分けてポイントごとに解説！
株式会社フムフムのホームページ制作の流れは、お問合せから依頼を受け、公開まで企画・設計・見積りフェーズと制作フェーズの２ステップに分かれます。弊社で手掛けた制作のお問い合わせを例にあげながら、どう...
ホームページ制作費用の内訳や算出方法を事例と共にご紹介します
ここでは、ホームページ制作における全体的な制作費用と制作費の算出方法を説明します。ホームページ制作費の算出方法ホームページ制作の費用は、各社様々だと思います。１ページ●円という設定から、全部で50万円...
CMSとは？初心者でもわかる基礎知識解説
CMSとは何か？初心者でもわかる基礎知識解説です。CMSの種類やメリット、代表例、選択方法などを紹介します。CMSを使って、簡単にWebサイトを作成・更新しましょう。
パララックスデザインの効果を徹底解説｜メリット・デメリット・事例も紹介
パララックスデザインとは、視差効果を利用して奥行きや立体感を演出するWebデザイン手法です。本記事では、パララックスデザインの効果、メリット・デメリット、成功事例などを解説します。
ホームページ制作会社にとって、ノーコードツールは敵か味方か？
こんにちは。株式会社フムフムのみくにゆりこです。私は今主にホームページ制作の中の「コンテンツ」を担当しています。クライアントにインタビューをして、キャッチコピーを考えたりテキストを考えたりするのが...
画像SEO対策に効果的なalt属性の書き方と活用事例
alt属性を効果的に活用して画像SEOを強化する方法を解説。適切な記述方法、注意点、具体的な活用事例を紹介。検索エンジンの最適化とアクセシビリティ向上を目指します。
ホームページ制作発注の流れと事前知識
ホームページ制作の見積もりを取りたいときや、相談したいときって、まず何からすればいいのか悩みますよね？ そんなあなたに向けて、株式会社フムフムがまとめてみました。
メールサーバー目線のGoogleとマイクロソフトのサービス比較
GoogleとMicrosoftのグループウェアの違いをまとめてみました。後、フムフムがなぜGoogleのグループウェアを選んだのかも説明しています。
