Policyお問い合わせContactnoteもやってます。DQNの川流れ時事ビットマスターが破産。詐欺を隠蔽するための計画倒産か?雑学・トリビア【まとめ】第二次世界大戦(WW2)の国別死者数(犠牲者数)と激戦地一覧Twitter(ツイッター)活用Twitter(ツイッター)表示がおかしい。漫画村の後継サイト「星のロミ」が閉鎖、ニューヨーク裁判所で訴えられるホームブログ運用テクニック画像テクニックブログ高速化に必須。Squooshで画像を圧縮する方法ブログ高速化に必須。画像テクニックブログ高速化に必須。2019.05.08この記事は約6分で読めます。Webサイトが遅いのはだいたいが画像のせい。ブロガーなら画像の圧縮は必須のスキルと言っても過言ではありません。画像のサイズを小さくするツールは数多くありますが、Googleが運営しているSquooshというサイトが超絶優秀なので紹介します。Squooshを使うと画像のファイルサイズが2分の1~10分の1程度まで小さくなりますよ。browsersquoosh.appまずは、このサイトにアクセスします。imageという部分をクリックします。トップページすると、ファイルを選択する画面が出てくるので、ファイルサイズを小さくしたい画像を1つだけ選びます。Squoosh画面の基本構成ファイルを選択すると下記画像のような画面になります。右半分が圧縮後の画像です。基本的に右側を操作していきます。左右を見比べて画質が劣化していないかを確認するためのものです。右側のメニューの中にファイル形式を選択する箇所があります。jpgを圧縮するときはMozJPEGpngを圧縮するときはOptiPNG元の画像はpngだけどjpgの画像に変換したいときはMozJPEGMozJPEGやOptiPNGというのは画像を圧縮するための技術の名前です。圧縮された結果できあがるのは普通のjpgやpngなので安心してください。jpgとpngがなんなのか分からない人はすべてMozJPEGを選んでおけば大丈夫。世の中の画像の大半はjpgです。pngというのは背景が透明な画像を作る時に使います。3024のサイズ(寸法)です。ファイル容量としては5MBくらい。ブログに写真をそのままアップロードしてしまうと画面の表示がめちゃめちゃ遅くなります。SquooshではResizeの部分から画像のサイズを設定できるのでWidth(幅)が800くらいになるように調整しましょう。800未満の場合はResizeにはチェックを入れなくてもOK。ファイルサイズ(寸法)を小さくすれば、画像の容量が小さくなるのでブログの表示が速くなります。メインエリアの幅は約800上記の画像ではタイトルの「初心者ブロガー養成講座」と書かれた部分の左側に大きな余白があるのがお分かりでしょうか?サイドバーの「プロフィール」の右側も余白です。わたしのパソコンは幅が1920ピクセルあります。メインエリアの幅は800、サイドバーの幅は400、計1200までしか活用されていません。(正確にはdiv#mainの幅が791)どれだけ大きいディスプレイを使っても幅は1200まで、残りは左右の余白が増えるだけです。AdsenseなどのWeb広告は以下のサイズが一般的です。高さ)たとえば、幅4,000などでブログをデザインしてしまうとバナー広告との比率がおかしなことになります。そのため、よっぽど変なカスタマイズをしていない限りはブログのメインエリアは800程度になるように作られています。これは、幅728のバナー広告を表示したときにちょうどいいサイズです。Webの世界の一般常識として「メインエリアのWidthは800だよね」という共通認識があります。Adsenseも、その他アフィリエイト各社も広告を728×90のサイズで作ります。「はてなブログ」や「アメーバブログ」やWordpressの開発をしている人も、「メインエリアの幅は800だよね」という共通認識を持ってサイトのデザインを作っています。そのため、幅800以上の画像をブログに使ってもほぼ意味が無いです。今後10年はこのルールは変わらないと思います。どんなに高画質の画像をブログに使用しても、表示される段階で幅が約800の画像に縮小されます。ページの表示速度を上げるためには初めから幅が800以下の画像にしておくのがポイントです。paletteの部分で色数を変更できます。一般的な画像は16,777,216種類の色を使って表現されています。普通の人間の目は1670万種類の色の違いを区別できません。そこで色の種類を256通りに減らすことで画像を単純化してファイルの容量を減らすことができます。paletteにチェックを入れるとファイルの容量が増える事があります。「黒と白を並べて目の錯覚を利用して灰色に見せる」のような特殊な処理をしているので、256色しかないのに見た目は1670万色と変わらない画像に仕上がります。その特殊な処理のせいで減色したのに逆にファイル容量が増える事があるので気を付けましょう。上記の画像ではSquoosh画面の右下に154KBという表示があります。これは圧縮後の画像のファイル容量です。palatteにチェックを入れたり・外したりしながら、どちらが容量が小さくなるか確認しましょう。155KB画面の左下に1.62MBという表示があります。これは元の画像のファイル容量です。(1.62MBといいうのは約1620KBです)画面の右下に155KBという表示があります。これは圧縮後の画像ファイルの容量です。この画像の場合は90%も容量の圧縮に成功しています。155KB)まとめSquooshを使うと画像ファイルの容量を劇的に減らすことができます。画像の色数を減らすこの2つがよく使うオプションです。どちらのオプションにもチェックを入れない場合でも、画像をSquooshで圧縮するだけでファイル容量は小さくなります。画像のファイル容量を小さくするとブログの表示速度が速くなるのでぜひご活用ください。Insightsで表示速度が改善されたかチェックしましょう。繰り返すんですが、プレビューの表示がもっさりしてるんですよねー。更新が完了し...u-ff.com2019.05.07お知らせ最後までお読みいただきありがとうございます。この記事は参考になりましたか?気に入ったらツイートしてねTweetはてなブックマークはこちらからページ速度を計測。記事をnoindexにする方法。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。プロフィール編集長にゃんぷん検証系の記事が得意なブロガー。気になることは片っ端から調べる。調べたことはメモを兼ねて記事にしています。まとめ】第二次世界大戦(WW2)の国別死者数(犠牲者数)と激戦地一覧2019.08.152019.09.29誤審連発、サッカー日本代表vsカタール、疑惑のレッドカード&疑惑のPK2020.01.16Twitter(ツイッター)表示がおかしい。分間待ってやる.タイトルとURLをコピーしました。