473,568 Members | 2,999 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Scale Image using CSS

Hello,

I am displaying an image on a few pages. The image size is 50 px
height and 50 px width.
In some pages I need the image to be 30x30 px in others 40x40 px and
in others 50x50px.

Can I scale the image using CSS?

Thanks,
Miguel
Jun 27 '08 #1
11 5805
On 2008-04-28, shapper <md*****@gmail. comwrote:
Hello,

I am displaying an image on a few pages. The image size is 50 px
height and 50 px width.
In some pages I need the image to be 30x30 px in others 40x40 px and
in others 50x50px.

Can I scale the image using CSS?
Yes, just set its width (or height, or both) to whatever you want.

e.g.

img.foo { width: 40px }

The browser will resize it but not very nicely. If you want better
quality, make up separate files for the different sizes using your
favourite image editor such as the GIMP.
Jun 27 '08 #2
In article <sl************ *********@bowse r.marioworld>,
Ben C <sp******@spam. eggswrote:
On 2008-04-28, shapper <md*****@gmail. comwrote:
Hello,

I am displaying an image on a few pages. The image size is 50 px
height and 50 px width.
In some pages I need the image to be 30x30 px in others 40x40 px and
in others 50x50px.

Can I scale the image using CSS?

Yes, just set its width (or height, or both) to whatever you want.

e.g.

img.foo { width: 40px }

The browser will resize it but not very nicely. If you want better
quality, make up separate files for the different sizes using your
favourite image editor such as the GIMP.
Going up or going down from native size determines the level of
'niceness'. I am taking the comparison between doing it yourself with
img programs and letting browser do it. And I suppose one can expect the
enlargement direction, being a rather impossibly difficult thing to do,
will be handled worse by a non-specialist program like a browser

There are upsides and downsides to the practice of allowing a browser to
do the sizing. The advantage is reduced author bother and having less
complex server files (less names, less files, often less folders). The
disadvantages are less quality. But the details of all this stuff I
leave out unless someone is particularly interested to pursue it with
open mind.

In my own practice, almost invariably, I prepare pics for the size I
want for each page and I reduce complications with naming by having
exactly the same names for all sizes but batch the different sizes into
separate folders. And I almost never increase the size of a picture, no
matter if I use the classiest software (there is some software that
makes claims to be able to enlarge well but they can never really
succeed, imo, without a developed AI - and none have this!).

Nevertheless, the question of quality of image for many pics on the web
is not as clear cut as it might seem. At least FF and Safari don't do
all that much worse to quality img software. One can pretty well see if
you look closely the difference when browser resizes up cf. with img
software enlargement (both doing a lousy job!). But in reduction, the
difference does not exactly scream out at you.

<http://dorayme.890m.co m/alt/browserReductio n.html>

--
dorayme
Jun 27 '08 #3
dorayme wrote:
>
Going up or going down from native size determines the level of
'niceness'. I am taking the comparison between doing it yourself with
img programs and letting browser do it. And I suppose one can expect the
enlargement direction, being a rather impossibly difficult thing to do,
will be handled worse by a non-specialist program like a browser
Getting something from nothing is always a tricky process except with
the fantasy in CSI....
>
There are upsides and downsides to the practice of allowing a browser to
do the sizing. The advantage is reduced author bother and having less
complex server files (less names, less files, often less folders). The
disadvantages are less quality. But the details of all this stuff I
leave out unless someone is particularly interested to pursue it with
open mind.
Another downside is bandwidth. A page of "virtual" thumbnails is
absolutely no savings other than "screenspac e" since the full data must
be downloaded regardless of the html attribute| css property
constraints. I just love those photographer online galleries with the 50
odd 50x50 "thumbnails " and a hefty multi-megabyte download! It is so
much fun watching those itsy little pics paint over the minutes....
>
In my own practice, almost invariably, I prepare pics for the size I
want for each page and I reduce complications with naming by having
exactly the same names for all sizes but batch the different sizes into
separate folders. And I almost never increase the size of a picture, no
matter if I use the classiest software (there is some software that
makes claims to be able to enlarge well but they can never really
succeed, imo, without a developed AI - and none have this!).
Sometimes, depending on the quality of the original image, subject
matter, and paying with filters and selective filtering you can get some
decent results. But there are definite limits. Just love those cop shows
where they have a 6 pixel enlargement of a ATM's snap of a license
plate, and poof! All 8 digits are clearly rendered! Yeah!
>
Nevertheless, the question of quality of image for many pics on the web
is not as clear cut as it might seem. At least FF and Safari don't do
all that much worse to quality img software.
Maybe the way some people use software, or really cheap consumer
software. Most browsers employ pixels dropping to reduce an image and in
no way is this close to anti-aliasing algorithms used by image editors
and depending on how much you reduce an image some sharpen or adaptive
unsharpen mask filter will most assuredly improve the result.

One can pretty well see if
you look closely the difference when browser resizes up cf. with img
software enlargement (both doing a lousy job!). But in reduction, the
difference does not exactly scream out at you.

<http://dorayme.890m.co m/alt/browserReductio n.html>
Kind of hard to say without seeing the original large image, but a quick
attempt, literally 30 seconds, with a little filtering and tricks to
remove some artifacts...

