画像アップロード テクニック(2)

次回の投稿は11月1日の予定です。お待ちください。

ページへページへページへページへページへページへ

【ケース2】
目的  パソコン画面の横幅一杯の大きさの画像を表示する。
パソコン画面の横幅は1,366ピクセルもしくは1,024ピクセルが一般的です。
ケース2では1,366ピクセルのパソコンを想定したものです。
オリジナル画像を画像編集ソフト「PhotoScape」で開きます。
画像サイズ、ファイルサイズを確認し「リサイズ」ボタン右の[▼]をクリックします。
d0181824_10495725.jpg

画像サイズの調整リストが出て来ます。
リストには1,366ピクセルの値がありませんので、[幅の調整]をクリックします。
d0181824_10523369.jpg

幅の調整画面が出ます。幅を[1366]に書き換えて[OK]をクリックします。
d0181824_112933.jpg

画像サイズが横幅1366ピクセル×縦819ピクセルに加工されました。
サイズを確認して[保存]をクリックします。
d0181824_1165488.jpg

保存の画面が出ます。
画像サイズを小さくしたのでファイルサイズも小さくなる筈です。
ファイルサイズを確認するために、まずはJPEG品質を100%にして保存してみます。
JPEG品質のレバーをドラッグして100%にして、[名前を付けて保存]をクリックします。
d0181824_1181391.jpg

名前を付けて保存の画面が出ます。
保存場所を[デスクトップ]にし、ファイル名[・・・・100%]を入力し、[保存]をクリックします。
d0181824_1117520.jpg

保存され、元の画面に戻ります。
ファイルサイズを確認します。ファイルサイズが500KB以下になっていればこれで完成です。
この場合、835KBですから、JPEG品質を落としてサイズを小さくする必要があります。
[保存]をクリックしての手順で500KB以下になるJPEG品質を見つけます。
d0181824_11202946.jpg

JPEG品質をいろいろ変えて保存した画像ファイルです。
アップロードに使うのは500KBに近いJPEG品質97%の画像です。
d0181824_1133225.jpg

下の画像はJPEG品質97%をアップロードしたものです。
d0181824_11453997.jpg

上の画像タグをコピーして貼り付け、左配置(left)に書き換え、サイズを横160ピクセル×縦96ピクセルに書き換えます。(下の画像は記事の入力欄です)
d0181824_11521853.jpg

ブログには次のように表示されます。
d0181824_11453997.jpg

画像をクリックして別画面で見てください。
どちらの画像も横幅1,366ピクセルのパソコンでは柿の木が画面一杯に表示されます。
1,024ピクセルのパソコンでは柿の木ははみ出し、スクロールしないと見えない筈です。

【ケース3】
目的  パソコン画面の横幅一杯の大きさの画像を表示する。
今度は1,024ピクセルのパソコンを想定して画像を加工します。
加工方法はケース2と同じです。
幅の調整で横幅1,024ピクセルの画像を作り保存したものをアップロードすると、
d0181824_16475821.jpg

さらに画像タグを[・・・・|left|160|96]に書き換えると、
d0181824_16475821.jpg

画像をクリックして確認してください。
横幅1,024ピクセルのパソコンでは柿の木が画面一杯に表示される筈です。
横幅1,366ピクセルのパソコンでは両サイドに余白があります。

【ケース4】
目的  ファイルサイズを小さくする
ブログの最大画像サイズに加工してアップロードすれば、ファイルサイズを小さくできます。
私のパソコンは横幅が最大520ピクセルに設定してありますので、幅の調整で[520]にすれば、
横幅520ピクセルの画像を作ることができます。
加工して保存した画像をアップロードすると、
d0181824_16535784.jpg

さらに画像タグを[・・・・|left|160|96]に書き換えると、
d0181824_16535784.jpg

画像をクリックして確認してください。
画像の横幅は520ピクセルの大きさに表示される筈です。
パソコン画面の幅と比較してみてください。ご自分のパソコンが1024ピクセルであれば柿の木の写真は画面の約半分に見えると思います。
なお、ファイルサイズが500KBを超える画像は自動的に最大横幅に縮小されてアップロードされますから、オリジナル画像をそのままアップロードしても同じ結果になります。

【ケース5】
目的  ファイルサイズを小さくするために小さい画像をアップロードする。
横幅160ピクセルの画像を作ってみましょう。
幅の調整を[160]にしてリサイズします。
加工して保存した画像をアップロードすると、
d0181824_16541317.jpg

画像をクリックして出てくる画像の大きさは変わりません。

以上の説明は画面の拡大レベルを100%にしたときです。

【参考】
下の画像はデスクトップに保存した加工した画像ファイルです。
サイズ欄をみてください。
今回アップロードに使った画像は赤線を引いたものです。
d0181824_10425856.jpg

画像編集ソフト「PhotoScape V3.6.5」をインストールされていない方は下記参考にしてください。
画像編集ソフト「PhotoScape3.6.X」のダウンロード
Photoscapeのアップデート

今日はここまで、
今回、興味深い発見がありました。
次回の「まとめ」でお話しします。

by PC-otasukeman | 2013-10-28 12:00 | Comments(6)

Commented by banban0501 at 2013-10-29 12:18
画質が綺麗にでるような画像アップの方法
覚えておきたいものです

以前教えていただいた 拡大表示できる
画像アップの方法と似ていますね
Commented by パソコンお助けマン at 2013-10-30 09:04 x
★ banban0501 さん
目的によって使い分けると良いと思います。
以前は画像サイズを小さくする方法を説明しましたが、今回は画像品質を落としてファイルサイズを小さくする方法を追加しました。
Commented at 2013-10-30 18:09
ブログの持ち主だけに見える非公開コメントです。
Commented by パソコンお助けマン at 2013-10-30 20:37 x
★ 鍵コメ さん
ありがとうございました。
これで全て分かりました。
Commented by shizuo7f at 2013-10-31 21:06
「JPEG品質をいろいろ変えて…」。 
いろんな制約をクリアし、写真加工でサイズを変える。
ブログなども個性が出せて、楽しいですよねよね~。

お助けマンさんが日ごろ仰っている。「原理原則」を知る。
いろいろ勉強させて頂いています。
基本を知れば、応用ができますよね。
Commented by パソコンお助けマン at 2013-11-01 15:41 x
★ shizuo7f さん
いつも、嬉しいコメントをお寄せ頂きありがとうございます。
先日、近所の方から、iPad miniについて質問があり、にわか勉強をして対応させて頂きました。
未知の機器でも基本が分かれば理解も進みます。
原理・原則・基本はパソコンの世界では特に大切ですね。
名前
URL
削除用パスワード

<< 画像アップロード テクニック(...    画像アップロード テクニック(1) >>