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
-
Can I put the company name in the image alt text instead of just the service type im trying to rank for?
Hello, if I am trying to rank for a service type and the exact phrase is in the companies name, can I put the company name in the image alt text instead of just the service type? Seizing the opportunity to get another mention of the businesses name...two birds with the one stone if you will... For example, "lawn cutting" being the service type but the company's name is Paul's lawn cutting. Could i put Pauls Lawn Cutting in the image alt text, or just stick to lawn cutting? Thanks in advance
On-Page Optimization | | Gavinn0 -
Will it make any seo impact if there is not any Content available in Mobile responsive site
If we will not show our existing content(Available for desktop views) on product listing page in Mobile responsive site, will it make any difference/impact from seo point of view? Mostly people don't read content in product listing pages and we place content mostly for seo point of view. So intentionaly we don't want to show our content in mobile view bcz it may distract users. As per my knowledge google using same ranking algorithm for both desktop and mobile. So I want to know will it make any impact from ranking and other seo factors?
On-Page Optimization | | kathiravan0 -
Is the HTML content inside an image slideshow of a website crawled by Google?
I am building a website for a client and i am in a dilemma whether to go for an image slideshow with HTML content on the slides or go for a static full size image on the homepage. My concern is that HTML content on the slideshow may not get crawled by Google and hence may not be SEO friendly.
On-Page Optimization | | aravinn0 -
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 -
How to name images for billingual website ?
I have a website where images are based on a different domain. And i am calling only one single image for english and french version. I m wondering if it s valuable to use both languages in naming the images like Apple-Pomme.jpg or if there might be any drawbacks.Thanks !
On-Page Optimization | | ennick0 -
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 -
Is alt text on images treated like text on a page?
I'm curious if the alt tags on the images on my website are treated just like text. Thoughts?
On-Page Optimization | | dan.backowski1 -
Image files names - should each be different ?
Hi SEOs I have created a page on my website with a certain tutorial - let's say "How to change a tyre in your car". I have Grade A from On-page report using SEOmoz tool. I have put a relevant alt description for each photo I have put in that tutorial and I have used relevant keyword as a name for each image. So for example this would look like that: changing-tyre-1.jpg changing-tyre-2.jpg My question is should I name these file differently according to their content ? For example if on my photo there is some tool I have to use to change the tyre should the file have the name relevant to the subject of the article/tutorial on the page or to the content of the image ? Is that a stupid question ? Or am I getting too fussy ? Thanks
On-Page Optimization | | lolskizz0