web design issue

[a2j-godfather]

I want to design a website for my sister about her squirrel but the problem am facing is that she wants to use a drawing she did for her homepage -after scanning it though- but the image size is 320x140px.

if i just put the image there, it will take time to show on the homepage for those still using dial-up, so what is the remedy?

and can use slice a image without using imageReady but only photoshop?

[Centauri]

320 x 140px is not very big. If that is optimised through the Photoshop "save for web" as a jpg file, it should end up no bigger than around 20k, which will be fine. Slicing an image does not make it load faster anyway - as there are more requests to the server to get each bit, the load time would probably be slower.

[a2j-godfather]

Thanks for the help but i guess i didnt explain myself better.

I open the image with firefox just now and its not okay, i mean i want the image to be the index page, that is i want the image to cover the whole viewer's browser, understand? how can i accomplish that? pls

[Centauri]

If you want the image to stretch the full size of the browser window, it can be done by setting the width and height of the image to 100% and absolutely positioning the rest of the page over top, as in this example (http://www.cssplay.co.uk/layouts/background.html). However, this can result in distortion of the image if the aspect ratio does not match the user's screen size, and will definitely result in loss of image quality especially if the image is small to start with.

[a2j-godfather]

Centauri, i really appreciate the help but am new to all this and just finished learning html and learning dreamweaver cs3 now but i dont know much about css now.

what you think will be the best way to achive my sister's aim : making the image the website opening page. making it stretch the full size of the browser window is great but that wont be the only page on the site, there must be where to "click and enter" button or text.

I have attached the image to this thread,maybe you could view it and determine how best to do this.

I really hope you can help me much more, as this will goa long way to helping me start off my web design or development.

thanks.

[Lightlord]

Your going to have to determine what trade offs you can live with.

i.e. the bigger the image.. the larger the pic size will be.

Those using broadband.. its less of an issue. Since you mentioned dial up..its always going to be a big factor with any large graphics.


As far as making the pic larger..

re-scan it a higher resolution 300dpi or higher
Then resize the image at 72 dpi with a width of 780 width keeping the aspect ratio. This will keep the image from distorting. Optimized it for the web using rgb 8 web only colors.

If you have adobe image ready it will help alot but is not neccessary.

See which format bmp, png, jpg etc gives you a decent final picture with the smallest size. Then save it as a background in your page properties in dreamweaver.

odds are it going to bigger than 20k. The only other option is putting it on the website, where it doesnt fill the whole browser if dial up loading is too slow. Or top centering it in your html page at i.e. 400 or 500 and running a a background color.



LL

[Centauri]

Due to the image being taller than it is wide, and a computer monitor is the other way round, stretching it won't really work that well. Stretched in width and height, it will be very distorted - stretched to the screen width, half the image will be off the bottom of the screen - stretched to the height, it may look silly on a widescreen monitor.

This will probably be better a fixed width, and the dimension Lightlord has suggested will work down to 800x600 screens fine. A little experimenting has shown that if the text is removed from the image and replaced with actual browser text, you should be able to get it down to around 30k or so, which would be reasonable.

Web design is quite often about picking the best compromise.

[a2j-godfather]

thanks lightlord and centauri for the helps,truely appreciated.

i will get to rescan the image as lightlord said but i done,how do i put the "click here to enter" on the image on the page?

if i do as lightlord say to make the image background,it wont be the same as if the image on place on the page,not as a background,i mean in terms of visibility and sharpness,right?

i was thinking of maybe slicing the images into bits,then using tables to get them back together, maybe the download time will reduce,hum?

if you in my position,what will you do to make the image cover the page and also have a "click here to enter" stuff?

[Lightlord]

Centauri mentioned something I failed to bring up. Remove the text from the image. I guessing you added it to the picture after it was scanned.

The image quality as a background will be the same as if you manualy stick it in the web page. Provided you dont modify any settings like transparency, filters. As far as slicing, it wont load faster per say. More than not in this situation, it will just allow them to see a little more progress as it loads. You will probably save more download time in this scenario by just adding the text to the html page and not to the picture. Since its a drawing, its alot more forgiving in clarity than having to resize perfect circles/ovals.

1. scan image at 300 dpi and higher

2. save it a wherever you want the file to be saved to.

3. Open the file using photo shop? (guessing you might be using it) resize image at 72 dpi and 780 or 800 (whatever width you want) keep aspect ratio the same. (If photo shop) under the file menu <save for web>

4. In dreamweaver go to page properties (select the file as the background) I cant remember if the background will show or not. If it doesnt.. load it as a tracing imaging. The you will be able to see it on ther page.

5. Put your text boxes and tables/columns etc where ever you want. Preview it in your web browser.

That should do the trick.

LL

[a2j-godfather]

thanks, i will give that a try

[BFCS]

You could but a relink in to the html coding.
zyra.org (http://www.zyra.org.uk/relink.htm) shows you how. If you put the image in a div tag in dreamweaver and resize it as necessary. That way you don't have to warp it by resizing it out of proportion. The relink will take the user to the other page automatically after a set number of seconds.

In this (http://www.secretsites.com/do_dont_part1.jsp) website there are dos and don'ts when designing/ building a webite... One of the points is not to use flash intros. This could refer to other intros too. If your sister still wants to use an intro then fair enough.

I'm not too sure if this helps but it's another way of doing roughly the same thing.