html img src use <filename>?param - html

Question

I have 3 different sizes for the same image.
Can I achieve something like the following:
<img src='/path/to/image.jpg'></img>
<img src='/path/to/image.jpg?small'></img>
<img src='/path/to/image.jpg?large'></img>
I have tried the above but it instead shows image.jpg

Answer 1

The browser doesn't understand what you're trying to do. Why not append the size to the end of the image, like so:
<img src='/path/to/image.jpg></img>
<img src='/path/to/image.jpg_small></img>
<img src='/path/to/image.jpg_large></img>

Answer 2

I would suggest to keep the same image and add some css style to each one, instead of calling the same image 3 times from it path something like:
html code
<div>
<img src="/path/image.jpg" width="100" height="100">
</div>
<div id="scale-up" style="height: 230px">
<img src="/path/image.jpg">
</div>
<div id="scale-down" style="height: 57px">
<img src="/path/image.jpg">
css code
img {
vertical-align: middle;
height: 100%;
}
#scale-up {
height: 230px;
}
#scale-down {
height: 57px;
}

Answer 3

If you want filenames to look like (on server):
fd11f91bb8361030bdc09d8b8ed4f88e?w=200&h=76&f=png
You need to url encode them when requesting to server. For example using http://meyerweb.com/eric/tools/dencoder/
So url encoded file will look like:
fd11f91bb8361030bdc09d8b8ed4f88e%3Fw%3D200%26h%3D76%26f%3Dpng
So in your case it should be:
<img src='/path/to/image.jpg'></img>
<img src='/path/to/image.jpg%3Fsmall'></img>
<img src='/path/to/image.jpg%3Flarge'></img>

Answer 4

Like #Leo mentioned, using html-tags (or css) is much easier here than a url-based approach. (which would require server logic)
The html-tag resizing would look like:
<img src="/path/to/image.jpg" width="100" height="100">
You mention that you dislike how that might increase the bandwidth usage. This shouldn't be a problem as long as your website uses caching on the images. (it will only download the image once then, and just resize the same image locally for the different tags)

Answer 5

I would suggest
<img src="/path/to/image.jpg"></img>
<img src="/path/to/image_small.jpg"></img>
<img src="/path/to/image_large.jpg"></img>
to keep the file extension.