Member Avatar for JamieLynnSEO

Making a layout in photoshop, splicing image...
How can you use a photoshop layout to benefit you in terms of SEO?

Other than image alt tags and url's of course.
Is this ALWAYS a bad idea?

  • 3 Contributors
  • 3 Replies
  • 224 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by anderson1234

Dani AI

Generated

A Photoshop mock can absolutely inform a site’s look, but turning the whole page into spliced bitmaps hurts both SEO and accessibility. Real text in HTML is indexable, selectable, and resizeable; text baked into images is not, so alt text and filenames alone won’t fully make up for lost content. ’s point about alt attributes is valid, and was right that pages made almost entirely of slices give crawlers very little meaningful text to work with — a caution echoed by accessibility and search guidance. (w3.org)

A practical workflow that preserves the Photoshop design while keeping SEO intact: export only true photographic assets; implement headings, navigation, CTAs and copy as semantic HTML; use webfonts or SVG for styled text and icons; use CSS Grid/Flexbox for layout. For responsive images, use srcset/picture so the browser fetches the appropriate file for each device. Example pattern:

<header class="hero">
  <img src="hero-800.jpg"
       srcset="hero-400.jpg 400w, hero-800.jpg 800w"
       sizes="(max-width:600px)100vw,800px"
       width="800" height="500"
       alt="Handmade ceramic mug">
  <div class="hero-content">
    <h1>Handmade ceramic mugs</h1>
    <p>Small-batch stoneware.</p>
  </div>
</header>

Use these responsive-image and markup patterns rather than slicing the headline into an image. (developer.mozilla.org)

Optimize images for speed and discoverability: descriptive filenames, meaningful alt text (not keyword stuffing), modern formats (WebP/AVIF where supported), width/height attributes to avoid layout shifts, and include images in sitemaps or structured data when relevant. Lazy-load below-the-fold images but avoid lazy-loading hero/above-the-fold assets; validate the rendered HTML in Search Console and check performance with PageSpeed Insights. (developers.google.com)

If migrating a legacy site built from slices, do it incrementally: replace image-text with HTML first, keep decorative slices as images with empty alt="", add noscript fallbacks for JS loaders, and test indexing after each change. That approach keeps the visual design while restoring the text that both users and search engines rely on.

Recommended Answers

All 3 Replies

Member Avatar for SolidSolutions

ALWAYS?

I don't think it's always a bad idea, but in general your site will not do well with SEO if it is just several spliced images.

The crawlers eat letters. The more letters on your site the longer they will stay around and play and realize how much fun they had at your site....unless of course, you stuff them, then they get sick and do not like your site as much. They need a balance.

Member Avatar for JamieLynnSEO

Hmm. im hearing that stuffing is a bad idea. Ill have to think about this more. Thanks!

Member Avatar for anderson1234

In SEO point of view, using spliced images in your website is not a good idea.

So, avoid making use of it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.