Image Sizing & Alt Text for Optimized Website Design | SEO Marketing

How your images are sized and coded has an impact on your website’s technical SEO. If not done correctly, images will slow your website’s load time, detracting from the user experience and making Google mad! Take a few basic steps to check out and correct how your images are coded and pulled in to a website visitor’s browser.

Image Sizing

Resize images to the size that they should be displayed on the website. Avoid resizing images with CSS or with HTML on page. If a browser is told to display an image at a certain size, it still has to load the full size image called out in the HTML, then displays the size it is told to display. The more large image files must be loaded in the background, the slower the site. For example, on www.widesmiler.com in the footer:

You’ll see that the code pulls in the image at its current size of 80×80 because the img src has no image resizing.

On this website — www.blackstonerenaissance.com, the image size is 300×208 yet is displayed on the site at 240×160:

Below, the image is sized using HTML, which means the browser has to load the full size image and displays the smaller size directed by the code.

Image Alt Text

Every image should have descriptive image alt text. Think of a short, concise description of 5 or less words. Keep it to 5 words or less because Google will not bother to continue to read an unnecessarily long description.

Although it’s great to have a keyword inserted in to your alt text for optimization, focus first on accurately describing the image. If a relevant description includes a phrase match of one of your important keywords, even better!

In order to pass HTML validation standards, your website must have alt text filled out for every single image! Search engines appreciate appropriately coded websites, so they take HTML validation in to consideration.

Want to check out someone else’s image alt text as an example? Right-click over the image in Chrome or Firefox browser and select “inspect element.” The browser will highlight the code for you, allowing you to look for the alt tag. Here is an example with an alt tag (can you guess which image I used?):