根据窗口大小发送正确尺寸的图像

Question

I'm developing an image hosting website, mainly just to learn the ropes, and I'm using php and mysql, as well as html, css, and javascript.

As it is, on an image page, it loads up the full-size image, and the squishes it into a box in the layout. I get that that isn't the right thing to do; I should be sending the image that is already the right size. But here's the trouble: the box that the image is resized to fit into is based on the browser window's size. So it's a larger image if the page is larger, and a smaller image if the page is smaller.

One solution I thought of would be to store the image in several different sizes, then use javascript on the page to determine the window size, then the box's size, and then use that information to choose the right image to load. But all that inline javascript seems like it would slow things down a lot as well.

What's the best solution for this? What if the only thing I'm aiming for is speed? What if I have limited space to store multiple sizes of images? What if I have limited computing power?

I'm trying to learn about this stuff; not just implement it. Indecisive answers that analyse various options would be great.

Answer 1

You should be able to detect the window size in JavaScript before the document even loads, so the would really be no performance hit in assessing the window sizing and then loading the proper image (which would have been a second request anyway). You should just check the window size, create a single PHP script which takes the desired image size, and then use that to pull in the proper image after the document is loaded by attaching arguments to the img src attribute. Really no matter how you do it along those lines the performance impact will be insignificant since images are by default distinct requests and that will be your bottleneck.

If you have limited space and a lot of images you could use PHP to dynamically create the image per request (with adjusted caching). If you had limited computing power you'd want to cache more heavily or you could have the images pre-made if you have a small set of possibilities. Alternately you could have certain "milepost" types of images since image resampling with a large variance normally has to be done in multiple passes, so each milepost could allow for fewer passes to sample down to the desired exact size.

If transfer speed was theoretically a major concern you could also use image slicing. Since most clients will allow for 2+ consecutive connections to the same host you could split the image if it was large enough to warrant it (offsetting the cost of request initiation) and then display the sections merged on the page (kind of like multiplexing).

Answer 2

Ok so what you are trying to attack is speed. Learning the "perfect" way is something to work up too.

A "perfect" solution, would be using a variety of images with different scales as uve described, or using vector based images that dont lose quality with scale.

This gets more into application architecture.

What you want is to learn though first are some basic javascript event handlers.

Learning the basics of dynamically resizing DOM elements is what you should look into.

If you are going to be dynamically resizing the height and width of images, you should research the .bind('resize') event.

Answer 3

I will try this:

• load a small image as a place holder
• use javascript to detect the window size
• make the ajax call to load the larger version
• Save that screen size into a cookie or session variable
• call the following images base on that variable
• detect resize event and update that variable

On the server, prepare several size at the time of upload.

Answer 4

When you say size do you mean in pixels or in kilobytes?

If in pixels, put your image in a box and use css to manipulate the image size. Set the css property of the img tag to be fluid. Use percentage based styling.

Example

.img_elem{ width: 100%; }

In html

<Div class"what-ever-ur-container-is">
     <Img class"img_elem" src"../path/to/file.jpg" />
</div>