Scaling IMG

Discussion in 'HTML' started by Roy Schestowitz, Apr 21, 2005.

  1. I have been been searching the Web, trying to find a way of resizing images
    while retaining the original aspect ratio. I know I can use 'height' and
    'width', but finding out the necessary values for many images is laborious.
    Is there an equivalent (with or without CSS) to 'scale' in LaTeX? For
    example <img scale="80%" src="myimage" />?

    Thanks in advance,

    Roy

    --
    Roy S. Schestowitz
    http://Schestowitz.com
    Roy Schestowitz, Apr 21, 2005
    #1
    1. Advertising

  2. Roy Schestowitz

    Mark Parnell Guest

    Previously in alt.html, Roy Schestowitz <>
    said:

    > I have been been searching the Web, trying to find a way of resizing images
    > while retaining the original aspect ratio.


    Even a basic image editing program should be able to handle that.

    > I know I can use 'height' and
    > 'width', but finding out the necessary values for many images is laborious.


    Yes, but resizing images in HTML is a bad idea anyway. Use a proper
    image editor.

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
    alt.html FAQ :: http://html-faq.com/
    Mark Parnell, Apr 21, 2005
    #2
    1. Advertising

  3. Mark Parnell wrote:

    > Previously in alt.html, Roy Schestowitz <>
    > said:
    >
    >> I have been been searching the Web, trying to find a way of resizing
    >> images while retaining the original aspect ratio.

    >
    > Even a basic image editing program should be able to handle that.



    Although it is not a perfect analogy, it is similar to saying "I can make
    this Web page in Word and it looks okay on my computer". I want to use the
    powers of HTML/CSS rather than editing images.


    >> I know I can use 'height' and
    >> 'width', but finding out the necessary values for many images is
    >> laborious.

    >
    > Yes, but resizing images in HTML is a bad idea anyway. Use a proper
    > image editor.


    But that's done off-line. What if I want to have one image displayed in two
    different forms (sizes) without duplicating? Also, resizing in the usual
    way involves no smoothing.

    Roy

    --
    Roy S. Schestowitz
    http://Schestowitz.com
    Roy Schestowitz, Apr 21, 2005
    #3
  4. Roy Schestowitz

    Mark Parnell Guest

    Previously in alt.html, Roy Schestowitz <>
    said:
    > Mark Parnell wrote:


    [Resizing images]
    >> Even a basic image editing program should be able to handle that.

    >
    > Although it is not a perfect analogy, it is similar to saying "I can make
    > this Web page in Word and it looks okay on my computer".


    Your original request bears more similarity to that analogy than my
    answer does.

    > I want to use the
    > powers of HTML/CSS rather than editing images.


    It's like saying you want to display the image with a yellow background
    instead of blue using HTML and CSS. The height and width of an image are
    an intrinsic part of the image itself, and thus are best changed in a
    program designed for that purpose.

    >> Yes, but resizing images in HTML is a bad idea anyway. Use a proper
    >> image editor.

    >
    > But that's done off-line.


    Well not necessarily, but in most cases it is, yes.

    > What if I want to have one image displayed in two
    > different forms (sizes)


    Upload 2 copies of the image in different sizes.

    > without duplicating?


    You only upload the smaller one and put up with the ugly enlargement. Or
    you only upload the larger one, and anyone on dialup will hate you
    because they have to download the larger file, even if they are only
    looking at the smaller one.

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
    alt.html FAQ :: http://html-faq.com/
    Mark Parnell, Apr 21, 2005
    #4
  5. Roy Schestowitz

    Toby Inkster Guest

    Roy Schestowitz wrote:

    > I have been been searching the Web, trying to find a way of resizing images
    > while retaining the original aspect ratio. I know I can use 'height' and
    > 'width', but finding out the necessary values for many images is laborious.


    Set a width and the height will automatically adjust itself.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Apr 21, 2005
    #5
  6. Mark Parnell wrote:

    > Previously in alt.html, Roy Schestowitz <>
    > said:
    >> Mark Parnell wrote:

    >
    > [Resizing images]
    >>> Even a basic image editing program should be able to handle that.

    >>
    >> Although it is not a perfect analogy, it is similar to saying "I can make
    >> this Web page in Word and it looks okay on my computer".

    >
    > Your original request bears more similarity to that analogy than my
    > answer does.


    I read the original message again. I struggle to see how it is so, but like
    I already said, it was not a good analogy. It's the use of a program that
    is not ideal for the job...

    >> I want to use the
    >> powers of HTML/CSS rather than editing images.

    >
    > It's like saying you want to display the image with a yellow background
    > instead of blue using HTML and CSS. The height and width of an image are
    > an intrinsic part of the image itself, and thus are best changed in a
    > program designed for that purpose.


    One could argue that a better environment should intergrate Web design with
    graphical design.

    >>> Yes, but resizing images in HTML is a bad idea anyway. Use a proper
    >>> image editor.

    >>
    >> But that's done off-line.

    >
    > Well not necessarily, but in most cases it is, yes.
    >
    >> What if I want to have one image displayed in two
    >> different forms (sizes)

    >
    > Upload 2 copies of the image in different sizes.
    >
    >> without duplicating?

    >
    > You only upload the smaller one and put up with the ugly enlargement. Or
    > you only upload the larger one, and anyone on dialup will hate you
    > because they have to download the larger file, even if they are only
    > looking at the smaller one.


    Good point. I might try that.

    --
    Roy S. Schestowitz
    http://Schestowitz.com
    Roy Schestowitz, Apr 21, 2005
    #6
  7. Roy Schestowitz

    Mark Parnell Guest

    Previously in alt.html, Roy Schestowitz <>
    said:
    > Mark Parnell wrote:
    >
    >> You only upload the smaller one and put up with the ugly enlargement. Or
    >> you only upload the larger one, and anyone on dialup will hate you
    >> because they have to download the larger file, even if they are only
    >> looking at the smaller one.

    >
    > Good point. I might try that.


    <sigh> The point was *not* to do that. Neither option is a good one. The
    best option is to change the image itself. There are various automated
    tools available if you have a large number of images you don't want to
    do manually.

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
    alt.html FAQ :: http://html-faq.com/
    Mark Parnell, Apr 21, 2005
    #7
  8. Roy Schestowitz wrote:
    > Mark Parnell wrote:
    >
    >
    >>Previously in alt.html, Roy Schestowitz <>
    >>said:
    >>
    >>
    >>>I have been been searching the Web, trying to find a way of resizing
    >>>images while retaining the original aspect ratio.

    >>
    >>Even a basic image editing program should be able to handle that.

    >
    >
    >
    > Although it is not a perfect analogy, it is similar to saying "I can make
    > this Web page in Word and it looks okay on my computer". I want to use the
    > powers of HTML/CSS rather than editing images.
    >
    >
    >
    >>>I know I can use 'height' and
    >>>'width', but finding out the necessary values for many images is
    >>>laborious.

    >>
    >>Yes, but resizing images in HTML is a bad idea anyway. Use a proper
    >>image editor.

    >
    >
    > But that's done off-line. What if I want to have one image displayed in two
    > different forms (sizes) without duplicating? Also, resizing in the usual
    > way involves no smoothing.
    >
    > Roy
    >


    If you want to have two different sized images, use the smaller one to
    link to another page that contains the larger one. Use text to explain
    that clicking the image will load a larger file. That way anyone who
    doesn't want to waste the bandwidth doesn't end up downloading the
    larger one.

    Or use text links that point to each one. Then the person viewing the
    page can choose which to see.

    Maybe provide a much smaller thumbnail on the first page with the two
    links below them as below:
    ______
    | |
    | |
    | |
    | |
    |______|
    Link to small image
    Link to large image

    ~Senti
    Sentient Fluid, Apr 21, 2005
    #8
  9. Roy Schestowitz

    Toby Inkster Guest

    Roy Schestowitz wrote:

    > One could argue that a better environment should intergrate Web design with
    > graphical design.


    Why? Why not integrate a web design tool with a relational database
    management system instead? Or with a document version management tool?
    Either would make just as much sense.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Apr 21, 2005
    #9
  10. In article <d47all$2oe9$>,
    says...
    > I have been been searching the Web, trying to find a way of resizing images
    > while retaining the original aspect ratio. I know I can use 'height' and
    > 'width', but finding out the necessary values for many images is laborious.
    > Is there an equivalent (with or without CSS) to 'scale' in LaTeX? For
    > example <img scale="80%" src="myimage" />?
    >
    > Thanks in advance,


    Do it with the appropriate software. Here's why: if you image is
    600x600 pixels and weighs 200k, "scaling" it in HTML or CSS will simply
    result in the download of a 600x600 pixel, 200k image being displayed
    poorly. The poor sucker at the end of the line still has to download
    the image at full size.

    --
    Hywel
    Hywel Jenkins, Apr 21, 2005
    #10
  11. Roy Schestowitz

    dorayme Guest

    > From: Roy Schestowitz <>
    > Organization: Sirius Cybernetics Corporation
    > Newsgroups: alt.html
    > Date: Thu, 21 Apr 2005 05:35:50 +0100
    > Subject: Scaling IMG
    >
    > I have been been searching the Web, trying to find a way of resizing images
    > while retaining the original aspect ratio. I know I can use 'height' and
    > 'width', but finding out the necessary values for many images is laborious.
    > Is there an equivalent (with or without CSS) to 'scale' in LaTeX? For
    > example <img scale="80%" src="myimage" />?
    >
    > Thanks in advance,
    >
    > Roy



    If you must, and don't want to calculate the percentages and want to put the
    dimensions to reserve a space in the HTML, you could make a small
    spreadsheet calculator and have it handy. Say, A1 and A2 are the width and
    height. You have B1 to enter the percentage you want to reduce it by. In C1
    you have a formula something like =SUM((B1*A1)/100) while in C2 you have
    =SUM((B1*A2)/100). You just have to enter the height and width of the actual
    and the percentage you want reduced. If, God forbid, you want to increase by
    a percentage, you need to add a bit to the formulae, "A1+" and "A2+" (I
    don't know how it works in MS software but it has to be simple and similar)

    But not a good idea as others have pointed out. If you want to do it right
    and want a quick way, I can recommend my own method: in Photoshop I have
    scripted it so the F1 key brings up the image size dialog box, it being the
    commonest thing when readying pics for the web. In the dialog box, if you
    have "constrain proportions" ticked, just enter one figure for width
    (usually but handier to use height for portrait size) - the software has the
    calc built in and the other dimension appears.

    Handy too is dragging the pic to a browser, the dims often show up in the
    title bar. If you use Toby Inkster's point, you just set one dim and get the
    other from the browser...

    dorayme
    dorayme, Apr 21, 2005
    #11
  12. Roy Schestowitz

    dorayme Guest

    > From: Hywel Jenkins <>
    > if you image is 600x600 pixels and weighs 200k...
    > Hywel


    I have had little success explaining to people, who send overly large pics
    for screen viewing on dialup, the difference between file size and image
    size. The relationship is intertwined but your use of the concept of
    "weight" is very nice indeed and I will try it - with your permission of
    course... :)

    dorayme
    dorayme, Apr 21, 2005
    #12
  13. Toby Inkster wrote:

    > Roy Schestowitz wrote:
    >
    >> One could argue that a better environment should intergrate Web design
    >> with graphical design.

    >
    > Why? Why not integrate a web design tool with a relational database
    > management system instead? Or with a document version management tool?
    > Either would make just as much sense.


    I think that when you take this too literally, then yes, it does not make
    sense. What I suggested was closer coupling. For example, a Web browser or
    server-side functionality that can re-size images and smooth them (for
    better appearance). This can save Webspace and bandwidth at the expense of
    computational power.

    Here is another example: You mentioned version management tool. What about
    CVS-managed projects that then have, let us say, doxygen generated and
    uploaded onto a Web server. Would a Wiki with some extra functionality be
    better? No generation of pages and no upload is involved...

    Roy

    --
    Roy S. Schestowitz
    http://Schestowitz.com
    Roy Schestowitz, Apr 22, 2005
    #13
  14. Hywel Jenkins wrote:

    > In article <d47all$2oe9$>,
    > says...
    >> I have been been searching the Web, trying to find a way of resizing
    >> images while retaining the original aspect ratio. I know I can use
    >> 'height' and 'width', but finding out the necessary values for many
    >> images is laborious. Is there an equivalent (with or without CSS) to
    >> 'scale' in LaTeX? For example <img scale="80%" src="myimage" />?
    >>
    >> Thanks in advance,

    >
    > Do it with the appropriate software. Here's why: if you image is
    > 600x600 pixels and weighs 200k, "scaling" it in HTML or CSS will simply
    > result in the download of a 600x600 pixel, 200k image being displayed
    > poorly. The poor sucker at the end of the line still has to download
    > the image at full size.


    It might be too late to point this out, but image size does not matter as it
    is a page that I only use myself (a presentation). What's more, I cannot
    process the images offline because I do not know what size I want them to
    be. I wish to be able to change the size in the source and then refresh the
    page. I cannot measure distances in the page to check for good fit because
    font size is determined on the fly, depending on the content, screen size,
    etc. If I need to do all of this about 30 times, then it becomes
    impractical.

    You would be in trouble if you had to process images in order for LaTeX to
    fit figures properly in the page. This is something which involves a lot of
    iterations.

    Roy

    --
    Roy S. Schestowitz
    http://Schestowitz.com
    Roy Schestowitz, Apr 22, 2005
    #14
  15. Roy Schestowitz wrote:
    > For example, a Web browser or server-side functionality that can
    > re-size images and smooth them (for better appearance). This can save
    > Webspace and bandwidth at the expense of computational power.


    Er... what? How does making visitors download a larger image than
    necessary save bandwidth? Seems to me like it wastes it.
    Leif K-Brooks, Apr 22, 2005
    #15
  16. In article <d49egt$190h$>,
    says...
    > Hywel Jenkins wrote:
    >
    > > In article <d47all$2oe9$>,
    > > says...
    > >> I have been been searching the Web, trying to find a way of resizing
    > >> images while retaining the original aspect ratio. I know I can use
    > >> 'height' and 'width', but finding out the necessary values for many
    > >> images is laborious. Is there an equivalent (with or without CSS) to
    > >> 'scale' in LaTeX? For example <img scale="80%" src="myimage" />?
    > >>
    > >> Thanks in advance,

    > >
    > > Do it with the appropriate software. Here's why: if you image is
    > > 600x600 pixels and weighs 200k, "scaling" it in HTML or CSS will simply
    > > result in the download of a 600x600 pixel, 200k image being displayed
    > > poorly. The poor sucker at the end of the line still has to download
    > > the image at full size.

    >
    > It might be too late to point this out, but image size does not matter as it
    > is a page that I only use myself (a presentation). What's more, I cannot
    > process the images offline because I do not know what size I want them to
    > be. I wish to be able to change the size in the source and then refresh the
    > page. I cannot measure distances in the page to check for good fit because
    > font size is determined on the fly, depending on the content, screen size,
    > etc. If I need to do all of this about 30 times, then it becomes
    > impractical.


    Then do it server-side with PHP and GD2.

    >
    > You would be in trouble if you had to process images in order for LaTeX to
    > fit figures properly in the page. This is something which involves a lot of
    > iterations.


    Who cares? What's LaTeX got to do with your question?

    --
    Hywel
    Hywel Jenkins, Apr 22, 2005
    #16
  17. Roy Schestowitz

    Sid Ismail Guest

    On Fri, 22 Apr 2005 08:41:09 +1100, dorayme <>
    wrote:

    : If you must, and don't want to calculate the percentages and want to put the
    : dimensions to reserve a space in the HTML, you could make a small
    : spreadsheet calculator and have it handy. Say, A1 and A2 are the width and
    : height. You have B1 to enter the percentage you want to reduce it by. In C1
    : you have a formula something like =SUM((B1*A1)/100) while in C2 you have
    : =SUM((B1*A2)/100). You just have to enter the height and width of the actual
    : and the percentage you want reduced. If, God forbid, you want to increase by
    : a percentage, you need to add a bit to the formulae, "A1+" and "A2+" (I
    : don't know how it works in MS software but it has to be simple and similar)


    Why goes through all this?! If the original image is 500x300 and you
    want to resize to 80% of original, simply state a width of 400, and
    leave the height off. The aspect ratio will be maintained.

    However, as others have said, resize in a graphics editor and have
    both versions up. People on dial-up will be loathe to wait.

    Sid
    Sid Ismail, Apr 22, 2005
    #17
  18. Roy Schestowitz

    Sid Ismail Guest

    On Fri, 22 Apr 2005 00:53:49 +0100, Roy Schestowitz
    <> wrote:

    : What's more, I cannot
    : process the images offline because I do not know what size I want them to
    : be.


    I know. Email me.

    Sid
    Sid Ismail, Apr 22, 2005
    #18
  19. Roy Schestowitz

    kchayka Guest

    Roy Schestowitz wrote:
    >
    > I read the original message again. I struggle to see how it is so, but like
    > I already said, it was not a good analogy. It's the use of a program that
    > is not ideal for the job...


    Huh? Are you saying that a graphics program is not ideal for the job of
    resizing images, but using HTML and CSS to do that same job is?

    Boy, does that sound backwards!

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
    kchayka, Apr 22, 2005
    #19
  20. Roy Schestowitz

    dorayme Guest

    > From: Sid Ismail <>
    >
    > On Fri, 22 Apr 2005 08:41:09 +1100, dorayme <>
    > wrote:
    >
    > : If you must, and don't want to calculate the percentages and want to put the
    > : dimensions to reserve a space in the HTML, you could make a small
    > : spreadsheet calculator and have it handy. Say, A1 and A2 are the width and
    > : height. You have B1 to enter the percentage you want to reduce it by. In C1
    > : you have a formula something like =SUM((B1*A1)/100) while in C2 you have
    > : =SUM((B1*A2)/100). You just have to enter the height and width of the actual
    > : and the percentage you want reduced. If, God forbid, you want to increase by
    > : a percentage, you need to add a bit to the formulae, "A1+" and "A2+" (I
    > : don't know how it works in MS software but it has to be simple and similar)
    >
    >
    > Why goes through all this?! If the original image is 500x300 and you
    > want to resize to 80% of original, simply state a width of 400, and
    > leave the height off. The aspect ratio will be maintained.



    Fair enough if leaving the height out will reserve the right space in the
    browser before the pic loads. Will it? If it does and does this quicker than
    it can load the big file, you have a point. I would be impressed: the
    browser (this right?) would need to know the height by calculating it from
    the width specified in the html *and* the pics normal width (embedded in the
    pics file). And, for this to be useful, it would need to be able to do this
    quicker than just loading the file and not bothering to reserve a space.

    No dispute in all this on whether it is *really* worth it! I was just making
    a conditional point...

    dorayme
    dorayme, Apr 23, 2005
    #20
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?REVXcmlnaHRfQ0E=?=

    Control Scaling???

    =?Utf-8?B?REVXcmlnaHRfQ0E=?=, Apr 26, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    326
    Steven Cheng[MSFT]
    Apr 27, 2005
  2. news.austin.rr.com

    how to download img from html img tag

    news.austin.rr.com, Apr 27, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    505
    Steve C. Orr [MVP, MCSD]
    Apr 27, 2005
  3. Philipp Lenssen

    Problem: <img></img>

    Philipp Lenssen, Jun 27, 2005, in forum: XML
    Replies:
    15
    Views:
    754
    David Håsäther
    Jul 3, 2005
  4. Jopek
    Replies:
    7
    Views:
    397
    dorayme
    Apr 26, 2009
  5. Replies:
    7
    Views:
    177
    Tad McClellan
    Jun 22, 2006
Loading...

Share This Page