DEV Community

Drive Coding
Drive Coding

Posted on • Originally published at drivecoding.com

HTML Images for Beginners: 7 Mistakes Killing Your SEO

#webdev #seo #html #beginners

TL;DR

Most beginners treat the <img> tag like a simple copy-paste job — and it is quietly destroying their page speed and Google rankings. There are 7 specific mistakes that almost every beginner makes. This post covers the most damaging ones, but the fix for mistake number four will genuinely surprise you.

The Problem Nobody Warns You About

You spent hours building your first webpage. You dropped in some images using a basic <img> tag. It looked great on your laptop. Then you tested it on your phone — and it took 11 seconds to load.

Sound familiar?

Here is the truth: the <img> tag is deceptively simple on the surface. But what you do not see is that a single wrong attribute — or a missing one — can tank your page speed score, kill your accessibility rating, and push you down Google search results before a single real visitor ever arrives.

Most beginners do not know this because tutorials show you the tag syntax and move on. Nobody talks about the behavior of images in production.

Let us fix that right now.

The HTML Image Tag: What It Actually Does

Before we get into the mistakes, here is the foundation every beginner needs to lock in.

<!-- The most basic image tag -->
<img src="your-image.jpg" alt="A golden retriever catching a frisbee">
Enter fullscreen mode Exit fullscreen mode

Two attributes do all the heavy lifting:

  • src — tells the browser where to find your image file (local path or full URL)
  • alt — describes the image for screen readers, broken image fallbacks, and Google indexing

The <img> tag is a self-closing element — it does not need a closing tag. Simple enough. But here is where beginners start making expensive mistakes.

Mistake 1: Skipping Alt Text Entirely

This is the most common HTML image mistake for beginners, and it costs you on three fronts at once.

<!-- What most beginners write -->
<img src="pizza.jpg">

<!-- What you should write -->
<img src="pizza.jpg" alt="Margherita pizza with fresh basil on a wooden board">
Enter fullscreen mode Exit fullscreen mode

Without alt text:

  • Screen readers say absolutely nothing to visually impaired users
  • Google cannot understand what your image shows
  • If the image fails to load, visitors see a broken icon with zero context

Alt text is not optional. It is a lifeline for real people and a ranking signal for search engines.

Mistake 2: Using External Image URLs You Do Not Control 

<!-- This looks fine today -->
<img src="https://somerandomblog.com/cool-photo.jpg" alt="Cool photo">
Enter fullscreen mode Exit fullscreen mode

That external domain can expire tomorrow. That image can be moved or deleted. You have zero control — and your page suddenly shows a broken icon where your hero image used to be.

Always host important images yourself. Use external URLs only for throwaway examples or testing.

Mistake 3: Uploading Massive Uncompressed Files

This is the page speed killer. A 4MB JPEG that looks identical to a 180KB compressed version is a choice that costs your visitors seconds of wait time and costs you Google ranking points.

Before uploading any image:

  • Compress it using a tool like Squoosh or TinyPNG
  • Aim for under 200KB for most web images
  • Consider modern formats like WebP for significantly smaller file sizes

Image file size is one of the most underestimated factors in page speed optimization for beginners.

Mistake 4: Leaving Out Width and Height Attributes

Here is the one most beginners never see coming.

<!-- Missing dimensions cause layout shift -->
<img src="hero.jpg" alt="Team photo">

<!-- Correct approach -->
<img src="hero.jpg" alt="Team photo" width="800" height="450">
Enter fullscreen mode Exit fullscreen mode

When a browser does not know the image dimensions before it loads, the page layout shifts as the image appears. This is called Cumulative Layout Shift — and Google measures it as a Core Web Vital. A bad CLS score directly lowers your search ranking.

Defining width and height reserves the space before the image loads. The page stays stable. Your CLS score improves. Your SEO benefits.

This is the single most impactful fix that beginners overlook — and there is a deeper reason why it matters even more on mobile that most tutorials skip entirely.

Mistake 5: Ignoring Responsive Images

A 1200px wide image being served to a 375px mobile screen is wasted data. Every unnecessary byte slows your load time on the connection that matters most — mobile.

<!-- Basic responsive image using srcset -->
<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
  alt="Mountain landscape at sunrise"
>
Enter fullscreen mode Exit fullscreen mode

The srcset attribute lets the browser choose the right image size for the right screen. This is one of the most powerful responsive image techniques a beginner can learn.

Key Takeaways

  • Always include descriptive alt text — it serves real users and search engines
  • Host your own images — external links are a liability
  • Compress every image before uploading
  • Always define width and height to prevent layout shift
  • Use srcset to serve the right image size to the right device
  • Choose modern formats like WebP over heavy JPEGs where possible
  • Name your files clearly — sunset-beach.jpg beats IMG_00293.jpg every time

There are two more critical mistakes not covered here — including the one involving image formats that most beginners get completely backwards. The full breakdown walks through all seven with real code examples, a beginner-friendly image gallery challenge, and the exact checklist used to audit images before publishing any page.

Want the complete guide with more examples? Read the full post at Drive Coding: https://drivecoding.com/html-images-7-critical-mistakes-that-kill-your-page-speed-seo/

Originally published at Drive Coding

Top comments (0)