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
-
Is using a H1 tag in a logo image bad for SEO?
We have brand logos on certain pages that have H1 tags in them - the H1 text being the brand's name, as this is what we'd want the title of the page to be. The logos are at the top of the page instead of a written title. But is this the best option for SEO? Do search engines value H1 tags in images as highly as a standard H1 tag?Would it be better for SEO to add an alt tag to the logo and add a separate H1 tag on the page that's also the name of the brand?
On-Page Optimization | | DVLighting0 -
HTML Copy in Image Alt Text Field
Hi all, A quick question regarding HTML copy in Image Alt Text fields. An extended client has some landing pages containing infographics, but contrary to our recommendation - no intro copy or surrounding copy was used. The infographic was simply placed on the page, and all of the text of the infographic was placed into the Image Alt Text field. As far as I know, Google would still see that content in the Alt Text field and attribute it to the Infographic, although this would not be sufficient enough of an effort for the page to rank for any of the content used in that field. I'd just like to check that I am correct? And as a consequence - we should insist that they include some copy with the infographic, or alternatively, use HTML text overlays on the infographic instead of flat text in the image itself? Thanks!
On-Page Optimization | | Saatchi_HU0 -
How to deal with hundreds of externally-generated images with no alt text?
Hi all This is a good one. I work for a webdev company who has clients in the transport industry. Part of our work on their sites involves pulling in transport-related offers from a feed. This includes both text and images, which our site template turns into viewable pages. The problem is that Moz has flagged that these images don't come with alt text, and there are _hundreds and hundreds of them. _I can't add alt text to them all, there just isn't the time or resources. Besides, the list is updated frequently, and new images are pulled in. So... what do? Would it be prudent to noindex them all by default setting? I'm stuck! Many thanks,
On-Page Optimization | | tomcowles
Tom0 -
Clickable Images Question
This may seem like a minor issue but it is something that has been bothering me. When I write a blog post and place images within the text, is it better to have the image linking to nothing or link to the image url. I am guessing that unless I wish the image to rank for a certain keyword then it is not worth it linking to the image url. But would just like clarification if there is a more deep seated reason. Thanks Mark
On-Page Optimization | | markmiton0 -
Image Alt For Logo
I've just run an on page audit of my website www.octopus-hr.co.uk and it seems in reasonable shape. However, I wonder whether I'm missing a trick with the Image Alt for my company logo. The logo appears on every page and links back to the home page. Currently the Alt tag is just the Company name "Octopus". We develop HR Software and we would love to rank better for the term "HR Software". Is it legitimate to change the alt tag to "Octopus HR Software" for my logo or is considered spam and likely to get us hit with a penalty? Thanks in advance David
On-Page Optimization | | davidoff5744440 -
Image URL's have knocked my sub-pages down (WP)
I had most of my keywords within the top 10 for this site, some were even ranking in the top 5. For a possible minor boost, more-so to cover all the bases, I decided to add images to all of the pages, and they were uploaded as a gallery with most of the image file names being the same as the keyword. Thus, url's were created with our targeted phrases, extending off of the corresponding sub-page. After that, Google quickly picked up the url's to the images and began indexing them, when that occurred the sub-page which was to be the landing page, quickly tanked. Nothing else on-site changed besides the uploading of the images, so I'm sure they're conflicting and for whatever reason Google can't decide which page to index. The page that contains the images used, or the actual intended landing page. With WP I didn't see a way to not have them link to anything at all, and just be static when using a gallery, stock at least. So, my question is how can I quickly alleviate this problem and what should I do in the future to avoid this? I believe if I change link thumbnails to image file instead of attachment page, that should fix the issue... Then, I'll have dead URL's which I suppose I should 301 to the sub-page. Alternatively, is there a better solution that will work, I was also thinking about no-indexing the attachment URL's, but that doesn't seem to be an option.
On-Page Optimization | | JayAdams320 -
Responsive web design and SEO
Hi guys, Do any of you know about responsive web design? In short it's a method that ensures that your website adopts to the resolution on the users screen. The point is that you don't have to make a site for each format, it's all there in your overall design. So, to the question: Does, to your knowledge, an integration of responsive web design harm your SEO? I tried to search for "responsive we design + SEO" but I really didn't get any useful information. Thanks a lot - all comments are very much appreciated.
On-Page Optimization | | MPO2 -
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