Optimize Your Photos for the Web
1
In an age of high resolution phone displays and widescreen desktop monitors, it is important to have quality images on your web site – but don’t make them too big.
The amount of time it takes for a page to load can have an effect on your website’s credibility with search engines as well as drive away users if it is slow. Luckily there are some easy ways to make your images look great on the web without sacrificing quality.
Most photo editing software gives you ability to easily adjust the size and compression of your images. In Adobe PhotoShop, there is a feature called Save for Web & Devices that helps you to do this very quickly. Let’s say your image is ready to be uploaded to your site, it is currently 17 megabytes and needs to fit into an area about 320 pixels wide (this is about a 3rd of the width of the main content area of most modern websites).
- Open the image in PhotoShop
- Go to File > Save for Web & Devices
- Change the Preset to JPEG High
- Adjust the image width to 320 px (the height will automatically adjust to the width)
- Hit Save and choose a location and name for your image
Your image went from 17 megabytes to 27 kilobytes and is now estimated to load in 1 second!
Some things to remember:
- Size – always save your images to the exact dimensions to which you will be displaying them. Remember, even when viewing your site on an HD laptop or monitor, your images will still only display at 72 dpi (dots per inch). To put that number into perspective, most print documents are 300 dpi. Save for exact sizes and your pictures will come through looking good without bogging down your webpage.
- Compression – if you have a lot of the same color, you can compress your image to combine similar colors in order to reduce the size of your image. Preview and test your rate of compression until your image is small enough without looking pixilated.
Comments
Leave a comment
To leave a comment, please log in / sign up
RSS Feed
Facebook
Twitter
LinkedIn
YouTube