サムネイル画像のサイズについて
- サムネイル画像のサイズが元の画像よりも大きくなる理由はなぜでしょうか？PNGCauntletで圧縮したにも関わらず、サイズが増えてしまうのはなぜでしょうか？
- サムネイル画像のサイズが元の画像よりも大きくなる理由について、PNGCauntletやphotoshopの影響も考えられますが、詳しい理由を教えてください。
- サムネイル画像のサイズが元の画像よりも大きくなる理由について、PNGCauntletやphotoshopの設定や工程の影響を考慮しながら説明してください。
- ベストアンサー
サムネイル画像の画像サイズについて。
【htmlで使用する画像ファイル】 1.png(800*800) 2.png(800*800) と二つの画像ファイルがあります。 これを以下手順でサムネイル画像を作成しました。 ・PNGGauntlet で画像圧縮 ・photoshopCS4で 画像サイズを半分(400*400)にして、サムネイル画像として保存(頭にtを付ける。) 【できたサムネイル画像】 t1.png(400*400) t2.png(400*400) 【質問】 元の画像(tなし)より、サムネイル画像(tari)のほうがサイズが大きくなるのです。 元の画像サイズ < サムネイル画像サイズ 1.png(800*800) 100k t1.png(400*400) 200k 2.png(800*800) 100k t2.png(400*400) 200k PNGCauntletで圧縮したものを、サムネイル化しているのにサイズが大きくなっています。 なぜこのようなことが起こるのでしょうか。photoshopのせいなのでしょうか。 このサイズの大きくなった画像を、htmlのimgタグのサムネイル画像として使用するべきなのでしょうか？ ご教授よろしくお願いします。
- ShiftTail
- お礼率80% (423/528)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
サムネイルの目的は、データ転送量を少なくして、ネット負荷を軽減させたりページ表示を早めるためです。圧縮率を調整してデータ量を少なくしたほうが良いでしょう。ソフトの能力でそれができないなら、単に表示画像を小さくするほうが良いです。特に印刷やスマートホンでの利用が考えられるページでしたら、それらの解像度はパソコンのディスプレイより高いため画像が荒れて表示されます。 <img src="./images/png/1.png" width="400" height="400" alt="何たらが何とかしている"><!-- 画像実サイズは800×800 --> とか。スタイルシートで画像を合わせているときなど img{display:block;width="100%" height="auto";} とかでは、大きくなってもきれいに見えますし・・
関連するQ&A
- サムネイル画像を１枚画像にするソフトウェア
(1)サムネイル画像（組写真？）を作製し、(2)そのページ全体を適当なファイルサイズに圧縮できる様な簡単なソフトウェアを探しています。 デジカメで撮影した500KBくらいの写真６枚程度で１枚のサムネイル画像を作製し、かつそれをネットで送れるくらいのサイズに圧縮させたいと考えています。 Photoshopなどを使えば良いと思いますが、初心者でもできるようなソフト（フリーかシェアウェアだとうれしい）をご存知であれば教えてください。 サムネイル画像の作製と、その後の圧縮は別ソフトになってもかまいません。
- ベストアンサー
- 画像・動画・音楽編集
- 縮小したファイルサイズのサムネイルを出す画像掲示板を探しています
以下の条件に該当する掲示板を探しているのですが… １、画像のUpができる。 ２、コメント、返信を入れられる。 ３、通常表示で、縮小画像のサムネイルが見える。 ４、縮小画像をクリックすると、Upした元の画像が別ウィンドゥで見られる。 ５、縮小画像は、元の画像をサイズ的に縮小表示したモノではなく、ファイルサイズも圧縮したものが欲しい。 １～４までを満たす掲示板はたくさんあるのですが、５の条件を満たすものがなかなか見つかりませんでした。大量の画像を表示するスタイルを考えているので、縮小表示では凄いトラフィックがかかります。そのため、例えば100KBの画像をUpしたら、サムネイルのファイルサイズは5KBくらいの画像として動的に新規作成してくれるようなものを探しています。 フリーウェア、シェアウェアを問いませんので、情報をお持ちの方は教えて頂ければ幸いです。また、CGIのカスタマイズが必要だとしたら、どのくらいの難度になるのでしょうか？当方は、CGIの知識はあまりないので、ちょっと見当がつかないのです。
- ベストアンサー
- CGI
- サムネイル画像のサイズ変更
windowsXPでフォルダの中の多数の写真ファイル(jpg)を閲覧するとき、表示方法を縮小版にしています。 サムネイル画像が並んで表示されていますので目的の画像を探すのに便利なのですが、私にとってはサムネイル画像のサイズがちょっと小さいのです。 縮小版（サムネイル画像）のサイズを変更する事は出来ないでしょうか？
- ベストアンサー
- Windows XP
- サムネイルから元のサイズの画像の右クリック禁止
HTMLタグでの右クリック禁止は認識しています。 ただ、サイト上はサムネイルを使っているのですが、サムネイル画像は右クリック禁止タグで設定できますが、サムネイルをクリックして元のサイズの画像が別ウィンドウで開いた画像は保存禁止はできないのでしょうか？ 右クリック自体が、すでにあまり意味のないことは知っていますが、知人から了承を受けて頂いた画像をあまり簡単に持っていかれるのは困るので設定しておきたいと思いました。 良い方法があれば、ご教示ください。
- ベストアンサー
- HTML
- サムネイル作成プログラム
こんにちは。 PHPのサムネイル作成プログラムについて、質問があります。 無料のサムネイル作成プログラムを使用させていただいております。 小さいサイズの画像ですと、問題なく小さなサムネイル画像を作成してくれますが、５メガほどの画像だと、エラーになってしまいます。 サイズが大きすぎるのだと思いますが、メモリの制限を増やせば、成功するというような記述を見つけました。 おおよそ、ファイルサイズの何倍ぐらいのメモリサイズが必要なのでしょうか？ ５～６メガのファイルを扱いたいのですが・・・。 もしかして、Webサーバ上で、５～６メガのサイズの圧縮処理は無謀なのでしょうか？ 何卒よろしくお願いいたします。
- ベストアンサー
- PHP
- 画像解像度とサイズと配置
Painter Essentials4とPhotoshopCS4とillustratorCS4を使用しています。 Painter Essentials4で、キャンバスサイズ横1600ピクセル×縦1200ピクセル、 解像度350で、画像を作成しました。 その画像を同じキャンパスサイズのillustratorCS4に配置したら、 とても小さな画像になってしまいました。 同じサイズにするにはどうしたら良いでしょうか？ また、キャンバスサイズ横1600ピクセル×縦1200ピクセル解像度350で、 Painter Essentials4やillustratorCS4で背景画像を作ったとします。 それを、PhotoshopCS4のキャンパスサイズ横600ピクセル×縦600ピクセル、 解像度350の所に配置すると、Photoshopで設定したキャンパスサイズに 合うように縮小されてしまいます。 これを、元のサイズで配置するにはどうしたら良いのでしょうか？ 画像解像度の違いでサイズが変化するのは解ったのですが、 どうしたら元のサイズで配置出来るのでしょうか？ Photoshopとillustratorのバージョン9を使用していた頃は こんなことはなかったのですが…。 よろしくお願いします。
- ベストアンサー
- グラフィックソフト
- javascriptを使い、サムネイル表示
サンプルＨＰ⇒http://cartown.jp/detail_dt.php?car_id=1990056 のような、サムネイル画像と拡大画像を表示させる記述方法を 教えてください。 下記のような回答文を確認したのですが、img要素を列挙する記述やonclickイベントを結びつける記述すらわかりません。こんな超初心者ですが、よろしくお願い致します。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>サンプル</title> <script type="text/javascript"> function showImg(){ document.getElementById("image").src=this.src; } function setup(){ var thumbnails=document.getElementsByName("thumbnail");//name="thumbnail"とついているimg要素を列挙 for(var i=0;i<thumbnails.length;i++)thumbnails[i].onclick=showImg;//↑で列挙したものにonclickイベントを結びつける } window.onload=setup; </script> <style type="text/css"> .main td{ width:300px; height:300px; } </style> </head> <body> <table border class="main"> <tr> <td><img id="image" width="300" height="300"></td> <td> 文章 </td> </tr> </table> <!--ここから下の画像はサムネイル用ではなく、上に表示する予定の画像と同じもので width属性とheight属性を指定して大きさを変えています。(ここでは全部300x300の画像とします。)--> <table border> <tr> <td><img name="thumbnail" src="img1.png" width="48" height="48"></td> <td><img name="thumbnail" src="img2.png" width="48" height="48"></td> <td><img name="thumbnail" src="img3.png" width="48" height="48"></td> <td><img name="thumbnail" src="img4.png" width="48" height="48"></td> <td><img name="thumbnail" src="img5.png" width="48" height="48"></td> </tr> <tr> <td><img name="thumbnail" src="img6.png" width="48" height="48"></td> <td><img name="thumbnail" src="img7.png" width="48" height="48"></td> <td><img name="thumbnail" src="img8.png" width="48" height="48"></td> <td><img name="thumbnail" src="img9.png" width="48" height="48"></td> <td><img name="thumbnail" src="img10.png" width="48" height="48"></td> </tr> </table> サムネイルクリックで拡大します。 </body> </html>
- 締切済み
- JavaScript
- サムネイル画像を綺麗に表示したい。
ネットショップページを作成しています。 サーバーに保存された商品画像をウェブページ上で綺麗にサムネイル表示（縮小表示）をさせたいのですが、 <img src="画像名" width="横" height="縦"> とHTMLタグで縮小表示させると画像が荒くなってしまい困っています。 画像数が多く、小さいサイズの画像を保存しなおして、 サーバーにアップして表示するのは避けたいと考えています。 （サーバーの容量も小さく。。。） どうしたら良いか教えていただけますか？
- 締切済み
- その他（インターネット・Webサービス）
- 画像のimgタグと同時にそのタグが入ったhtmlファイルを出力するソフト
画像のimgタグと同時にそのタグが入った htmlファイルを出力するソフトはないでしょうか？ 例えば「A.png」「B.png」～「Z.png」までの画像ファイルがあるとします。 そのソフトを使うと「A.html」「B.html」～「Z.html」が作成され、 「A.html」の中には「A.png」を表示するimgタグが、 「B.html」の中には「B.png」を表示するimgタグが、 という具合に出来るといったものです。 説明がわかりづらければ補足しますので仰ってください。 よろしくお願いいたします。
- 締切済み
- フリーウェア・フリーソフト
お礼
ありがとうございます。 やはり大きなサイズのサムネイルは使わない方がよさそうということですね。 表示画像の縮小でやってみます。 情報ありがとうございました。