Moz Q&A is closed.
After more than 13 years, and tens of thousands of questions, Moz Q&A closed on 12th December 2024. Whilst we’re not completely removing the content - many posts will still be possible to view - we have locked both new posts and new replies. More details here.
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)
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 many hyphens are allowed in page titles or image names?
When I was going through certification, I was told it should be limited to one or two. I was curious if there is a change.
On-Page Optimization | | SeobyKP0 -
Can lazy loading of images affect indexing?
I am trying to diagnose a massive drop in Google rankings for my website and noticed that the date of the ranking and traffic drop coincides with Google suddenly only indexing about 10% of my images, whereas previously it was indexing about 95% of them. Wondering if addition of lazy load script to images (so they don't load from the server until visible in the browser) could cause this index blocking?
On-Page Optimization | | Gavin.Atkinson1 -
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 -
ALT tagging images with keyword. What is too much?
I was wondering about the best practices of ALT tags in images. Say if you have an eCommerce site and you're on a product page. This product page has 5 images of the same product (different images), should you give every image an Alt tag with the keyword for that page? Or, is that keyword stuffing, and it would actually be best practice be to provide alt tags on just one image?
On-Page Optimization | | John_Francis0 -
Duplicate Content when Using "visibility classes" in responsive design layouts? - a SEO-Problem?
I have text in the right column of my responsive layout which will show up below the the principal content on small devices. To do this I use visibility classes for DIVs. So I have a DIV with with a unique style text that is visible only on large screen sizes. I copied the same text into another div which shows only up only on small devices while the other div will be hidden in this moment. Technically I have the same text twice on my page. So this might be duplicate content detected as SPAM? I'm concerned because hidden text on page via expand-collapsable textblocks will be read by bots and in my case they will detect it twice?Does anybody have experiences on this issue?bestHolger
On-Page Optimization | | inlinear0 -
Image titles and alt tags for multiple images
I'm hoping some of you may be able to help me understand the best way to optimize my image titles and alt tags for a specific situation. I'm working on an interior design website and they have hundreds of pictures. each of their projects has about 10 pictures. Is it best for me to us the key phrase in each title and tag? or is that to repetitive? here is what I mean: A project called "urban interior design" all images are of urban interior design, just different angles and features, so my initial idea is to just have each image title like this: Title: "urban interior design dinning area" Alt: "urban interior design dinning area view" Title: "urban interior design living room" Alt:"urban interior design living room couch view" Is this the best way or will it actually hurt my ranking with too much exact keyword use? Thanks for your help!
On-Page Optimization | | TBSEO0 -
What should I put in the image ALT and title text for blogger?
Hello, I wanted to know what should I put in the image ALT and title text for blogger. I've read so many damn articles about ALT text and Title text for blogger; nothing explained what I put in it though. What am I supposed to put in it that will help me with my on page optimization? (Stuff like do I use spaces or dashes, do I put my keyword in there, how many characters should I not exceed, do I put one word or two words?) If I have a picture of a backpack, what should the alt text be? What if I have 10 different pictures of backpacks on 1 page? How about if I had a backpack next to a tv in an image? A specific answer or a detailed one is nice!
On-Page Optimization | | 6786486312640