How to manage website photos for SEO & website visitor usability

Leave a Comment

There are a few things you really need to know about the use of images or photos on your site.


If we work with a client, build their website and then hand over the keys… often times they will run into problems managing their images. Let me give you an example. I recently built a restaurant website. This client was paying for SEO and paid a web designer to develop the previous site. Sadly the site was nothing more than a digital brochure site with 8 pages and no blog, and really no way for the client to manage the site. Obviously we changed that by building the site on wordpress giving the client the ability to manage things. The current site now has 107 pages, mostly descriptive menu meal item pages and full menu listing pages. These pages are great for SEO, but can be great for customers (visitors to the site) as well. That is if things are managed properly.

As you can imagine there are probably quite a few photos being used on a site like this. I helped the client set up their SEO strategy on their menus. Then they decided to add a new lunch menu. I set this up for them and they added and took all the photos themselves.

The new photos look ok, but have some serious problems, like:

  • photos file size is too large
  • photos are not optimized or named well
  • photos have not been touched up
  • photos have not been sized to fit usage
Ok, so let’s break down a few of these problems and give some tips to fix the issues. 

 

Website photo file size is too large:

 

In the perfect world especially in the restaurant business you want great photos. Photos really sell your food. So you will need high-resolution images so you can use them on print related promotions like physical menus, table-tents, banners and the like. This is where you start, but then you need to move to the online promotion world, things like websites and email promotions.
 

 

Web photo is too large

 

So you really need a tool like Photoshop or Photoshop Elements to properly manage your photos. Although there are cheep or free tools available either version of photoshop will run circles around the free stuff. So I noticed the clients website would no longer back up because the site was now too large. I knew the client probably just added too many images that were not sized for online usage. Sure enough when I opened one of the images it was HUGE! The resolution was set to 72 pixels/inch which is the proper onlineresolution, but the actual photo dimensions were through the roof at 59 inches wide by 39 inches tall (see image above). WOW! Imagine if you have a 21″ monitor to view this image at full size you would have to nearly scroll the whole image twice (both vertical and horizontal) to see the whole image. Of course the client resized the image in wordpress, but the file size was still 2 to 3 megabytes per image.
 

 

save photo for the web in photoshop

 


I shrank this image down to 8″ wide and 5″ tall and then saved this image for the web (see settings we used above). This took the image from 2.5mb down to 49K. Think about this 1024 Kilobyte = 1 Megabyte. So the original image was 2.5mb which equals 2560K. The new image is 49K that means the original was 52 times larger then it needed to be. The new image will not need to be scrolled to see the full image at 100%. It will also load much faster which is good for google and web visitors. Google penalizes slow loading sites and web visitors just leave.

 

Website photos are not
optimized or named well:

 

So “optimized” means a few things when you are talking about images.The first is the file optimized to work best on the web, meaning shrinking the files size down to one that loads quickly as we mentioned above. Then there is another optimization that relates to SEO. Step one is to name the photo something descriptive using a keyword. This help your images get found ingoogle images and you’d be surprised at how much traffic this will realistically drive to your website.
So the client names this photo BFW-Lunch5.jpg. Now if you go to googlelooking for a yummy meal would you ever search for “BFW”, “Lunch 5” or “BFW Lunch 5”. Of course not. I might however search for “Blackened Chicken Tacos” or “Chicken Tacos”. So this is why it would be better to name this photo blackened-chicken-taco.jpg or chicken-taco.jpg. Obviously this name would come up in a search much sooner than the previous name.
Ok, so we covered the actual photo name, but where else can we optimize the image? How about once we add the image to the website we use Alt Text to describe the image. Keep in mind search engines can’t read images so if the image has text in the image google will never know. The only thing they can read is image name and the Alt Text in the html code. Now depending upon the type website you have Wordpress/Hubspot or other you may be able to add the Alt Text when you upload your image. For those of you a little more html savvy you could actually hand code the Alt Text if you wanted. See image below for an example of what alt text looks like in code form.

 

example of alt tag

 

Remember to try to use keywords. As you can see here the client actually added the alt text “Blackened Chicken Tacos” to this image. Sometimes I recommend being more strategic though and adding something like “Eat at Buffalo West in Fort Worth and try our great Blackened Chicken Tacos!  Notice I am tying the food product to a location “Buffalo West” and a city “Fort Worth”. This should help in the search engines to hit a few different areas. Keep in mind the alt text is almost the elevator speech for each image so promote it wisely. Do not however Keyword Stuff alt text make it easy to read use plain English that makes sense to readers.

 

Website photos have not
been touched up:

 

In any marketing you do it is best to touch up any and all photos. Make sure you do not have blemishes on skin or products. Avoid sun/light glares or other items that will take away from the main image. In this case the client has clips showing in the image. Try to remove anything like this so the viewer is only focused on the great product, and not distracted by random other items. It is really pretty use to do touch ups once you have been shown how to do this in photoshop. See example below.
 

 

before after photo retouch

 

Website photos have not
been sized to fit usage:

 

When you are adding photos to your site you must be aware if the images have specific size requirements or dimensions. In this case the site is pretty flexible except for one area of the site… the Home Page Slider. So why is this so important? Well, in this case the slider image should be 1020 pixels wide by 400 pixels tall. The original site design had images that fit these dimensions so the slider looked great. When you add new images of many different sizes you get odd things happening.

Let me show you an example of poorly sized images:

Image 1: Notice this great image of a a Hamburger. The photo is great, but it doesn’t fit the required image size for the slider so do you notice the extra space on the right side of the rotating image area? It looks odd and off balance.

 

poorly sized image

 

Image 2: Notice this image fits the width perfect, but obviously it was by accident because you can barely see the plated meal. If the image is cropped off to the point of not seeing the product, this is a bad thing. Then watch what happens next…

 

poorly sized web images


Image 3: The last image fit perfectly width-wise remember? The only down side to this is the next image of Prime Rib looks great, but the previous photo is sticking out. Obviously this is a problem.

 

poorly sized images on a website

 

So what is the solution here? Make sure if you are changing photos and things start acting funny that you ask your designer/developer what is going wrong? Or what are the exact image sizes I need to be using in order to keep the design consistent and working properly.

Keep in mind if you can not do all this by yourself… hire a professional to do it. This stuff is important and really will help you build your brand so take it seriously. In our case many clients do not want to pay ongoing fees. I can understand this, but if the expense is really focused on protecting and helping to build your brand, the cost is usually a pretty good investment in your brand.

I hope this helped you understand more about images and how to better use and manage your images to:

  • Improve your SEO to rank higher in search engines
  • Improve Visitor Experience on your Site 
  • Build your Brand 

 

Good luck and happy photoshopping!

 

{{cta(‘ba7c050f-21c8-4a3f-a0f7-77da33bcd168’)}}

Leave a Comment

Your email address will not be published. Required fields are marked *