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
-
In seo is it nesseccary ro optimize images as well?
Is it right Image optimization creates many advantages such as better user experience, faster page load times, and additional ranking opportunities. And, it's becoming an increasingly more important role in the website? Because I start a blog https://coinmasterfreespinslinks.com/ and need your suggestions seniors. Thanks!
On-Page Optimization | | adsdsadsacd0 -
Combining adjacent image and text links
Hey, The pages on one of our sites has a lot of links on it, which I have read a couple of times can be bad for SEO, although many say don't worry too much about it. However, I was thinking to reduce links and also reduce code size combining adjacent image and text links. For example they current look like this:
On-Page Optimization | | mdeluk
"
Products page" I am thinking maybe I should change to the following:
"Products page" However, is this bad code and therefore could be bad for SEO? I have tried Googling this but couldn't seem to find anything on it.0 -
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 -
How to find all broken images?
Are there any free tools that will crawl a full website and report back on any broken tags? My site recently added several thousand previously archived posts, many of which contain old tags that no longer exist. ScreamingFrog's crawl is too limited to reach most of these posts, and I haven't been able to find another free tool to get the job done. If there's no free tool, does anyone know of an affordable paid alternative?
On-Page Optimization | | WebElaine0 -
My website is not indexing the image.
Our website's images are not indexed. Will anyone help me? How will all images in my website be indexed? This is my website address: https://www.expertclipping.com/
On-Page Optimization | | jacky_risham0 -
WordPress image urls - need a WP maven
We were having a conversation re urls that are indexed for images that are stored in various media plugins in WP. My question for anyone who is an uberWP person is: What is your opinion re best media storage plugins and how these URLs affect pages on a site for ranking, etc. I realize this is broad, but it is driven out of my concern that I cannot touch everything. When I see a url like this: http://www.drumbeatmarketing.net/wp-content/themes/drumbeat2/img/DB-LOGO-White.png I know there is no way with all the sites and clients we handle that I can get it perfect but this just bugs me for some reason. Should I just chill since it (seemingly) affects so little....?
On-Page Optimization | | RobertFisher1 -
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 -
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