HEY
HONEY...
I SHRUNK (OR BLEW UP)
THE GRAPHICS!
A tutorial in resizing graphics by manually defining the number of pixels
(small dots that make up the image) in the html coding.
-------------------------------
While cruising through this site, you may find a graphic that would be just perfect, but it's to large (or to small) to use it where you would like on your page. If you have an image program, such as Paintshop Pro and are familiar with how to use it, then you can just resize it and then place it into your site.
However, if you don't have an image program, that doesn't mean you are stuck with the graphic the size it is. You can resize it by making changes in the html code by changing the image "attributes" Attributes are what define an image or text..telling it what to do and how to appear to the visitors browser. Text attributes include BOLD, ITALICS, FONT STYLE, SIZE..ETC. Image attributes usually deal with the placement of the image on the page <Center> and the SIZE of the graphic "width = and height =
The html code of the original graphic below defines
the size as width="240"
height="70"
Below is the same graphic. I just manually changed the Width and Height attributes simply by cutting the numbers in half. Now the size is defined in the html code as width="120" height="35"
You'll notice the graphic downsizes nicely, losing no quality.
However, try upsizing the graphic, as below,
and you'll see that the graphic loses it's sharpness. This graphics size
is defined in the html code as width="400"
height="120.
Images resize downward with much more clarity then they resize
upward.
When making an image larger, it's best to not make it any larger
then 25% of
the original image so as to maintain as much as the resolution of the original
as possible.
Below is the Original Image resized upward 25% of it's original size of
width="240"
height="70"
|
|
|
|
Original size |
New size (25% larger) |
I arrived the number I needed to increase the original
image by 25% by
multiplying the original width and heights numbers by 1.25
width="240" x 1.25 = new width of 300
height="70" x 1.25 - new height of 87.5
Notice how enlarging the
graphic by only 25% didn't cause it to lose as much resolution
as resizing it almost 50% of it's original size, as was done to the largest
graphic above.
I don't know about you, but I'm not to fond of math. That's why I tend to make the clipart on this site larger. It's just easier to downsize images and maintain the quality of the image. If you are wanting to downsize, just subtract the same number from both the height and width to maintain proportion. Or you can have fun and change the graphic by making it thinner and taller by subtracting more from one side then the other.
You will notice that I tend to design larger graphics as compared to many clipart sites on the net. I think offering larger graphics makes the graphics on this site more versatile since it's easier to reduce the size of a graphic, then increase the size of a graphic. If you need the graphic to be larger, then you're all set, if you need a smaller graphic, no problem. Just redefine the size attributes in the html!
If you don't see a size indicated in the html, you can add a size attribute to the code. If the graphic is defined only as <img src="village.htm> with no size attribute, and you want the size to be 150 pixels by 80 pixels, you can add width="150" height="80" to the code after the name of the image. Your code will then look like this <img src="village.htm" width = "150" height ="80"> and that will force the image to display that size.
MEMBERS ONLY: If you are using a template site that does not allow you access to the HTML coding and does not have instructions on how to resize graphics before loading them, just email me the name of the graphic, what page it is on, what size you would like it (either in inches or pixels) and I will resize it for you.
Hope this little tutorial on resizing graphics by changing
the graphics size
attributes in the html code has been a help.
ENJOY THE GRAPHICS, AND THE BEST OF
SUCCESS TO YOU
BOTH ON AND OFF THE SITE!
Use your browsers back button to return from whence you came.
Any comments or suggestions on this tutorial is always
welcome.
Email
©RealestateClipart.com 2000