Skip to content
The ability to fix a website issue in the HTML confers power, even when it’s a small issue. Unfortunately, a fix that works perfectly from a technical point of view can cause problems from an SEO perspective – problems that often aren’t obvious unless you keep up to date with what kind of site behavior Google rewards.
Let me give you an example. Recently I had to upload some images to a client’s website. The first image I uploaded was way too big for my purposes. I considered using a tool to resize it, but then I discovered that it’s possible to resize an image using HTML. Since we deal with many different content management systems, I’ve been learning HTML on an as-needed basis to post content more easily. So I treated this as an opportunity to learn a new skill, looked it up online, and it worked beautifully – or so I thought.
For those who don’t know how to do this, and have some knowledge of HTML, it’s very easy. You need to know the height and width of your image in pixels. Then, within the HTML for the image, after the img src=”file name of your image” you designate the height and width of your image by adding the words “height=” and “width=” – only you don’t put the quote marks around the words themselves as I did here; you put them right after the equals sign, and within those quote marks you put the number of pixels you want.
If you’re reducing the size of an image, you’ll want to subtract the same number of pixels from the height and width, so the image will scale properly. Say you had an image that was 500 pixels tall by 300 pixels wide. To reduce it in scale, you might subtract 200 pixels from each value, and put the following within the HTML for the image: height=”300” width=”100”. Save and check it on the front end of the site, and voila! You have a smaller image that is in proportion.
The image loads and works correctly, and is now the size you want, so why is this a problem? Your page now loads as if the image is still the larger size – which, technically, it is. Larger images add “weight” to your page and take longer to load. It might only be an extra second, but with the short attention spans of most web users, this can become an issue pretty quickly.
It’s not just a usability issue for your visitors, either. Google added page speed as one of their 200+ ranking factors at least four years ago – and lately, the search engine has been experimenting with adding a slow label to their mobile search results for websites that don’t load quickly. It isn’t clear whether this will become permanent, or what the threshold is for getting hit with this big red slap in the face – but with mobile search becoming increasingly important as more and more searches are performed on mobile devices rather than desktop or laptop computers, you will no longer be able to ignore page speed issues.
The solution to my particular image issue was to use software to change the size of the image, such as Snag-it or GIMP, upload the smaller image, and use it on the page. I’m still glad I learned how to change the size in the HTML; it’s always good to learn new things, and it gave me a better understanding of how HTML works. But now I know an approach that works better for my purposes – and the next time I want to change something in the HTML, I’ll know to consider what effect it might have on the SEO before going forward.
Written By: Terri Wells – SEO
