🔒 Locked

simple HTML/ browser question

Started by AndreTheGiant Nov 1, 2005 at 1:10 PM 4 replies 700+ views

Original Post

Nov 1, 2005 at 1:10 PM

Suppose I am making a webpage (one single page) that will display 100 800x600 jpegs using the IMG tag. This page will probably be slow to load. Now suppose I use the WIDTH and HEIGHT attributes of the IMG tag to set the image sizes all to 80x60 (ie, thumbnails). Will the page load faster? In other words, does your browser downlaod the entire image files and then just show you 80x60 versions of them? Or is the browser smart enough to only download every tenth row/column of pixels, therefore making the page load 10 times faster? Does it depend on the browser? On the server? Or would I have to have 2 copies of every picture - a large and a thumbnail - to accomplish what I'm asking? Thanks.

capn_midnight

Nov 1, 2005 at 1:14 PM

no, the page will load just as slow, the browser has no way of retrieving just a thumbnail from the server, because the server would first have to generate it.

benryves

Nov 1, 2005 at 1:15 PM

No, however big you set the image in the img tag the browser will always download the full-size version. There is no way to only download bits of the image as far as I know, and that would have to be handled server-side.
You can sort of get around this by using special versions of the images (interlaced GIFs or progressive JPEGs) that download a low-quality version first and slowly up the quality as the image downloads. It's best just to linkify a bunch of pre-made thumbnails, though (some tools, eg XnView are great at batch-processing and creating thumbnails).

AndreTheGiant

Nov 1, 2005 at 1:19 PM

Ok thanks,
and sorry for the dumb question.

Here, take some rating++

capn_midnight

Nov 1, 2005 at 1:21 PM

using System;using System.IO;using System.Drawing;namespace TestSpace{	public class MakeThumbs	{		public static void Main(string[] args)		{			string here = Directory.GetCurrentDirectory();			DirectoryInfo di = new System.IO.DirectoryInfo(here);			FileInfo[] files = di.GetFiles();			foreach(FileInfo file in files)			{				try				{					Bitmap temp = new Bitmap(file.FullName);					Bitmap thumb = new Bitmap(temp, new Size(temp.Width/10, temp.Height/10));					int point = file.FullName.LastIndexOf(".");					string thumbFileName = file.FullName.Substring(0, point) + "_thumb.png";					thumb.Save(thumbFileName, System.Drawing.Imaging.ImageFormat.Png);				}				catch(Exception)				{					Console.WriteLine("{0} is not an image, skipping.", file.Name);				}			}		}	}}

this should work.

Nik02

Nov 1, 2005 at 2:38 PM

If your server supports PHP and it's GD Library extension (not to be confused with GameDev.net :)) you could resize the images on the server side on-demand.

On an IIS server, you can create a System.Drawing.Image object instance and use it to server-side resizing.

No matter which of these you use, you would finally write the image to the response stream as binary data, along with a header describing the content-type as the image type of your choice.

EDIT: Source code available from me if needed!

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.