「メディア設定」ってしっかりやってますか?
何も設定しないと、画像をアップロードしたときに元画像 + 下記の3サイズの画像が出来ちゃうんです。
[ul type="bd" icon="check"]サムネイルのサイズ:150×150
中サイズ:300×300
大サイズ:1024×1024[/ul]
さらに、テーマにあわせて生成されるサムネイルがあったり、気がついたときには「upload」フォルダの中身がすごいことに! なんてことも。
←プチグラのuploadフォルダの中身です(笑)
すると、「ゴミファイルが増える」「重くなる」などの不具合がでてきます。
メディア設定を怠ると、どうして重くなるの?
テーマの幅より大きな画像を記事に貼り付けると、記事が無駄に重くなっちゃうんです! どうしてかというと……。 幅1000の画像が200kbあったとします。 幅780の画像は150kbだったとします。 記事の幅は780。 すると元々は幅1000ある画像を780pxに合わせてリサイズされます。 どっちでも見栄えは同じ。なら別にいっか? ノンノン! 表示される画像の幅は同じなのに、ファイルが「50kb」も重い! 50kb分、ページを読み込むスピードが遅くなってるんです。 きゃ〜〜〜!!!ナイスなメディア設定はこちら!
blanc note.をお使いの場合は、このように設定していただくと、無駄画像が発生しなくなります。
サムネイルは、一覧で表示する際に出てくる画像のサイズに合わせる
blanc note.では、一覧表示のサムネイルは250x250pxで表示されています。 余裕を持たせて300×300の画像をサムネイルに使っています。 ↓ サムネイルのサイズ:幅の上限300x高さの上限300に設定。中サイズは、回り込みして使う画像に合わせる
中サイズの記事を使う場面って、なにげに少ないと思います。 「パソコンで見たときに、文章の左や右に回りこむ画像」 以外には必要ではないんじゃ……。と考えています。 blanc note.の場合、記事の最大幅が780px。 回り込みする場合は、半分程度のサイズだと美しく見えます。 780/2=390なので390! と言いたいところですが、画像と本文の間に余白を取らないとくっついてしまいます。 そこで、中サイズは 780/2-15(余白)=375で設定します。 中サイズ:幅の上限375x高さの上限500に設定。大サイズは記事の最大幅に合わせる
ブログ記事の場合、画像を一番大きく使うのはどんな場面でしょう? 目を引きたいときに記事の「最大幅」で表示するときではないでしょうか。 blanc note.の記事の最大幅は780px。 ↓ 大サイズ:幅の上限780x高さの上限1040に設定。サイズを設定しておくと記事への画像挿入もラクチン
