Optimizing Your Website’s Images

Optimizing Images

Posted on April. 13, 2012  by Alex Andronicos - Design and Marketing Specialist

The science of aerodynamics has grabbed the attention of mankind since the beginning of time. People have gone to great lengths to become faster, lighter, and more agile. Swimmers will shave ever last hair on their body to reduce drag. Sports cars are strategically shaped to reduce wind resistance. Most people will agree faster is better, even in the digital world. A brilliantly optimized and lightning-fast website will not only attract viewers, but will give them a smooth experience and make them more likely to come back.

Most internet users remember the days of the 56k internet connection, when one could easily waste an afternoon waiting for an image to load pixel by pixel. Even with today’s high-speed standards, many websites are poorly optimized and load at an unbearably slow rate. Studies show that you have about 30 seconds to grab your readers’ attention before they lose interest. If your website is taking forever to load, they will likely move on to something else, or—even worse—to your competition.

Building a lightweight website is something of an art form, requiring knowledge of current web standards and the ability to compromise. High Definition is currently the center of a lot of buzz in the consumer electronics space. Many Americans refuse to watch the news if they can’t watch it in 1080p. High Definition has its place in media, but your website should not be one of them. Make sure your images never exceed a resolution of 72 dots per inch. This may sound low compared to the print standard of 300dpi, but 72dpi is all you need to display a clean picture on a standard-sized monitor.

It’s important to know your image formats. A photograph is best saved as a .JPEG. If your image needs a transparent background, go with a .PNG. This type of file is typically larger in size, so try to limit your use of them as much as possible. GIFs are the smallest file type you will find. These files sacrifice resolution and color count in exchange for their small size. Therefore, GIFs are mostly appropriate for graphics with a low color count, such as icons, vector images, or cartoons.

Always avoid resizing images using HTML code. If your image is originally 1500 X 800 pixels in dimension, but you want to display it at 375 X 200 pixels, you should resize the image using an image editing application like Adobe Photoshop. Do this instead of using HTML’s width and height attributes. Even if your image is displaying the scaled-down version on the screen, your browser is still working overtime trying to load the original larger image, wasting valuable processing power and memory.

Stay away from using images as fonts. Not only is text in an image not ideal for SEO purposes (Google Spiders can’t crawl an image for content), it will increase the load times for your web page which can have an adverse effect on search rankings among other things. Remember: more images means a heavier web page with longer load times.

In today’s fast-paced digital world, if a viewer can’t get what they want in a reasonable time, they will move on to another source. Optimizing your site’s media is an important piece of the puzzle for creating a positive user experience.

Upload Photos to your profile site

Now that you know the proper techniques and requirements to optimize and image, feel free to upload your photos to your 29 Prime Profile. Uploading an image into the back office is simple.

  • 1. Log into your account and navigate to the “Business information” tab. Within the drop down select “Media Gallery.” You will open up a page where you can keep track and manage all of your existing photos as well as add a new one.
  • 2. To upload a new image, select the radio button labeled “Add Image from your Computer.” Browse and Select your desired image from your computer.
  • 3. Give it a name and then hit the button title “Upload Media”. Your image is now live on your profile, available for the public to see!
  •   upload

Check the current speed of your website at www.developers.google.com/pagespeed.