html resize pics

R

rbt

What's a good way to resize pictures so that they work well on html
pages? I have large jpg files. I want the original images to remain as
they are, just resize the displayed image in the browser.
 
P

Peter Hansen

rbt said:
What's a good way to resize pictures so that they work well on html
pages? I have large jpg files. I want the original images to remain as
they are, just resize the displayed image in the browser.

These two things are mutually exclusive by most people's definition of
"work well". You can't push the resizing down to the browser *and*
"work well" when working well includes avoiding downloading massive JPGs
when only small images are to be shown.

Can you clarify what you really want? "resize ... image in the browser"
implies merely using "width" and "height" attributes to override the
size of the image *after* the whole thing has been downloaded, in which
case this would be solved with mere attributes on the IMG element.

-Peter
 
R

rbt

Peter said:
These two things are mutually exclusive by most people's definition of
"work well". You can't push the resizing down to the browser *and*
"work well" when working well includes avoiding downloading massive JPGs
when only small images are to be shown.

Can you clarify what you really want?

Sure, sorry. I use Python to generate html pages. I link to several
large images at times. I'd like to display a thumbnail image that when
clicked will go to the original, large jpg for a more detailed view.

"resize ... image in the browser"
implies merely using "width" and "height" attributes...

How does one do that and keep the original ratio intact?
 
D

Dennis Lee Bieber

Peter Hansen wrote:
"resize ... image in the browser"

How does one do that and keep the original ratio intact?
Well, Firefox seems to work with % sizes... But those are dependent
upon the Firefox window, not the original image size... Setting the
width to "25%" results in a dynamic resize to one quarter of the window
width (and the height seems to be proportional to the image, whereas
specifying both as "25%" results in scaling to the Firefox window shape)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<body>
<img src="_MG_0127.jpg"
alt=""
width="10%"
border="0">
</body>
</html>

But, as mentioned, this requires /dowloading/ the full image (this
test was from an 8MP camera -- 1.7MB as a JPEG)
--
 
P

Peter Hansen

rbt said:
I use Python to generate html pages. I link to several
large images at times. I'd like to display a thumbnail image that when
clicked will go to the original, large jpg for a more detailed view.

I use PIL with the thumbnail() function for that... depending on what
sort of web server/framework you are using, you could generate the
thumbnails dynamically, or you could pre-generate them and store both
files (this is probably the most common way to do it). The HTML, of
course, has to be generated to refer to the appropriate file: the IMG
source is the thumbnail, the anchor's href points to the larger image.

-Peter
 
R

rbt

Peter said:
I use PIL with the thumbnail() function for that... depending on what
sort of web server/framework you are using, you could generate the
thumbnails dynamically, or you could pre-generate them and store both
files (this is probably the most common way to do it). The HTML, of
course, has to be generated to refer to the appropriate file: the IMG
source is the thumbnail, the anchor's href points to the larger image.

-Peter

Thanks PIL is a very handy tool!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top