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
Website photo file size is too large:
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:
Website photos have not
been touched up:
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.
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…
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.
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!