Website images problem

zramaek

New Member
Messages
7
Reaction score
0
Points
0
I designed my images and site on a screen with 1440 x 900px resolution. So all of my images fit on my screen. Recently I have been informed that on a 1024 x 768px resolution, my images are way to large and the entire site just looks to big. I could really use some help on how to fix this problem.
 

Agenator

Member
Messages
341
Reaction score
0
Points
16
okay, so essentially it wont matter the resolution of the screen u designed it on but the resolution of the images themselves. Did you design the images at full screen on your monitor? I dont think you did. Post some of the images here and lemme take a look. I have a 24' mon. and design things just fine. I generally always (this is in photoshop) pick a standard size. I start with an 1000x1000 px canvas, design the site in the middle with the left over background on both sides. This will give you a good estimate of how many pixels each part of the image will be and how big it will look on most monitors. Then I crop each image out and insert into my code and Im shure you know the rest. The only solid way to tell if it will look good on another monitor is to simply view it on other monitors. That can be accomplished by posting here in the review my site. But essentially designing on one monitors resolution wont effect the actual image size but designing the site at a certain resolution will. If u need clarification just ask. Sorry if it was too simple or too complex, im just not shure how advanced or noobie you are at this (dont worry Im pretty much a noob too lol)
 

anuj_web

New Member
Messages
145
Reaction score
0
Points
0
I have the same problem...
i designed it on 800X600 and opened it on another 800X600 ..it was way too outside from where it should be
 

LHVWB

New Member
Messages
1,308
Reaction score
0
Points
0
I found some useful links about this issue by searching with google.

http://www.bluejar.com/improve-your-websites-screen-resolution-compatibility/
http://www.thesitewizard.com/archive/compatibility.shtml

http://www.yourhtmlsource.com/accessibility/testing.html
Otherwise, make the widths of all your page elements about 760 pixels wide. This will be small enough to fit nicely onto a 800x600 screen (and still fot the vertical scrollbar in). If it fits into that, that's fine. No more testing to be done.

It would appear that the easiet option, is to create images that are only 760px wide, and then set all your widths to percentages.
 

Agenator

Member
Messages
341
Reaction score
0
Points
16
um please correct me if im wrong but I dont believe that screen size would matter in this instance unless they where designing the page to be full screen. One thing to check, Ie's zoom feature. I was designing a page on IE, carelessly forgot that the page was zoomed in and spend a day trying to figure why it looked so big. But seriously if you design on an 800x600 and make the IMAGES size less than 800x600 they will and should be the same size on every montior. Just monitors with smaller resolution will make it look bigger since it will fill up more of the screen, not necessarily bigger images.
 

anuj_web

New Member
Messages
145
Reaction score
0
Points
0
I use a software to design my website.....
I work on 1024X768.....

As you have said to set the width of my webpage to 760 pix..how to do it ??
can u please tell this
 

kbjradmin

New Member
Messages
512
Reaction score
2
Points
0
i don't think there is any easy way to do it. you should use % in your measurements, instead of px.

are you using css or just raw html?
 

kbjradmin

New Member
Messages
512
Reaction score
2
Points
0
first of all, i would greatly suggest learning css.
that being said, if you have to use raw html, then say you want to do it with an image;

instead of:
Code:
<img src="#" width="300" height="150" />

do something like this:
Code:
<img src="#" width="24%" height="12%" />

these percentages are relative to the size of the web browser.


edit:

does this code resize the content or just the browser window???

if that code resizes the browser, there are three problems with this solution:

1) most of the time, if a website resizes the browser, most people will not like it and leave the site.

2) that wouldn't work for resolutions smaller than the site.

3) if you minimize the browser, and then reopen it, it goes back to the original size.


if that code resizes content, than you found what i've been looking for for years...
 
Last edited:

anuj_web

New Member
Messages
145
Reaction score
0
Points
0
I think the above code resizes the window...:( dunno fo sure
i'll try the code on ma sysrem and them reply..or mayb u can do that even before i start
typin' :D

Hey i think this code works on the content
Code:
<img src="image.jpg"
      onload="this.width=getWidth( 150 );this.height=getHeight( 200 );">
Is it because of the image resolution ,this problem occurs ??
 
Last edited:

zramaek

New Member
Messages
7
Reaction score
0
Points
0
When I said I designed it on my 1440x900px screen, all i meant was i designed it to look the best on my screen, but did not consider how it would look for others. here is the site I have been working on for an example of how the images are to large

http://www.zachrtest.x10hosting.com
 

anuj_web

New Member
Messages
145
Reaction score
0
Points
0
One method i read somewhere is to use a table or a form/frame and move all controls into it.

that way even if the screen resizes the frame/form/table wont so you can center the frame/form/table into the webpage .

But this way problem arises when accessing the control using code..
 

anuj_web

New Member
Messages
145
Reaction score
0
Points
0
Most people use 800x600 or 1024x786

make ur webpage in the above two resolution and put a msg that ths page is best viewed in.......

I have tried this on my website ..
 
Last edited:

future1

New Member
Messages
3
Reaction score
0
Points
0
I wouldn't try to fix your image sizes using code, because it seems like your images are massive.

If you design an image at 1440px x 900px, & your monitor size is 1440 x 900px, then that's how big the image is in size, not resolution. A smaller screen will then try to see that width of 1440px within it's window of only 800px.
You need to resize your original images to fit within smaller screens.

Resolution is all about the size of the pixels themselves, but a 700px image is still a 700px image, no matter what size resolution or screen size you are looking at it from.

Simply put, the image size needs to be matched to your target users computer resolution. eg. if only 2 of your users have huge monitors with high resolution, then they are the only ones that will be able to benefit from your images at the current target size on their screens.
If you want to have a wider audience, you need to design the original images in say 800x600 or 1024x768, because more screens will be able to show the entire image on the screen.

Please note: Image size is not the same as Image resolution. You can have a 300dpi image and a 150dpi image and they can both still be 700px wide. More dots per inch(dpi), will only enhance the quality(and file size) in most cases, but most older screens are still going to show the image the same size.
Just to let you know, the older screens are 72dpi and some newer ones probably go up higher to 96dpi (I think I've seen this on an LCD windows setting) - so if you make your images higher than say 100dpi, it's just a tax on filesize. If you are designing for print, then that's a different story...

Hope this helps,
 
Top