節約術・ライフハックスポンサーリンクブロガーでもWEBサイトの管理者でも、サイトを運営しているからにはPV数だとか、コンバージョンなど何かしらのアクションが欲しいですよね。一般的な情報として、サイトを見ているときにページが表示されるまでの時間が長くなると、ユーザーは離脱する確率がドンと上がるという話があります。これはユーザー目線で考えると肌感覚としても分かると思います。WEBサイトは高速に表示できるように気をつけて、優れたユーザーエクスペリエンス(UX)を実現できるようにしましょう!今回は、初心者がやりがちなポイントとして「無駄にデカい写真」問題に焦点を当てて書いていきます。ブログやサイトに何気なく使われているスマホの写真を軽量化できれば、アクセス速度は簡単に2倍以上になるって話です。動画の場合は?まとめ普段どんな大きさの画像を見てる?最近は各種SNSで画像やら動画を見てる人がたくさんいますが、改めてそのサイズ感を確かめてみましょう。比較しないと分かりにくいので、とりあえず基準を決めたいと思います。エイやーで決めますが、今回はこれ!FHD(フルハイビジョン)の動画の大きさ(解像度)である「1920×1080」としましょう。基準という割には、地デジ化以降のテレビでも採用されているキレイな方かと思います。この数値は、横幅が1920px(ピクセル)で縦が1080pxということを表します。今後の比較のために画素数を計算すると、1920×1080=2073600ということで、ざっくり200万画素です。関連記事>>>江の島観光?いや、観光スポットを散歩して適当に撮った写真をアップするよ!意外と小さい?これってどうでしょう?キレイなフルHDかと思いきや、意外にもたったの200万画素。仮に「200万画素のデジカメ」とか言ったら、おもちゃか!とつっこまれそうです。最近のデジカメだと1000万画素はおろか、3000万画素とかもありますもんね。そんなもんなんです、というのが今回のWEBサイト軽量化のミソです。iPhoneカメラの場合フルHDの大きさに続き、日本人が大好きなiPhoneのカメラに注目してみます。最近のiPhoneでは12MPのカメラとして仕様に書いてありました。pocketsMPはメガピクセルの意味なので、つまり1200万画素ですね。具体的には手元のiPhoneSEで(動画でなく)写真を撮影したところ、4032×3024でした。(ちなみに、縦横比がぴったり4:3)そして、その画像ファイルとしてのサイズは約3.3MBくらいでいした(写真の対象によって変わります)。数字が何種類か出てきて紛らわしいですね。スポンサーリンクで、このブログでの写真例このブログ「スタイリッシュ生活日記」では、基本的にこれくらいのサイズの画像を載せるようにしています。見て、どうですかね?キレイですか?それとも、見えづらいですか?私は個人的にはこのサイズで十分わかると考えているのですが、これが横幅480px・縦360pxです。元はiPhoneSEで撮影してるので4032×3024の写真ですが、およそ寸法比8分の1の大きさしかないです(面積比だと64分の1です)。写真をワードプレスに「アップロード」してメディアに追加した時点では1008×756ですが、そこからさらに小さく表示しています。何で小さく表示してるの?小さくした画像をアップロードして表示してるかの理由ですが、パソコンでもスマホでも、そんなに大きな写真を普段表示させないからです。このブログをパソコンで見ていただいている方は文字の折り返しの幅がたかだか600pxくらいかと思います。スマホで見ていただいている方は、スマホ自体の横幅なのでせいぜい300pxだと思います。iPhoneXクラスのスマホの横持ちでやっと1000pxくらいですかね。これを考えていけばiPhone標準の横幅約4000pxの写真がいかにデカ過ぎるか分かりますよね。半分にしてもまだ大きいくらい。この辺りが、ブログの表示速度に密接に関わってきます。あ、ちなみにこのブログの「モバイルユーザビリティ」はずっと前から最高スコアです!写真サイズとファイルサイズ次に、サイトの表示速度に密接に関わる「ファイルサイズ」を見てみます。Windowsのフォルダや、MacのFinderで見られる、○MB(メガバイト)や○KB(キロバイト)です。ちなみに、1MBと1KBで約1000倍の差があります(厳密には1024倍)。この写真を例にあげて見てみましょう。晴れた日のテラスモール湘南です。この写真の元のサイズから小さくしてみたとき、ファイルサイズは次のようになりました。上の写真は、前述のとおり1008×756の大きさの写真を、480×360くらい(172800≒17万画素)で表示しています。約0.085MB(85KB)証拠のスクショちなみに8分の1のサイズにしても、こんな感じです。これでも上の写真と見比べて十分キレイだと思えれば、これにしましょう。オリジナルサイズに比べて4分の1サイズの状態で、ファイルサイズは3300KBから300KBくらいに下がりましたね。10倍以上軽くなっています。単純に、画像だけ表示させるスピードが10倍になったと考えられます。実際には他の画像や目に見えないプログラムが動いているので単純計算はできない点には注意が必要です。普段、サイトの表示速度が遅くて困っている皆さん、どの大きさの画像を表示しているか、今すぐチェックして見ましょう。関連記事>>>光学40倍ズームの魅力!中秋の名月を撮ったらデジカメにハマりそう!画像のサイズをどうやって変える?と言うことで、画像のサイズを小さくするとサイトの表示速度が速くできることがわかってきました。実際にはどうやって効率よく画像のサイズを変えるのでしょうか。私の場合はiPhoneで撮影した写真をそのまま、AirDropで送ってMacに保存しています。Finderから写真を開いて、「ツール」から「サイズを調整」を選択します。その後は、「パーセント」を選んで、「幅」または「高さ」を25としています。縦横比は固定なので、縦と横をそれぞれ4分の1(25%)にするということですね。「調整後のサイズ」で何ピクセルになるのかと、推定のファイルサイズ(237KB)が分かります。上の表にあるように、実際には300KBでした。あと、複数選択しておけば、一度の入力で全部変えることができます。小さくした後で、WordPressにアップロードしたりしています。うん、簡単!Windowsの場合ウィンドウズの場合、標準の「ペイント」などを使ってもできるのですが、1枚ずつ変えないといけませんね。100枚の画像を目の前にすると、やる気が削がれます。フリーソフトの力を借りましょう。pockets「リサイズ超簡単!Pro」が使い方が簡単でオススメです。動画の場合は?写真・画像と同じように、動画を目にする機会もたくさんありますが、この場合はどうなのでしょう?同じように、小さくすれば表示速度が大きく向上できるのでしょうか?答えはほぼほぼNoですね。画像ならいざ知らず、動画をウェブサイトにアップロードして掲載しているサイトって今時ありますかね?大体はYoutubeなどの動画を埋め込んで使っていることだと思います。なってくるとリンクを貼っているだけのような状態だと考えて差し支えないです。そのあと、動画の表示速度はYoutubeならYoutube側の表示速度が使用されます。埋め込み動画や、Thetaの360度画像も同じですね!関連記事>>>体操選手の目線になれる!Theta・GoProでユニークな写真を撮ってみたまとめということで、画像と動画について、サイトの表示速度を向上させるテクニックを紹介してきました。つまるところ、動画はあまり気にせず、画像のサイズだけ気にしましょうということです。無駄に大きな画像を使わずに、必要最低限の画像に気をつければ大丈夫ということです。逆に、ここをおろそかにしていると、他のサイトで紹介されているテクニックを使っても高速化は難しいとさえ言えます。この記事の序盤でフルHDの話をしましたが、この辺を考え始めると4K(3840×2160)だの8K(7680×4320)だのは、私は全く興味を惹かれません。200万画素とか、100万画素くらいで十分だと思えるからです。そんなことより、サイト・ブログを高速化しましょう!以上、画像を縮小しまくって、明日はもっとスタイリッシュ生活!\小学生向けタブレット勉強アプリといえば!/関連コンテンツikki(イッキ)のプロフィールはこちら。大企業からベンチャー企業に転職系。30代の子育て世代です。明日がもっとスタイリッシュな生活になるように、今日も貪欲に何かを求めていきましょう。他人に伝えられる事って自分が実際にやった事だけ。何でもチャレンジしてやってみる事が大事!湘南暮らしのリモートワーカーのプログラマー。RubyやPython書いてます。器械体操・トランポリン・ジャグリングも大好きです。【つけ麺11種】スーパー・コンビニで買えるつけ麺の比較&レビュー【冷蔵・チルド編】3522コーディネーショントレーニングで大人も子供も運動神経をもっと伸ばせる1836埼玉のトランポリン施設6選。非日常体験でストレス解消!1797【図解トランポリン】初心者のワタシはどんな技を練習すれば良いの?1717愛知・名古屋のトランポリン施設10選。大人も子供も楽しく全身運動!1472東京都内で大人がトランポリン体験できる施設まとめ。(@motto_stylish)です。大学では器械体操部で、大企業からの転職を経て、現在はリモートプログラマー。毎日の少しずつの工夫で、明日をもっとスタイリッシュな生活にしていきましょう。(7)NewPostsここがマズいよ満員電車!ウイルス感染のパンデミックが心配シンクの次はワンダーだ!花まるラボからWonderLabに!究極の健康メニュー!?惣菜のお豆を使ったダルカレーを作る!【5級〜1級】トランポリンのバッチテストの動画まとめ逆上がりができない時に試したいただ1つの練習法PopularPosts【つけ麺11種】スーパー・コンビニで買えるつけ麺の比較&レビュー【冷蔵・チルド編】コーディネーショントレーニングで大人も子供も運動神経をもっと伸ばせる埼玉のトランポリン施設6選。非日常体験でストレス解消!【図解トランポリン】初心者のワタシはどんな技を練習すれば良いの?愛知・名古屋のトランポリン施設10選。膝から肩を一直線にして膝から落ちます。手軽に取り組める基本技かと思います。足ではなく、腰・お尻から落ちます。これが自在に出来るようになったら楽しくなってきます!手と膝で四つん這いの姿勢で落ちます。手や腕も使うので上半身も鍛えられます!思い切ってお腹から落ちます。立った状態からやるのが恐ければ、四つん這いの後に腹落ちするなども可能です。思い切って背中から落ちます。はじめは怖いかもしれませんが、ウォールトランポリンに必須の技。2018年1月5日X。