http://www.littleworksstudio.com/tem...specslarge.jpg
specslarge.jpg (JPEG Image, 600x451 pixels)

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Jun 27 '08 #4
Ben C wrote:
On 2008-04-28, shapper <md*****@gmail. comwrote:
>Hello,

I am displaying an image on a few pages. The image size is 50 px
height and 50 px width.
In some pages I need the image to be 30x30 px in others 40x40 px and
in others 50x50px.

Can I scale the image using CSS?

Yes, just set its width (or height, or both) to whatever you want.

e.g.

img.foo { width: 40px }

The browser will resize it but not very nicely. If you want better
quality, make up separate files for the different sizes using your
favourite image editor such as the GIMP.
As with almost everything, YMMV.

If you choose to use browser sizing, you'll probably want an
unsharpened base image. That's also true with resizing images in your
favorite image editor. Don't sharpen before resizing.

A more interesting example would have been to see the effect of
browser resizing on sharpened, or images with hard edges. That's where
you can expect some ugly results. Typically this is all about edges and
what happens to them.

Now, with my CMS stuff, I resize base images and have found that not
all resizing algorithms are similar (there's 10 or so that I know of).
And what works very well for one type of image, may work very poorly for
another.

I posted more info on this some time ago to a related group, and as
is often the case, no one was interested. My current favorite is
"Blackman". For large numbers of images that you want resized you may
wish to consider speed also. Once again, if you are rescaling different
kinds of images than I am, you may find something else works better.

If you don't have access to your image editors resize algorhithms,
google will yield some general techniques.

Although I never resize up browser images, scaling up a third on
"normal" images usually works fairly well.

Jeff
Jun 27 '08 #5
In article <a7************ **************@ NAXS.COM>,
"Jonathan N. Little" <lw*****@centra l.netwrote:
dorayme wrote:

Going up or going down from native size determines the level of
'niceness'. I am talking the comparison between doing it yourself with
img programs and letting browser do it. And I suppose one can expect the
enlargement direction, being a rather impossibly difficult thing to do,
will be handled worse by a non-specialist program like a browser

Getting something from nothing is always a tricky process
Yes. One tricky part of the process is to know what to add for what
purpose. Things machines are particularly bad at guessing purposes.
Never mind, other difficulties.

There are upsides and downsides to the practice of allowing a browser to
do the sizing. The advantage is reduced author bother and having less
complex server files (less names, less files, often less folders). The
disadvantages are less quality. But the details of all this stuff I
leave out unless someone is particularly interested to pursue it with
open mind.

Another downside is bandwidth.
This seemed too obvious to mention but I am glad you have. <g>

The point of my post and examples was simply that for a whole lot of
pics, a great many people would be none the wiser if the browser reduced
the px size (to take the more sensible direction) or it was done by a
quality image program. We are prone to say, as Ben said and I often say
and think, that browsers are lousy at it or not very good or some such.
But in fact they are not *all that bad* for a real lot of pics.

In a site devoted to quality photography, it would matter more than for
many other sites which use pics to illustrate things.
Sometimes, depending on the quality of the original image, subject
matter, and paying with filters and selective filtering you can get some
decent results.
Indeed. In fact, this is something I do often for print design work
where none of my own pics are suitable and it is a bother to go make
one. But when I do have access to something interesting but very small.
Given the level of abstraction that is suitable, one can make a super
large pic that is absolutely fine. But here we are getting away from the
idea of preserving the original. I also recognise your point that one
can do for the latter with a bit of filtering or other methods (heavy
re-touching being the extreme).

Nevertheless, the question of quality of image for many pics on the web
is not as clear cut as it might seem. At least FF and Safari don't do
all that much worse to quality img software.

Maybe the way some people use software, or really cheap consumer
software. Most browsers employ pixels dropping to reduce an image and in
no way is this close to anti-aliasing algorithms used by image editors
and depending on how much you reduce an image some sharpen or adaptive
unsharpen mask filter will most assuredly improve the result.
We all know the spiel. But there is another side to things which I was
hoping to draw your attention, one of actual results in the real world.
I was imagining a test that might surprise us all. Bu I won't describe
it unless anyone is real keen.
>
One can pretty well see if
you look closely the difference when browser resizes up cf. with img
software enlargement (both doing a lousy job!). But in reduction, the
difference does not exactly scream out at you.

<http://dorayme.890m.co m/alt/browserReductio n.html>

Kind of hard to say without seeing the original large image
This is a misunderstandin g. You can see the *relevant* original. That
was the whole point.

--
dorayme
Jun 27 '08 #6
In article <mZ************ *************** ***@golden.net> ,
Gus Richter <gu********@net scape.netwrote:
><http://dorayme.890m.co m/alt/browserReductio n.html>

Perhaps y'all can consider using this method (one image with the
thumbnail included):

<http://www.simplebits. com/bits/photo_zoom.html >
What quite is this relevant to, Gus?

