Resizing Website Images: A Picture is Worth a Kiloword
11 years ago
Your website says a lot about you. In fact, to most of your current and future customers it is you. And one way to make sure you stand out from your competition and improve your Google rankings is to use professional-looking photos to tell (and sell) your story. Great-looking photos immediately communicate professionalism. And conversely, no matter how sophisticated the site, poor images scream amateur.  Â
Here are some simple tips that can make a big difference in how you are viewed-
Bigger is Not Better
Most cameras and phones shoot high-resolution images that are not ideal for websites because: larger images = bigger files; bigger files = longer loading times; longer loading times = customers who lose interest and look somewhere else. To optimize your site, keep file sizes lean.Â
You may be able to upload a full-size image and rely on your website provider to resize the image, but don’t. In that scenario, each time the site is visited the full-size image has to be downloaded then altered based on the visitor’s browser.  Can you say slow?
Do It Yourself
Resizing images is not difficult. Here are some tips:
1. Start by cropping your image to show just the key subject matter. Avoid the temptation to “stretch†one side to make it fit a particular area. Stretched images signal unprofessional work.
2. Set the full-size length and width.
3. Optimize image size for the web. Higher densities of pixels per inch (ppi) matter most when printing but can be lower for the web.  In most cases, you’ll want to resize the image to 72 ppi. Since screen resolution is 72 ppi, a large 300-ppi image actually looks exactly the same as 72 ppi!
4. Some resizing tools allow you to adjust file size by simply tweaking the quality of your image from 0 to 100 percent. If you use this technique, be careful– lowering the image quality too much can leave your pics looking pixilated.
5. Find your format:
jpg- Compressed file type ideal for photographs or gradients.
gif-Â Smaller file format ideal for flat colors including text and large blocks of color, as well as animations.
png- Used for their ability to have a transparent area in the image for things like icons and logos. This format will also work for quality images, but they tend to be larger than gifs and jpgs.
6. Pick your program
Photoshop Express
Photoshop (full versions)
Lightroom
Free online tools
Webresizer.com
Picresize.com
Properly executed photos improve your Google rankings, customer satisfaction and your professional appearance. Make it so!
(written by Ai Mitton. Â Ai is the lead Graphic Designer and Professional Photographer for SquareHook. Â Check out some of our other blog posts with pics from Red Rock Brewery, Wasatch Brew Pub, and several others to see her amazing work.)
Blog