低解像度の画像を使ってサムネイルを作成するにはどうすればいいですか？

Question

高解像度画像（6000x4000 jpegなど）があり、3列のギャラリーを作っています（アンプラッシュのギャラリーのように見えます）。だから私は低解像度サムネイルのギャラリーにしたいと私はそれらをクリックすると、私は新しいタブで開いた完全な画像を持っている。私はCSSを使ってimgsを含むdivの幅を400pxに設定しましたが、それはページレイアウトの外観にのみ影響します。私は400px divsの画像を読み込んでもまだ6000x4000なので、スクロールするとページはフリーズします。そして、私はそれらのdivで低解像度の画像を読み込みたいが、低解像度のすべてのjpgで別のフォルダを作成せずにisteadをロードする。私は、html、css、js、jquery、phpを使ってページに読み込まれるイメージの解像度を下げることができますか？

Answer 1

すでにイメージをクライアント側にロードしている場合は、解像度を下げるのに本当の意味はありません。サーバー側のソリューションを使用してイメージを生成するよりもはるかに高速です。

Answer 2

あなたの質問に対する簡単な答えは次のようなものです：いいえ、HTML、CSSまたはJavaScriptで画像の解像度を変更する方法はありません。

適切なソリューションは、サーバーにイメージを展開する前にイメージのサイズを変更することです。バージョン400pxの1つの幅を作成し、ソースを保持します。

その後、ギャラリーの小さなバージョン（サムネイルとして）を使用して、それらをソースファイルを指すリンクでラップすることができます。

pageweightが大幅に減少し、クリックしてユーザーにされると誰もが、ギャラリーを訪問したときに、これらの巨大なイメージをロードする必要がありますその方法は、（私はまだお勧め6000x4000として、この目の前に警告のいくつかの種類を入れたいオリジナル画像をダウンロードすることができます単一の画像の場合でも非常に多くのデータのように聞こえる）。

例：

<figure> 
    <a href="path/to/huge-source.jpg"> 
     <img src="path/to/thumbnail.img" alt="Some alternative text" /> 
    </a> 
    <figcaption>Beware: the link points to a source file with a lot of data to download (resolution: 6000x4000)</figcaption> 
<figure> 

・ホープ、このことができます。