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
-
SEO Implications of using Images for Article Titles
Hi guys! New to Moz Pro. I just recently completed an online course with Moz... I have a client who is writing some new content for their site, and we are approaching it with SEO in mind. I was wondering about using an image with text on it as the article title, instead of an actual "text on the page" title. Wondering if that's going to "cost" us anything, SEO wise. I guess we could use alt-text/title/description fields to make sure the keywords are crawlable for our article title but do they have less "weight" than a standard title? How does that work? Hope my question makes sense. Article header attached mB0PXsA.jpg
On-Page Optimization | | JakeWarren1 -
How to change images of a page without loosing ranking?
Hi, I have two reasons to change some images of a page on a wordpress site: 1.Google speed service advise me to optmize the images size to better spead load times. 2.I want to change images titles (to improve seo optimization for the page keyword), so i need to replace them, since im using wordpress. Now the question is: Can i just change the images without worring about any related seo issues? Or should i follow some best practice to change images in order to not affect the ranking of the page? tx for your support!
On-Page Optimization | | Dreamrealemedia0 -
Image Titles and Descriptions Question
Hello, I have a question about optimizing the SEO on my pages through image titles and descriptions. There are a few times on my website that I use the same image on multiple pages. I am under the impression that giving it a title such as "social-media-marketing-agency-graphic.jpg" will help the SEO for the phrase "social media marketing agency" on that page. My question was, if I want to use the same image on multiple pages, am I better off uploading an entirely new image with a new title to make it more relevant to the new page? Or will this not make large enough of a difference? Or is there an easier solution? Please let me know your thoughts on how to best optimize the pages
On-Page Optimization | | brightsocial0 -
Alt Tags on multiple product images
Hi I work on SEO for an ecommerce site and wanted to find out how important it is to optimise all images with alt tags. We have alt tags in place, however have not optimised descriptions for the following example images: Front of cupboard Back of cupboard Side of cupboard etc Is this dangerous for SEO if these images all have the same alt tag? We have thousands of products so it would be a huge job to update these, but if it's crucial for SEO we can work through our priorities. Thank you!
On-Page Optimization | | BeckyKey0 -
Show or hide content in responsive design
Hi everybody! I'm trying to design the mobile version of an ecommerce with lots of filters in the menu (size, colours, material, etc.) I'd like to know if it's better for this kind of sites to use an m.version or a complete responsive design. I have analyzed my keywords and it's true that my website is founded in a really similiar way in both cases (desktop and mobile) so I wanted to design the whole site in responsive at first, but I'm afraid of being penalized if I hide content in the mobile version. This is why I'm thinking about making the responsive for desktop and tablets and the m. option as well, so as to hide menus and images. What's your advice? Thanks in advance!
On-Page Optimization | | esthergvent0 -
Alt and title tags on images
For SEO, are alt and title tags still worth the effort? Or have they gone the way of meta keywords? I can see having alt tags for visually impaired reasons, but at this point is there any SEO reason to use them?
On-Page Optimization | | CompucastWeb0 -
SMO - Author Image
Hi Friends, I am having some doubts in author image in the social media websites. For example: I am having account in twitter, facebook and Google+ should I use the same image for all these 3 websites. Your Feedback on this is important for me. Thanks for your time.
On-Page Optimization | | zco_seo0 -
Why will google not index my Images
Hi I've added to index images in our sitemap although they are showing as being submitted Google hasn't indexed a single one. This has been the case for about 3 months. Is there any reason why Google would not index them? Thanks
On-Page Optimization | | tidybooks0