About Resizing Images
Article ID: KB101299
Making an image smaller...
For newbies to web developing, a common mistake is taking a large graphic
(from a scanned picture or digital camera), placing it on a web page, and
click-dragging the corners to make the picture smaller.
Why is this a mistake? Because while the display size of the image has
changed, the file size of the actual image has not changed. This means
that your viewer will be downloading a 2.5 MB image, when all they really
need to download is a 15-20 KB web-optimized image. (Furthermore, resizing a
large image to a small image will actually result in a loss of display quality,
as the browser tries to compensate by displaying an approximation of the larger
image.)
The best approach to placing images on a web page is to first use an image
editor to size the graphic to the exact size that you want it to be on your web
page. Quality image editors will also allow you to further optimize your image
for displaying on the internet. Sizing and optimizing your images can make your
page load many seconds faster and keep your visitors from losing patience.
Making an image larger...
Another common mistake is putting an image on a page, and click-dragging the
corner to make the image stretch to fit. Anyone who has tried this knows that
the quality of the image is almost unpresentable when an image is really
stretched:
Similar to making a large image small, the best thing that you can do is make
the image the size you want it to be on a web page, and save it that way. If you
only have a small graphic, you may unfortunately be out of luck. Try to track
down a different but similar graphic to use instead. If you have a larger
version of the graphic, start with that and, in your imaging program, modify the
graphic to be the size you want it to be on the web page.
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al1043/kb101299.htm
permalink to this article:
http://www.pixelmill.com/support/kb101299.htm
Back to top