Image Sizes - are they working for you?

An adult webmaster resource...

Written by Tom from Tom's Newbie Booster

While not the most interesting of subjects, image sizes are still something that need to be looked at when it comes to making adult websites. After all - we probably work more with these image things than any other kind of webmaster. We've got big pictures, preview pictures (or 'thumbs'), ad graphics of various sizes - and a whole lot more to work with.

The HTML image size setting is often abused, used incorrectly, or left out completely on adult pages. As we'll discover - this can cause problems.

Two types of image sizes

First a quick trip back to basics. There are really two kinds of 'image sizes' that adult webmasters need to be concerned about:

1) The file SIZE (how much computer hard disk space each picture takes up) eg. a picture which is 50kb in file size. This is also how much bandwidth the image would eat up if a surfer were to look at it on their browser (which also downloads it to 'their side').

2) The image WIDTH and HEIGHT. What it's physical dimensions are in pixels. Every image on the web is basically a square or a rectangle. It has a width and a height which can be measured in pixels.

If you look at this image:
Example 1

... it is a picture which measures 535 pixels along the top and then 355 pixels down the side.

Even images which appear NOT to be square:

Example 2

Really are:

Example 3

... it's just that we can make some parts of an image transparent so that the surfers don't see it, and the image 'looks' like it's an irregular shape. This image is a plain old square and it's dimensions are 400 x 400 pixels.

In short - all images have a WIDTH and a HEIGHT.

Image sizes and webpages

It doesn't matter whether you use an html editor program (like Frontpage), or whether you create the code from scratch by hand in something like notepad - the end result is the same. We're generating an HTML webpage. And when you add an image to your webpage - you're inserting what's called an 'image tag'. The image tag will always really look something like this:

<img src="image1.jpg">

But this HTML image tag has two very important settings which either the webmaster or the HTML editor you're using can insert. Those settings are the width and height that we've just been looking at. The image tag above is really incomplete. If we were to do things properly, we should really tell the image tag how wide and how tall the image is. The correct tag should look like this:

<img src="image1.jpg" width="400" height="120">

Perfect!

Adding the width and height in the HTML gives the browser important information about the images on the page.

Why bother with the image width and height sizes at all?

Although your pages will still load up if you don't put the image width and height in there, I'd still urge anyone in this business to get into the habit of doing so. The reason for putting them in there is simple: it ensures that your webpage will appear the way that you want it to appear - as soon as the page loads.

When you specify the image sizes in your webpage itself, it lets the browser know from the INSTANT it visits the page all the information it needs about that image's size. It can then lay the page out properly even though the images have not loaded up fully. Without this info - the page can appear to 'jump around' as it loads.

The browser can find the image sizes itself by looking at the images but it's better to put them in yourself. I know not everyone DOES bother with the width and height tags - but I like to get things right. I've also seen some galleries and adult pages where webmasters didn't put the sizes in and some very strange things happened while the page loaded.

In short - if you want to get things 'spot on' - add in the image sizes!

A common mistake

Do not resize your images in the HTML!
Do not resize your images in the HTML!
Do not resize your images in the HTML!

What does that mean?

Take a look at this picture:

Example 4

... nothing wrong with that right? I mean it's just our sexy model lying on a bed in thumbnail image form. But there's a major blooper hidden within this page. Because I've not actually CREATED a thumbnail image in my photo editor software. I've merely altered the image's width and height setting in my HTML code:

<IMG SRC="sexy-breasts/pictures/01.jpg" WIDTH="150" HEIGHT="120" BORDER="2">

When this image is still really the same HUGE size:

Example 5

... so we're loading up that HUGE image just to show the surfers that little thumb. This will use a hell of a lot more bandwidth and make sure the page loads at a snail's pace. So there's a way you can ABUSE the image width and height settings too - which is kinda common with new sites or galleries.

ALWAYS create separate images - THUMBNAIL images - rather than shrinking the pics in the webpage in the manner described above.

Here's more help on creating 'real' thumbs:

Thumbs in 60 seconds
http://www.tomsnewbiebooster.com/thumbs-in-60-seconds.html

Back to basics - Thumbnail Galleries...
http://www.tomsnewbiebooster.com/thumbnail_gallery_basics.html

Don't squish your models!

Another important thing with image sizes (and this also applies to any time you resize an image in your photo editing software too...) is to not 'squish' the pictures. Always maintain the 'aspect ratio' of an image. YOU set one side of the image's size (any - it doesn't matter) and let the software work out what the other size should be.

Here's a BAD example:
Example 6

The model looks 'weird' because I just guessed both sides of the image in pixels and then forced the photo editor software to follow my commands. What I really should have done was to select 'constrain proportions' (this might be called something slightly different in your software) and keep the proportions of this thumb the same.

Here's a GOOD example:
Example 7

Ah that's better. Our model can breath again and she's in the correct proportions.

Squished (out of proportion) thumbs make your page look sloppy and don't show your sponsors in a favourable light. Who wants to look at squished models?

How do I know if my software is inserting the image sizes for me?

Create your webpage and then preview it in a web browser. Then go to VIEW at the top of the page and choose SOURCE from the menu. Then go down to one of the image tags on the page and see if the image sizes are being added in. If they're not - ask on the board for help with your particular bit of software.

How big is my image?

If you're coding the HTML by hand - use NoteTab - it inserts the image sizes automatically for you. OR right click on the image in windows explorer and choose PROPERTIES. This will give you more info on the image than you ever wanted to know - but the image width and height will also be in there. Type those values into the image tag.

Further reading:

Images Check List
http://www.tomsnewbiebooster.com/image-check-list.html

Adding Images
http://www.geocities.com/SiliconValley/Campus/1924/image.html

How to include an image in your page
http://www.andykillworth.co.uk/html/images.html

Hope this helps and have a great TUESDAY!!!

TOM ^"^

ICQ 12616560
Email tom@tomsnewbiebooster.com