Responsive images srcset
-
Is delivering scaled images using srcset a good idea?
Thinking of delivering one image size to Mobile and another to Desktop. How can I do this for all browsers?
Thanks Mike
-
AFAIK since the way images are used online hasn't 'significantly' changed in decades (as Zohaib says) - there is no factual industry standard. But this technique seems like it could yield faster page-loading speeds for mobile, which we all know Google does stand behind. Google often come up with an error on Page Speed insights which says, you are serving massive resolution images with a tiny viewport. They actually can and do regard that as an error, so surely if Google documents that the technique is acceptable to them and we know it solves certain issues, it is at least 'worth a try' IMO
-
I've always used CSS to scale images between devices. Though this can increase the page loading times, so for better performance there are plugins available for CMSs to improve page rendering speeds,
-
Images are some of the most important pieces of information on the web, but over the web’s 25-year history, they haven’t been very adaptable at all. Everything about them has been stubbornly fixed: their size, format and crop, all set in stone by a single
src
. -
Thanks, yes I had read this article but can't find any websites using this technique. Has it been adopted as an industry standard, or is there another option?
-
Google doesn't seem to have a problem with this:
https://developers.google.com/web/fundamentals/design-and-ux/responsive/images
"TL;DR
- Use relative sizes for images to prevent them from accidentally overflowing the container.
- Use the
picture
element when you want to specify different images depending on device characteristics (a.k.a. art direction). - Use
srcset
and thex
descriptor in theimg
element to give hints to the browser about the best image to use when choosing from different densities. - If your page only has one or two images and these are not used elsewhere on your site, consider using inline images to reduce file requests.
-
Enhance
img
s withsrcset
for high DPI devicesThe
srcset
attribute enhances the behavior of theimg
element, making it easy to provide multiple image files for different device characteristics. Similar to theimage-set
CSS function native to CSS,srcset
allows the browser to choose the best image depending on the characteristics of the device, for example using a 2x image on a 2x display, and potentially in the future, a 1x image on a 2x device when on a limited bandwidth network."This part seemed most important to me:
"On browsers that don't support
srcset
, the browser simply uses the default image file specified by thesrc
_ attribute. This is why it is important to always include a 1x image that can be displayed on any device, regardless of capabilities._ "... so basically you define your srcset as per Google's documentation, but you must be sure to include a default fallback image that could work on all browsers and devices - that's what gets used if the browser is unable to interpret your srcset (or if your srcset doesn't include anything for the specified browser)
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
-
How to get a mobile thumbnail image next to the search result?
Hey! I noticed the last few months that a lot of google searches now show an image next to your result when on mobile. i managed to get my listing to show an image before but I made some changes to the image and site and can’t seem to get Google to ahow the new image (or any image). I’ve added the image to schema mark up and still no luck. Wouod ahyone have any advice on how to get the image picked up, or st least help increase the odds? The site is https://tourstoniagarafalls.com and you can see it on search (for me it shows on the bottom of page 1) for the keyword “Niagara Falls tours“. Thanks again!
On-Page Optimization | | Originaladam0 -
WordPress image urls - need a WP maven
We were having a conversation re urls that are indexed for images that are stored in various media plugins in WP. My question for anyone who is an uberWP person is: What is your opinion re best media storage plugins and how these URLs affect pages on a site for ranking, etc. I realize this is broad, but it is driven out of my concern that I cannot touch everything. When I see a url like this: http://www.drumbeatmarketing.net/wp-content/themes/drumbeat2/img/DB-LOGO-White.png I know there is no way with all the sites and clients we handle that I can get it perfect but this just bugs me for some reason. Should I just chill since it (seemingly) affects so little....?
On-Page Optimization | | RobertFisher1 -
Duplicate Content when Using "visibility classes" in responsive design layouts? - a SEO-Problem?
I have text in the right column of my responsive layout which will show up below the the principal content on small devices. To do this I use visibility classes for DIVs. So I have a DIV with with a unique style text that is visible only on large screen sizes. I copied the same text into another div which shows only up only on small devices while the other div will be hidden in this moment. Technically I have the same text twice on my page. So this might be duplicate content detected as SPAM? I'm concerned because hidden text on page via expand-collapsable textblocks will be read by bots and in my case they will detect it twice?Does anybody have experiences on this issue?bestHolger
On-Page Optimization | | inlinear0 -
Author snippet image in results, question!
Hi, Quick question really, I can see how a Google+ profile picture showing up in the results can increase CTR and even trust but would this be a no no for a normal website? I mean if you had a website which offered personal training, so a brand rather than an individual would you not use this snippet? I've seen some website, even ecommerce sites using this tag to just increase their CTR.
On-Page Optimization | | Bondara0 -
Why Aren’t All My XML Sitemap Images Indexed in Webmaster Tools?
Hi, Here is our main sitemap http://www.vistastores.com/newsitemap/main_sitemap.xml We have submitted all category wise sitemap having Image Tags : For eg - Ac Category http://www.vistastores.com/newsitemap/window_ac_sitemap.xml contains iamge tag - image:imageimage:locimage:captionimage:title</image:title></image:caption></image:loc></image:image> All our 142 category pages includes these format. Still the sitemap report on 4-Apr-2013 says: Sitemaps content Web pages:
On-Page Optimization | | CommercePundit
Submitted 14,569
Indexed 11,219 Images:
Submitted 21,442
Indexed 11,762 You can see major difference in submitted v/s indexed. I have looked into Jay Simpson question - http://www.seomoz.org/q/any-idea-why-our-sitemap-images-aren-t-indexed to find this answer but didn't get Perfect & clear answer. I need urgent answer to fix this issue..... K0NDuw5s.jpg0 -
What is the importance of image file names and H1, H2 and H3 tags
Hello, My client thinks they will get better rankings if we change the product image names to reflect the keywords for that page, is this true? I believe I just have to add "alt tags" but not sure now. Also, they think its very important to have H1, H2 and H3 tags on each page. I thought this wasn't a big factor anymore. Is it? Thanks
On-Page Optimization | | maximumrank0 -
Optimisation for Google Images
What techniques do you use for the optimisation of images on Google. Alt tag , image title Surrounding text Anyone tested actual linking to the image url and not the page url. I have achieved hundreds of top listed images but when it gets competitive what is the most useful technique you have used. Thanks
On-Page Optimization | | onlinemediadirect0 -
How to get Google images traffic?
How to get Google images traffic? Take a look at traxnyc.com and sugest what we can improve. Thanks in advance.
On-Page Optimization | | DiamondJewelryEmpire0