--
dorayme
Jun 27 '08 #7
dorayme wrote:
In article <mZ************ *************** ***@golden.net> ,
Gus Richter <gu********@net scape.netwrote:
>>>><http://dorayme.890m.co m/alt/browserReductio n.html>
Perhaps y'all can consider using this method
(_one image with the thumbnail included_):

<http://www.simplebits. com/bits/photo_zoom.html >

What quite is this relevant to, Gus?
Hmmm, image resizing vs. 2-images ........

I "tried" to point out a third alternative. The link demonstrates the
use of _one_ image containing the small _and_ the large version. This
avoids the use of CSS resizing _or_ using 2-images. Isn't this quite
relevant?

Ignore the usage applied in the demo. Look at the image. Then re-apply
the principle to other uses whereby CSS resizing is not used and neither
are two separate images required.

--
Gus
Jun 27 '08 #8
In article <Be************ *************** ***@golden.net> ,
Gus Richter <gu********@net scape.netwrote:
dorayme wrote:
In article <mZ************ *************** ***@golden.net> ,
Gus Richter <gu********@net scape.netwrote:
>>><http://dorayme.890m.co m/alt/browserReductio n.html>
Perhaps y'all can consider using this method
(_one image with the thumbnail included_):

<http://www.simplebits. com/bits/photo_zoom.html >
What quite is this relevant to, Gus?

Hmmm, image resizing vs. 2-images ........

I "tried" to point out a third alternative. The link demonstrates the
use of _one_ image containing the small _and_ the large version. This
avoids the use of CSS resizing _or_ using 2-images. Isn't this quite
relevant?
Well, not really, no. Not saying what you offer is not interesting in
itself, Gus.

I was not merely outlining different methods of presenting the "same"
image but rather making a point about browser versus
image-software-preparation quality. Your photo_zoom is just another case
of the author doing the image work beforehand.

Here is one thing at the heart of what I am saying:

The average punter who looks at the average thumbnail would not have a
clue whether it was prepared "properly" or simply reduced by the browser.

--
dorayme
Jun 27 '08 #9
dorayme wrote:
>
Here is one thing at the heart of what I am saying:

The average punter who looks at the average thumbnail would not have a
clue whether it was prepared "properly" or simply reduced by the browser.
I agree. I also believe that in most instances CSS resizing is
acceptable, IMHO. As always, it depends .....

--
Gus
Jun 27 '08 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
1921
by: Ron Brennan | last post by:
Good evening. I'm looking for the recommended way to scale .jpg images smaller with the latest APIs. I think this would be JAI ImageIO and the ImageIO Tools API. I read somewhere that getScaledImage is not recommended. Is there someone out there who is current on this subject? Thanks, Ron.
3
3075
by: Lian | last post by:
Hi all, i find that when i widen a image,the height of the image become larger too. How can i make the image wider without keeping the scale, which means the height keep unchanged. Thank you for suggestions.
1
1593
by: Ron Eggler | last post by:
Hi, I made a script recognizing when the window is resized to scale a pic. it works fine on Mozilla, Netscape and Konqueror but in IE it always places a rutrn in front of the pic resized why? Thanks! Page: http://inetgate.ch/new/content.php
3
2751
by: UJ | last post by:
My client wants to have some text scale appropriately depending on the resolution of the screen. This is very much like the way that flash works in that as the area being displayed gets bigger, the font gets bigger, smaller - it gets smaller. Trying to write flash is turning out to have some problems and it sorta works (I found a library by...
0
1375
by: Terry Olsen | last post by:
I think I figured out how to put an icon on a button using the imageList. Is there a way I can scale the image or icon so that it will fill the button? No matter what size I make my button, the icon remains the same. *** Sent via Developersdex http://www.developersdex.com *** Don't just participate in USENET...get rewarded for it!
2
2298
by: allanon76 | last post by:
I need to create an Image with more then 256 gray scale. this is my code, i've some problem setting correctly the pixel value. any idea? There is another way to create an image with more then 256 gray Bitmap myBitmap = new Bitmap(256,256,PixelFormat.Format64bppArgb); BitmapData bmd = myBitmap.LockBits(new
3
8426
by: CG3000 | last post by:
I have an Image in a picture box in VS 2005 that I want to print using the following event handlers: Private Sub btnPrintLabels_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click Try Me.PrntDoc_Img.PrinterSettings.PrinterName = "Canon MF3110" Me.PrntDoc_Img.DocumentName = "Vitex Label" AddHandler...
19
4882
by: Matteo Migliore | last post by:
Hi! I've to scale a vector of numbers of size N to a vector of size M. The trasformation is like a zoom on images but I need on a vector. The second size can be M >= N or M <= N, M 0. The value for each element can be from 0 to 255. Is there some methods that can I use?
0
1237
by: Joel Hedlund | last post by:
Hi! I'm developing a pygtk application where I need to show images zoomed in so that the user can see individual pixels. gtk.gdk.Pixbuf.scale() seemed ideal for this, but if I set offset_x and offset_y to anything other than 0, the resulting image is heavily distorted and the offset is wrong. I've searched the internet for any snippet of...
0
7690
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7597
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
1
7654
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
7961
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6273
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5492
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5216
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
1
1206
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
930
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.