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.
Website images problem
- Thread starter zramaek
- Start date
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)
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
It would appear that the easiet option, is to create images that are only 760px wide, and then set all your widths to percentages.
http://www.bluejar.com/improve-your-websites-screen-resolution-compatibility/
http://www.thesitewizard.com/archive/compatibility.shtml
http://www.yourhtmlsource.com/accessibility/testing.html
It would appear that the easiet option, is to create images that are only 760px wide, and then set all your widths to percentages.
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 raw html..
btw I found this useful link....
http://techjunk.websewak.com/handling-screen-resolution-issues-in-javascript/
I think it'll help
how to do this ??
btw I found this useful link....
http://techjunk.websewak.com/handling-screen-resolution-issues-in-javascript/
I think it'll help
Last edited:
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:
do something like this:
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...
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'
Hey i think this code works on the content
Is it because of the image resolution ,this problem occurs ??
dunno fo surei'll try the code on ma sysrem and them reply..or mayb u can do that even before i start
typin'
Hey i think this code works on the content
Code:
<img src="image.jpg"
onload="this.width=getWidth( 150 );this.height=getHeight( 200 );">
Last edited:
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
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..
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..
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,
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,