Image clarity on my website?
I am new to CSS, HTML and all things web design. I learned everything I know (which is not much) by watching youtube videos. I have been working on creating a website for my families restaurant for the last few months and its coming along rather smoothly. However, one thing that continues to bother me is the clarity of my images.
I have a 27' mac, I use photoshop to manipulate all my graphics, save them as .jpg... and on my computer it looks brilliant, the colors pop, the contents are sharp looking. Then when I go to view them on any other computer they just look...kind of blah. Any advice?
www.stefanoshams.com
More Questions From This User See All
Answers & Comments
Verified answer
this should have been posted on a web development section and not photography but here are some answers.
Welcome to the world of poorly calibrated monitors, difffernet HTML rendering engines and evolving web standards.
There could be plenty of things going on here. Your monitor might not be properly calibrated, the other monitors might not be properly calibrated.
If you are using html code to resize your images, they WILL look like crap as the rendering engine on most browsers does a horrible job of resizing images.
Now, here are a few coments on your site. Please don't take offence.
MAIN PAGE
1- Your front page generates 25 errors when I try to validate it as XHTML 1.0 Transitional (since that's the DOCTYPE you chose).
http://validator.w3.org/check?uri=http%3A%2F%2Fwww...
2- You have a dead image titled "fox and yelp reviews" on your man page.
3- Under IE7, you have small alignement issues with your Address and the "Welcome to our new website!".
4- Your main menu should be actual text and not images so that people with visual impairments can navigate the site and so that search engines can figure out what your site is about.
STEFANO'S STORY
1- You generate 8 errors when I try to validate.
http://validator.w3.org/check?uri=http%3A%2F%2Fwww...
2- Small alignement problems in IE7 between the models and the greyish boxes.
3- The text in the greyish boxes is poorly aligned.
4- Un-visited links should NOT be in black as you can;t tell if they are links or just text.
Stefano's History
1- The text is an image ... that means it won't be sean by screen readers, on text only browsers (like blackberries), can;t be index and searched by search engines (like google) ...
2- Generates 8 validation errors.
Golden Baked Hams
1- The text is an image ... that means it won't be sean by screen readers, on text only browsers (like blackberries), can;t be index and searched by search engines (like google) ...
2- Generates 8 validation errors.
Lunch
1- It's a PDF. That's bad for a huge swath of reasons. PDF's are slow to load and oyu don;t even indicate I'll be downloading a PDF.
2- Depending on how the PDF was made, it might not be legible by screen readers and the likes. Also google might now index those documents reducing your listing in search engines.
Catering
See above.
Heating Instructions
1- The text is an image ... that means it won't be sean by screen readers, on text only browsers (like blackberries), can;t be index and searched by search engines (like google) ...
2- Generates 8 validation errors.
IN CONCLUSION
Using tables for layout is not XHTML compliant and went out the window in the mid 90's. Tables are a HORRIBLE way to set your layout. It's cumbursome, rigid and slow.
Never use images to convey content. Images can;t be read by search engines and so those pages won't be indexed and found, images are bigger than text so you are using more bandwidth but at your end and at the clients end ... just don't.
Look into tabless CSS layout. You can even find open source blank templates to make your life easier.
It's obvious that you don't have much experience building websites. this site doesn;t follow any type of accessibility guidelines, has no search engine optimization ... I'd leave this up for a little bit since it's there but you need to do a redesign from scratch. Start by going to the W3C and read up on accessibility guidelines, mobile web design, search engine optimization, cross browser compatibility, HTML and CSS ...
A good ressource for budding web developpers is W3Schools: http://www.w3schools.com/
In all honesty, this site should have taken you only 3-4 days to put together (minus shooting the pictures), once the layout had been agreed to with some mock ups in photoshop and the content was finalized and approved by the client so maybe 2 weeks in total from meeting the client for the first time to launch.
The reviews and articles beside the video does not appear for me. Only a box with that text in the top corner. I'm using Internet explorer 8.
The slide show food images on the main page look a little jagged. The edge of the white plate in specific.
Are you using the actual image with that size or are you sending a larger image and then having the browser resize the image? If the later then you would be better off converting it yourself and displaying it that way.
The images look fine to me but if you are using a MAC then you may be using a different color space than the general internet world. Save as regular RGB.
The two pictures (male & female) on stefanos_story.html are bad and you should replace them. The bottle looks fine.
search engine optimization was created as a by-product resulting from the development, operation and popularity of search engine listings. without search engines, there's no seo industry in the current form and format.