Responsive image plugins and seo / crawlability
-
Note : For the background of this question please read the preface below.
Ive been researching responsive image options the main issue i can see with them is that they are not semantic html so bots may not index them correctly. For instance many of the responsive image plugins use
data-src
for an image rather thansrc
.Does any one have any experience with this and if it impacts on SEO ?
Does any one know of a client side responsive image soltion that uses a normal
img
tag with the image stored in thesrc
and with the option to set analt
attribute ?
**Preface : **
Ive got a site we are currently developing, the site has a large full width responsive image slider.
To serve images that wont be pixilated we are making the width of the images 1800px wide (which should cover most screens, but isn't actually big enough if the site was viewed on a 27" imac) these 1800px wide images weight about 350kb - 500kb per image and our image slider has about 20 of them. As you can see this would be a problem for anyone with a connection slower than c.10 mbps.
This is especially true for mobile devices that will be downloading an image 1800px wide although only require a much smaller one, this coupled with a 3g connection will make the site really slow.
-
So you've got a big performance issue if you put all 20 images in img src= notation, as the browser is going to try to download those, of course.
What I've done with my travel website with big hotel images (I'll have as many as 75 or more sometimes) is specify the 1st image in img src= notation, then use Javascript to update the src attribute on click or timer.
The downside of this: good luck getting Google to index the other 19 images, even if you put them in an image sitemap. In my experience, Google didn't want to index anything it couldn't verify was really on the page.
You can use @media queries to point at different images for different resolutions, but only if they're background images....which most likely means they won't be indexed, and they won't be seen as content by Panda.
What I've ended up doing is a bit of a hack; I use client-side Javascript to detect the screen resolution, then I can select different sized images based on that. I use Joe Lencioni's SLIR library to take any large image and automatically create and cache the various smaller sizes I need.
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
Disallow: /sr/ and Disallow: /si/ - robots.txt
Hello Mozzers - I have come across the two directives above in a robots.txt file of a website - the web dev isn't sure what they meant although he implemented robots.txt - I think just legacy stuff that nobody has analysed for years - I vaguely recall sr means search request but can't remember. If any of you know what these directives do, then please let me know.
Web Design | | McTaggart0 -
For a real estate website, is a different mobile site warranted vs a responsive site?
I researched the major real estate websites: Zillow, Trulia, Remax, Keller Williams, Century 21, etc. They all have a separate mobile site and not a responsive one. The client wants it to be easy to search for properties from a smartphone. Is it possible to get a responsive version of a real estate website on a smartphone?
Web Design | | MassMedia0 -
Seo for design webinar ?
I've got no problem using google webfonts on their own, but what about using them over an image; specifically a clickable image? Its easiest to place text over an image if the image is a background image, but then the image isn't easy to make clickable. Am I missing something - this shouldn't be hard, right. Thanks!
Web Design | | saultie0 -
I've set up my own site which is still fairly new but I'm a bit concerned that there is a bloackage SEO wise somewhere because when I try to crawl the site on SEOmoz it only crawls one page.
I'm really baffled and none of my research has shed much light on it. My url is www.emporiumofmanliness.co.uk I'd really appreciate any help! Thanks
Web Design | | JoshED0 -
I am looking to improve my on page seo, can you provide any recommendations or suggestions for how?
I am relatively new to the world of SEO and recently built a new site. I have read as many books as I can to help increase my skill set rapidly, and have attempted to implement the best of what I have learned but I know many of you have been in this arena for a while and I would be extremely appreciative of any suggestions you can offer with regard to on page. Thanks in advance. http://luxuryhomehunt.com - home page http://luxuryhomehunt.com/homes-for-sale/orlando.html - city level http://luxuryhomehunt.com/homes-for-sale/orlando/bay-hill.html - community level
Web Design | | Jdubin0 -
Infinite scrolling - is it SEO friendly ?
If i am trying to implement infinite scrolling and remove pagination completely, will it effect my SEO ? Why or why should not infinite scrolling be implemented ?
Web Design | | Myntra0 -
PSD to WP Coding & Plugin Implementation?
Any recommendations? I am looking for a company that can do it to a very high standard. Need a review plugin implemented as well, which works with the theme. Clean coding, correctly named divs and clean comments. Thanks guys
Web Design | | getbigyadig0 -
Any discussions on the actual web page design and how it might affect SEO?
Are there any links to previous discussions or tips, techniques for how creative design has any impact on seo??
Web Design | | theideapeople1