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
-
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 -
Ranking for a word when your image is showing up as #2?
I'm trying to rank for several specific words in my industry. I've noticed that many of the pages I'm trying to rank for the specific words, the main image of the page is being ranked. So my question is should I still try to rank my page even though the image is ranking as the first image displayed in the google results. Will this count against me by Google if I do? Or should I try to make the image being ranked more enticing for google searchers to try to increase traffic? Right now the images are not generating many clicks.
On-Page Optimization | | mr_w0 -
Does Google penalize a page with the image tag with alt and without src?
Hi, I am curious whether Google penalizes a page with the image tag with a value in the "alt" attribute and without one in the "src" attribute? Would this count as stuffing? Sometimes you cannot put an image but you would like to get SEO benefit by having a keyword in an image?
On-Page Optimization | | Plivo0 -
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 -
On page/site - Images & bold text
As I understand it on a page where you are going for the keywords 'Metal gates', you have an image titled 'Metal gates' (Lets say MG for Metal gates to save on my typing!) with the alt tag being 'MG' Now as I also understand it, if an image is also used as a link the Alt tag is also the anchor text? So, I have a page on Metal gates using the above methods, from this page I have image links to a metal driveway gates page (as well as text links), would I be best using an image titled 'Metal driveway gates' with the alt text as ' Metal driveway gates' to link to my metal driveway gates page (if you follow me)? Also on the image question, what if you have say six images (that are all links) on the metal gates page, how would you title the images and alt tags? Variations on Metal gates? Or using the keyword on the page that the link points to? (I'm not looking to keyword stuff but want to get it right! ) Also is it important to have your on page keywords in bold still? i ask because I've bolded text on my pages but not the main keywords - I've bolded text that I want people to see, but do not want to take away any power from my keywords if you follow me?
On-Page Optimization | | Jon-C0 -
Change Homepage internal Link from Image to Targeted Anchor Text -- Spam??
I am in the following situation: 1. Homepage is designed to target one main keyword. 2. All current pages link to the homepage with the image/logo, nowhere on the site do we link to the homepage with the target keyword. 3. It is an established page (Moz rank of 58) If I suddenly added text above and made the homepage link targeted anchor text, would Google consider this spam? We are ranked #13 in Google and our looking for ways to move up, but I do not want to risk any type of Google penalty.
On-Page Optimization | | MattAaron0 -
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 -
The SEO and CRO Value of an Image Next to Page Content
If given the choice to add an attractive stock photo to a conversion focused page, do the pros out number the cons in terms of SEO and CRO. Some pros are that you can include the keyword in the image filename and image alt tag. It can also increase user experience by making the page more attractive. Some cons might be that it increases page load time which can have a negative impact on SEO and user expereience. Also the visitor might get distracted away from the lead form button.
On-Page Optimization | | SparkplugDigital0