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
-
Responsive site.com vs m.site.com
Hi All, My client's website have two urls like: site.com/a.html and **m.site.com/a.html. ** Will it hurt google rankings for this website because there are version of a website? Please help!
On-Page Optimization | | binhlai1 -
How to analysis Responsive VS Dynamic site?
Hello Experts, Can you please throw your knowledge on How to analysis Responsive VS Dynamic site? Also please suggest best tool to optimize both type of sites plus if I have to optimize manually then what is the best way? It will help lots of people as currently google focusing more on mobile site so we can optimize our responsive and dynamic site. Pls suggest. Thanks!
On-Page Optimization | | adamjack0 -
Yoast SEO doesn't recognize images
Hi, I'm currently adding alt tags to my images but the Yoast SEO plug in in Wordpress states on all my pages “No images appear in this page, consider adding some as appropriate.“ while I do have images on my pages. What could be the problem? Best, Rik
On-Page Optimization | | bbuildingbusiness0 -
SVG image files causing multiple title tags on page - SEO issue?
Does anyone have any experience with SVG image files and on-page SEO? A client is using them and it seems they use the title tag in the same way a regular image (JPG/PNG) would use an image ALT tag. I'm concerned that search engines will see the multiple title tags on the page and that this will cause SEO issues. Regular crawlers like Moz flag it as a second title tag, however it's outside the header and in a SVG wrap so the crawlers really should understand that this is a SVG title rather than a second page title. But is this the case? If anyone has experience with this, I'd love to hear about it.
On-Page Optimization | | mrdavidingram2 -
Image alt tags shouldn't contain keywords?
Hi Everyone, I've been informed recently that keyword within your image alt tags can be a trigger for penguin if you have your keyword mentioned too often on the page (over-optimisation). I'm not sure I understand why though, the reason for this is, we have a page which features a picture and a description of a product. The page title, heading, a mention in content and image alt all contain a keyword which is the product name. I've been told to remove these alt tags but aren't alt tags important for screen readers and other W3C complacency issues, so removing the product names from the alt (which also happens to be the keyword for the product pages but is best describing what the image is) would make these image useless to users with certain disabilities, so if its true that doing this can be a negative signal isn't this breaking googles guidelines by not providing good content for those users? Would it be better to remove these alt tags or attempt to remove keyword elsewhere on the page? or can anyone suggest something else? Thanks in advance.
On-Page Optimization | | AMA-DataSet0 -
Image with Text
Hello, I would like to use the mouse roll over with text on the over state. My question is how to make it SEO friendly? 2 different ALT ? How is the text on the over state going to be read by the searh engines? Appreciate your help! Emmanuel
On-Page Optimization | | manu450 -
Image Optimization - File Name Important?
I am currently working on a site with 100+ recipes that all have image file names that are relevant, but not optimized for keyword purposes. I'm wondering - from an SEO perspective - would it be worth my time to go back through all of the images and rename them with keywords in mind? On my own site I have always done this as a "best practice" but I'm curious - does it make a difference to search engines? Does anyone have any recent research/experiences that they would like to share? Thanks!
On-Page Optimization | | EssEEmily0 -
Preferred Image Replacement Techniques
What is the preferred image replacement technique currently for CSS? I have been using the one that someone here at SeoMoz recommended a year or two ago, which was: Text to be hidden { #id { overflow:hidden; width:200px; //width of the image background-image: url(...); } #id span { display:block; width:1000px; height:1000px; }
On-Page Optimization | | TomBristol0