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
-
High image rank
Hi everyone I have a question and I hope you can help me or at least introduce some moz post to me.I want to have high rank in google image so I use a descriptive alt text and image title. I used related content and keyword for my pictures but there still some issue should I use the exact keyword in my header and content?and repeat them OVER AND OVER ?can you help me with this issue?
On-Page Optimization | | talaabshode20200 -
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 -
Images, using a lightbox would it go against adsense TOS?
Something I have been trying to figure out. On my website each member can have up to 10 images. When viewing a profile you can select each different photo and we currently use javascript to display this in a small box so the page does not re-load. I am curious for ideas, would we be better off having the images load on a different page? Giving more pages per visit in GA or would a lightbox type pop up be optimal. My concern is that the lightbox (similar to how Facebook displays images) would be a violation of google adsense TOS. I tried to talk with a help desk member from google regarding this but I am not even sure they could speak english to understand what I was saying. What do you guys think? When it comes to handling groups of images how would you best display them for user happiness and search engine optimisation?
On-Page Optimization | | Burto0 -
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 -
Pagination for image galleries
We have photo galleries that load new URLs with new content/photo on each page, yet I'm still seeing "duplicate meta description" in GWT for each separate URL in the gallery. Will rel="next" rel="prev" take care of this? Just want to confirm as it requires a CMS upgrade/release.
On-Page Optimization | | Aggie0 -
What's the maximum length (number of spaces) for the Alt Image Text?
I'm setting up alt image text for the images on our website and I'm wondering if there is a maximum number of spaces that should be used that field.
On-Page Optimization | | JillCS0 -
What's the best way to name an image for SEO?
Hi Guys,
On-Page Optimization | | krseo
I'm thinking about images and SEO. What's the best way for naming and using images in HTML Code? For example: Image-Name: keyword-keyword2-keyword3.jpg or keywordkeyword2keyword3.jpg ?
How many Keywords should I use max for a picture? And also do you use the alt tag as description of the image and the title tag or only the alt tag? If you use the title, what do you use it for? Maybe someone can copy a HTML-Code example for me 😉 Thank you 🙂
Alex0 -
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