I need your expert advice and opinion regarding the proper image format to use in website, and its recommended resolution and file size.
What is the best picture format to use in web pages?
What is the maximum image file size that can be uploaded in the webpage?
How can we increase the image resolution of the photo to be uploaded in the webpage?
Is it possible to have a high resolution image yet it has small file size? if yes, how can i do this in Photoshop?
Can i increase the resolution of the image without changing the pixel dimension? For example, fixed 615x215 pixel dimension, then increase the resolution to 300.
I read several post that the standard resolution is 72 or 96? is possible to have a higher resolution, say 300? How to achieve this in Photoshop?
More importantlly, does high image file size and resolution affect the Google page ranking and performace on the website?
I really appreciate your comments and advice on the above points. Thanks
It depends what sort of image it is. If it’s a photograph, or something with a similar level of complexity and subtlety, you should be using .jpg – but if it’s a computer drawn image that makes use of blocks of colour and more regular lines and shapes then either .png or .gif would be better.
What is the maximum image file size that can be uploaded in the webpage?
There is no maximum, although some individual service providers (particularly CMSs) may set their own maximum. A full-size photo may be up to about 200KB but you shouldn’t often need to go higher than that. As with everything, there’s a balance between getting a top-quality picture, and keeping the size small enough that it downloads quickly.
How can we increase the image resolution of the photo to be uploaded in the webpage?
You can’t increase the resolution beyond what my screen is capable of displaying. It’s unlikely that there will be any point in uploading a picture bigger than about 1000×750px, because it will then be too big to fit on a lot of people’s screens.
Can i increase the resolution of the image without changing the pixel dimension? For example, fixed 615x215 pixel dimension, then increase the resolution to 300.
No – see above. The pixels on a computer screen are fixed – if your photo is at a higher resolution than that the extra data is just wasted because the screen has no way of showing it. Think of it like broadcasting in colour when everyone only has a black-and-white television – yes, it’s all very well having the colours there, but pointless when nobody can see them.
More importantlly, does high image file size and resolution affect the Google page ranking and performace on the website?
The more images you have, and the larger those images are, the more likely you are to slow your website down. That may be in terms of the time taken to download it – particularly for people on a slow connection – but it may also be in terms of performance once the images have been downloaded. Older computers and lower-spec mobiles may struggle to process lots of large images, meaning that the site will run slowly and less smoothly. Remember that while you might not notice any performance problems when looking at a site where the images are cached and/or you’re on a high-speed broadband connection with a good computer … there are a lot of people out there who don’t have those luxuries, and will be very grateful if you keep your site as lean as possible.
In terms of Google rankings, it won’t make a whole lot of difference. Google does take account of page speed, and if your site is significantly slower to load than other pages that it thinks are of similar value then you could well drop below them … but I don’t know if that looks at just the page itself, or if it includes all the associated images, scripts and stylesheets that are downloaded with it.[/font]
I have to confess that I’ve not revisited the great resolution debate in recent times. I’m due for a brush up on the new wave of higher resolution screened devices and like anything in life, it all used to be simpler.
I have a background in graphic design and used primarily a print medium. We designed books, posters, ads etc and it used to be very easy to talk in terms of resolution because there was a maximum that any Press/Printer could achieve. You could talk to your Print company, get those specs and know the limits of the machinery and work to that. As specs improved there came a point where the perception of what was ‘photo quality’ started to mismatch the impressive numbers being thrown around. For most people looking at a print above about 300dpi looked almost identical to one of 1200dpi, you could say that the 300dpi version was good enough and the gains from there were small and appreciated only by a few.
Likewise screen technology had its limits, but the information to display on a screen (as opposed to paper) was much smaller. What looked sharp on paper at 300dpi, only took 72dpi on a screen, there simply wasn’t any point in giving more information to photos on the web than was necessary, it was inefficient and just a waste.
Likewise in the days of dialup maintaining low file sizes was very important. People didn’t want to wait all day for a photo that they may not even be interested in seeing. Optimising images became an important part of web design. One thing that was routinely done was to limit the dimensions to something appropriate, and also to remove unnecessary information stored in the file when it wasn’t necessary for online. Typically these were things like thumbnails of the image that are used by the operating systems to quickly show you what a photo looks like without having to launch something like Photoshop. Saving for the Web in Photoshop has these sort of functions, it strips unnecessary data out and optimises the image for display on websites.
So where too now? With retina/higher resolution screens capable of displaying greater information and mobile devices running on limited data both being important considerations these days.
As a general rule which will always apply: you want enough image data to display your graphical content well, but not more than you need. Optimising images is important to Google, as is how they are cached and referenced in your website. Google is looking to see that the creators of websites balance these considerations of the users.
You can check any image file you have prepared against a tool like Smush.it to see how well you’ve optimised it.
I read several post that the standard resolution is 72 or 96? is possible to have a higher resolution, say 300? How to achieve this in Photoshop?
Resolution is irrelevant for the monitor/website, a 900px wide by 600px high image saved at 300 dpi will produce the exact same sized file as the same image saved at 100 dpi,
it only comes into account when printing, 900x600 printed at 300dpi will give you a ptint sixe of 3x2 inches and at 100dpi will give you a print size of 9x6 inches
on your monitor it will take up 900 pixels by 600 pixels and the resolution is irrelevant, the save quality will make a difference to the file size and this is what you use to optimize your image for the web, usually you can get away with 75 to 85%
all Adobe products have a resolution chooser in the save for web options and it confuses the hell out of people
