11/27『反省を活かせない』
今週の空日記へ

【画像の圧縮】Windowsのペイント3Dを使った画像のリサイズの仕方と写真をはてなブログに貼る方法

Windowsのペイント3Dを使った画像のリサイズの仕方

パソコンの勉強中です!
どうも、あみさかです。

 

今回は画像のリサイズの仕方について書いていきます。

自分は今までブログに貼る写真を選ぶときに今までは、スマホで撮った写真をメールに添付してその写真をそのまま貼り付けていました。

 

それだとやはり、画像の読み込みに時間がかかってしまったりサイズもばらばらでいちいちメールに添付したりこのままじゃ良くないなと思い、

効率的に画像をパソコンに取り込み貼る方法を覚えたので紹介します。

 

スポンサーリンク

写真をパソコンに取り込む方法はGoogleドライブがオススメ

スマホとパソコンを接続する

今回は、Windowsのアプリケーションのペイント3Dを使うということで、スマホで取った画像をパソコンに移す際はGoogleドライブから取り込むことをオススメします。

そのため、まずはスマホで撮った画像をパソコンに取り込む方法から紹介します。

 

GoogleドライブでスマホからPCへ

僕はスマホから画像を取り込む際にGoogleドライブを利用しました。

まずは、スマホにGoogleドライブのアプリを入れます。

 

そしてグーグルアカウントをすでに作成している状態でマイドライブから「+マーク」をタップしてアップロードからパソコンで使用したい画像を選択します。

(この時に、選んだ画像がわかりやすいようにフォルダを先に作ってフォルダを選択した状態でアップロードをすることで簡単に画像を仕分けることができます。)

 

写真を取り込む時のパソコンの操作

パソコンでは、グーグルクロームから入りスマホと同じアカウントを利用します。

同じアカウントに出来たら、右上の四角が9個あるやつをクリックしドライブを選択します。

そこのマイドライブに先ほどスマホで選択した画像・写真があると思います。

画像を開きダウンロードをクリックすると「ダウンロード」に保存されます。

 

画像の保存場所を変更する場合は?

「ダウンロード」に保存されるとファイル内がごちゃごちゃにになって困るという方、スマホから取り込んだ画像を分かりやすい場所にまとめておきたい方は保存場所を変更することをおすすめします。

  1. グーグルクロームの右上の丸が縦に三つ並んだものをクリック
  2. メニューが表示されるので設定をクリック
  3. 下の方にある詳細設定をクリック
  4. そこに「保存先」というものがあるので変更をクリックして、保存先にしたいフォルダを選択することで変更できます。

 

ペイント3Dを使って画像を圧縮する方法

今回は、ペイント3Dを使ったリサイズの仕方を紹介します。

なぜ画像を圧縮するかというと、画像のサイズが大きすぎると読み込むのに時間がかかってしまうからです。

そのため、ブログに画像を貼るときにはリサイズしておかなければ、サイトが重くなって表示速度が落ちてしまいます。

 

ペイント3Dを使った画像のリサイズの手順

  1. ペイント3Dを開いて、「開く」を選択する。
  2. ファイルの参照からリサイズしたい画像を選択
  3. (必要であれば、トリミングで画像のいらない部分を切り取る)
  4. 「キャンバス」を選択
  5. キャンバスでの画像のサイズ変更にチェックを入れる
  6. 縦横比を固定するにチェックを入れる
  7. ピクセル数を変更するピクセル数が少ない方が解像度が低く、読み込みにかかる時間が少なくなります。細かい数値は実際にブログなどに貼って画像の画質を見ながら確かめてください)
  8. 編集が終わったら名前を付けて保存を選択
  9. ファイルの種類は「2D-JPEG」を選択し、保存して完了です。

 

はてなブログの画像の貼り方とサイズ調節

僕ははてなブログを利用していました。

そのため、今回ははてなブログへの画像の貼り付け方を紹介します。それと併せて写真のサイズの変更の仕方、調節の仕方を紹介します。

 

写真の貼り方としては、サイドバーの写真の投稿を選びフォルダの中から貼り付けたい画像を選択して記事の中に表示させます。

見たまま編集で写真のサイズを変更することもできますが、HTML編集で細かく写真のサイズを決めることができます。

 

そのやり方は画像を貼り付けてからHTML編集にすると、画像のコードの終わりが多分「/></p>」などとなっているはずです。

基本的にはこのような終わりのコードの少し前あたりのスペースにコードを挿入すれば問題なく適用されるはずです。

 

この「/></p>」の前に一マス空欄を開けて、半角で width=”数値”といれると画像の横幅を固定できます。

例)width=”200″ /></p>

width=”300″ /></p>

 

画像のコードの終わりがこのようになります。

画像の大きさを表す数値は、実際に記事の中で画像のサイズを見ながら調整してください。

 

同じようにheight=”数値”を入力すると画像の高さのサイズも指定することが出来ます。

AMP対応させているページの画像サイズを固定するためには横幅・高さともに入力しないとエラーになってしまうので注意してください。

 

終わりに「リサイズ・圧縮は難しくない」

画像のリサイズ、貼り付けの仕方の説明は以上となります。

一度やり方を覚えてしまえば難しいことではありません。

 

リサイズに少し手間はかかりますが、画像のサイズが大きいままブログに貼るのは良くないですからね。

ブログは小さいことの積み重ねなので、サイズの大きい画像が大量にあるとサイトが重くて読み込めなくなってしまいます。

また新たにリサイズについて新しい情報を得た場合には追記いたします。

 

それでは、今日がかけがえのない日となりますように…

 

コメント

タイトルとURLをコピーしました