Graphics on a website

Hi I just wanted to know if anyone had some tips about putting graphics on a web page?

I want to make me own .png graphic and use it as a header on my web page. I know the the rule where you should keep the size the same as the dimensions you saved it as. For example if you save the file in photoshop and it is height=125 width=100, you should include the same in the code of your web site.

Can anyone tell me the dimensions of a web page header? I want to be able to open fireworks click new and set the dimensions to when putting the graphic on the web page it wont look blurry or stretched. Thanks… hope this makes sense!

That’s fine for saving your images. But, if you run into any problems while creating your graphics and have to have a larger size, that is when you run into the “blurring” problem.

About image size, I try to keep my images exactly the size I need to save bandwidth. There is no point in saving a logo for the web in a larger size than what you will use.

Just always remember that you should make your images bigger than you need. Because shrinking the size of an image should not blur the image. But if you try to make the image larger, that’s when you run into problems.

I don’t care what size my logo, I look at the area where I need to put it and determine which dimension is important to me, i.e. height or width.

Let’s say I have a logo that is 800 pixels high and 400 pixels wide. I really need only a height of 350. I just do a simple algebraic equation 800/400 = 350/x.
X then equals 175

So my final img will be: <img src=“sitepoint.png” width=“175” height=“350” alt=“” title=“” border=“0” />

This works every time for me

There’s no set width or height. It’s up to you do decide on the width of your page elements. These days, typical width of website content varies (very roughly) between 860px and 1040px, but it can be wider or narrower too.

If you don’t set width and height on an image, the browser will display the image at its natural width and height anyway, so it’s purely an option to specify width and height.

EDIT: So, the main derterminant as to whether or not the image will be blurry depends on the file size when you save it. In Photoshop, it’s usually pretty reliable to choose the Save for Web option. Not sure how Fireworks handles this.

Sweet, I’ll check it out, thanks for the advice!

It’s worth pointing out that these days, a lot of people browse the web on their cellphones and mobile devices, thereby the amount of space available will be heavily restricted. My advice is to try and keep your site as flexible as possible, and while images will always have specific dimensions (based on what you save them as), ensuring things don’t get too cramped or stretched should be at the back of your mind when you decide how wide or high your site is. :slight_smile:

That leads me to another question. When I make the browser window smaller my whole designs shifts and becomes scattered. The navigation bar moves, text shifts all over. How do I make sure everything stays the same when no matter the size of the browser window? Thanks!

Alas, that’s hard to achieve… I think the most important lesson you can learn is not to expect your work to be “pixel perfect” or appear identically across all systems, resolutions, browsers and devices. In regards to your particular issue, if you apply a certain width to the container element (such as the DIV where the elements are contained), they will have a guaranteed amount of space to work with (if a fixed measurement like PX or EM is used), however this will cause horizontal scrolling if the screen is smaller than the available space - not the best thing for users. You may want to investigate perhaps re-examining how you position your stuff and keep the fixed positioning to a minimum to help reduce the level of issues occurring. Hope that’s helpful :slight_smile:

Yeah it helps, I just want to find out how this is done visually. Thanks for your help, I appreciate your feedback!!