fbpx

Optimizing and Preparing Your Images for your Website

optimize images before you upload

Optimize your Images before you upload

It is a good idea to pre-format images before they are uploaded to the website. This ensures that the image files are transferred in the quickest time, using the least amount of bandwidth and taking up the least amount of space on the server, potentially saving you time and money.

This is particularly important when you are dealing with a large number of images, either for galleries or product databases.

Your images may be supplied to you by your suppliers or a third party photographer. We recommend that you pass on the following specifications to ensure that your images are provided to you in the correct format.

Format

These formats are the most preferred file types you can use to post images:

  • JPEG – An old file type which has become the standard image of the Internet. JPEG images are compressed to give you quality images minus the bulk. Useful for large and medium-sized product or post images and photographs.
  • GIF – Lower quality images used for simpler images such as icons. GIF’s can also support animations. GIF’s must never be used for product images, or larger and more complex images and photos, such as posters and artworks. It is best used for line arts with solid areas of the same color, such as logos
  • PNG – Another popular file type for images, PNG is often larger than both GIF and JPEG as these compresses photos without losing detail. They have more colors than GIF, and does not degrade over time with multiple saves, unlike JPEG. Often, they are used for high quality company logos, or product images which require a transparent background. Do note that some older browsers don’t completely support this filetype.

File and Image Size

For optimal website loading

Uploaded images must (ideally) be less than 500 kilobytes (0.5 MB) in size. Images that are more than 20MB in file size may not be processed by the website, or may take a long time to load, which could deter customers from your site.

Image Size Recommendations

  • Ensure that image sizes are within post display area. For instance, if your website post’s display area is around 700px wide, your full-sized images should have a width of 700px or lower in order for it to fit your website display.
  • We recommend that images are sized and optimised to a format suitable for its use.
  • It is important to note, that when preparing images for your products, to ensure that the dimensions are all the same. For example, it is best to have all portrait images or all landscape images or all square images. If you have a mix of all three then the product category pages are not going to look uniform and tidy.

NOTE: Images can only be scaled down, not enlarged. If you enlarge a previously scaled down image, you’ll get a pixelated (grainy) version of that image.

Colour mode

If you are providing images in a JPEG format, you need to ensure that the colour mode is set to “RGB” as opposed to CMYK. Software designed for print graphics such as Photoshop allows you to export images in a “CMYK” colour mode. This mode is specifically for print and the web browser will display it differently, usually the colours in a CMYK JPEG will display much “brighter”.

Resolution

72 pixels / inch – The standard resolution for screen display.

Optimisation

If your images are to be saved in a JPEG format you will have the option of compressing the images. This compression is measured on a 1-100 or a 1-10 scale, depending on the software that you are using to format your images. 100 representing high quality but larger file size and 1 low quality and small file size.

When saving an image for web use, choose image quality of 60 – 80.
You will find images saved at less than 60 will have a noticeable blur but be small in file size. Images saved at 80 or greater will appear much sharper but the file size will be significantly higher.

Aspect Ratio

Aspect ratio is the proportional relationship between an image’s width or height. Simply put, it’s the width to height (width/height) ratio of the image.

Certain platforms automatically adjust, or simply allows you to adjust the aspect ratio of an uploaded thumbnail or collection images. Squarespace, for instance, lets you crop collection images to aspect ratio, while Zest generally has a fixed width for thumbnail images.

However, for platforms like Shopify, you will need to edit the aspect ratio using a third party photo editing tool before uploading your images to your e-commerce store, if you want your product images to appear in the same size.

Image Thumbnails

Depending on the platform your website runs on, or how it is set up, your product images can get automatically cropped as thumbnail images for your gallery or your product collection.
In some instances, your images will get zoomed in and cropped.

If you would like the thumbnail to show the subject matter in its entirety, you can add white spaces on the image sides. By adding a white space around the image, it retains the entire subject when it gets cropped into a thumbnail image for your collection or gallery.

Naming Convention

Image file names should have names that are alphanumeric only, with no characters such as $ or #. Instead of having spaces in the image name, use an underscore or dash instead eg. ideal_image_name.jpg

To improve your search engine rankings and make your images easier to manage, name images using relevant keywords. IE for the image of a children’s book, instead of using the names from the camera eg IMG0637.jpg rename it to be the full name of the book “the-cat-in-the-hat.jpg”

Image Alt Tags

Alt Tags (Alternative Tags) are designed to explain the details of an image for the users who can’t or choose not to view images on their browsers. Alt tags also help search engines understand the image content and index it properly for search results.

When processing large numbers of images use batch processing functions, supported by some advanced image edit software. Please see the help files of your image edit software for support and more information about this.

Optimize for Google but also for Bing and Yahoo.

Admittedly, Google seems to be the most used Search Engines,but there are still some Users who prefer to use other Search Engines such as BING, YAHOO, DUCKDUCKGO or other less well known ones.

If you make a Search for your own Domain Name or Relevant Keyword to find your Site in those different Search Engines you will quickly see that your Position in each one will be different.

You might be Nr 1 on GOOGLE but only Nr 7 in YAHOO or Nr 10 in BING. Or you might be Nr 1 on BING but way down on the GOOGLE List.
I ran a short test with my own Website:

On other Search Engines and using other Search Words the Position might be and will be different.

Optimizing for Bing/Yahoo vs. Google

If you’ve decided that it’s time to focus a little more attention on optimizing for Yahoo and Bing, here’s a bit of good news – Yahoo search is powered by Bing, meaning you only end up optimizing for one extra search engine rather than two. Another helpful fact is that Bing and Google’s algorithms are similar in many ways.

For example, optimizing URLs and domain names for keywords and having a large number of high-quality, dofollow backlinks are equally important to Bing/Yahoo and Google.

However, that’s pretty much where the similarities between the two search engines end. As far as the differences, here are the main ones to worry about:

Website Type

While Google focuses on newer, commercial, or popular websites in its results, Bing tends to favor older websites with more official domain names such as .edu or .gov. What does all this mean? It means that Google is quick to offer up socially relevant sites whereas Bing is more likely to provide factually relevant information.

Flash Media

While Google has a hard time figuring out what to do about Flash media, Bing does a great job of indexing it, and offers extra credit for sites that use it.

Local

Local searches on Bing and Google will often have much different results, with Google’s often swaying in favor of larger, more established companies and Bing being more likely to show small businesses. Why? Because when you search for local businesses on Bing, it assumes that you want the most proximal, which isn’t always the big box store in town. Google, however, gives you the most credible, which often is the larger business.

Social

One of the things that sets Bing apart from Google the most is its approach to search by integrating social media. When searching on Bing, if a Facebook friend has recommended or rated the company or product mentioned in the search, the user can see it right away. Google hasn’t quite been able to integrate social media into their searches as well as Bing.

On-Page SEO

Google is much smarter than Bing when it comes to keywords. While Google is far more intuitive about the context of a page, Bing still relies heavily on keywords in page titles, meta tags, and on the page, which means that straightforward, specific keywords are the way to go for Bing SEO.

The Real Reason to Optimize for Bing and Yahoo

If you work with SEO, you know that the most important thing to optimize for isn’t Google, and it’s not Bing or Yahoo either – it’s the visitor. Ranking on the first page of any site is great, but if your site visitors aren’t interested in your website once you’ve drawn them there, then all your hard work was for nothing.

Once you’ve created a great, user-friendly website, you absolutely must optimize it for Google, Bing, and Yahoo so that your potential customers are given the opportunity to discover what you’ve created.
If you do not have the technical know-how nor the time or patience to optimize your Website I can help for a once off low Fee.Please contact me with your Project.

X

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close