Member Avatar for stupidenator

Hi everyone,
I am making a small web site to post images onto. The images that I have are all over 1024x768 pixels in size. I want to make an index page with smaller versions of the images that the visitor can click on that will open up the larger images. What I am wondering about is displaying these thumbnail images. At first, I was just changing the width and height attributes in the <img> tag, but the image files were too big and the page took way too long to load. Is there any other way I can display thumbnails of an image without having to create a second, scaled-down version and saving it to the directory? Thanks for any help in advance.
Nick

  • 5 Contributors
  • 4 Replies
  • 240 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by amanda112

Dani AI

Generated

Short answer: changing the width/height attributes only alters the displayed dimensions; the browser still downloads the full image file. That is why the index page remained slow — was correct. Thumbnails must be smaller image files (or cached resized copies) to save bandwidth and improve load time.

Practical options:

  • Preferred for a small site: create thumbnails at upload time with a server-side image library (GD, ImageMagick, Pillow, Sharp, etc.) and store them alongside the originals (filename suffix like _thumb.jpg or a separate /thumbs/ folder). Serving pre-made thumbnails gives the fastest, simplest result.
  • If originals already exist and re-uploading is impractical: implement on-demand resizing that creates a small image on first request and caches it on disk or in object storage. This avoids repeated CPU work and keeps response time acceptable after the first request.
  • For occasional manual needs, an offline batch tool or an online resizer (single-image) is fine, but not for large galleries.

Use responsive markup and lazy loading so browsers request the appropriate file:

<img src="images/photo-400.jpg"
     srcset="images/photo-400.jpg 400w, images/photo-800.jpg 800w, images/photo-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     loading="lazy"
     alt="...">

This requires having multiple sizes available (generated at upload or on-demand).

Performance and safety tips: generate only 2–4 useful sizes (thumbnail, small, medium, large); serve modern formats (WebP/AVIF) with fallbacks; add Cache-Control headers or use a CDN; strip unneeded EXIF/metadata and re-encode uploads to avoid malformed or malicious payloads. As observed, server-side resizing works well but introduces extra complexity; as and noted, online tools exist for quick fixes but do not scale for galleries.

Recommended Answers

All 4 Replies

Member Avatar for peter_budo

No, because you will always access this bigones no matter how mutch you resize them, their are still same data size. You better do scale-down version of them.

Member Avatar for Dani

If you are using a server-side language, such as PHP, you can use image magik (or equivalent) to dynamically scale down the images. This is most likely more trouble than it's worth, unless your entire site is dynamic already.

http://www.imagemagick.org/script/index.php

Member Avatar for inetwiz

Check out Free Online Image Resizer/Converter. You can resize your image on the fly without having to download any software. You can also convert your image format to JPG, GIF, PNG, BMP during the resizing process. They also offer a downloadable version that allows you to resize multiple images in an entire folder all at once.

Member Avatar for amanda112

I think If you are using PHP, you can use image magic (or equivalent) to dynamically scale down the images.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.