Optimizing images for Web in Photoshop
When you visiting some websites with lots of graphics you probably witnessed how it is loading piece-by-piece especially if your internet connection is not too fast…
The website may be gorgeous but if it takes forever to load there is a good chance than the visitor will be gone before it opens.
The problem is that graphic files are usually the largest ones and if not optimized properly will take long time to load. This is why I said many times that great graphics designer may not be your best choice for website design.
If you experienced similar problem with your own site here is a little trick how you may be able to speed-up page loading.
Open your slow loading image in Adobe Photoshop. Click on the “file” tab in the top menu bar and select “Save for web” option.
On the next page in the right column you will have drop-down box:
on the bottom of the page in the left corner you will see size of the file and aproximate time it will take to load on the slow internet connection:
Try to change file types in the drop-down box and see how size of the file and loading speed will change with it.
If you select JPEG you will also have an option to choose image quality. Try move % slider to the lower number until you can see image destruction.
When you find the option with minimal file size without loosing too much image quality - save it and replace existing image on the remote server.
Keep in mind that highly optimized JPEG images and PNG images may not display properly on colored background especially in IE.
Same way you can decrease size of digital photo when trying to send it to friends or relatives as an email attachment.
July 12th, 2008 at 4:37 pm
[...] images and external scripts. Always slice background images to the smallest elements possible and optimize them for web. If you have more than one script powering up your website, like blog and directory for example - [...]