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
-
How to change images of a page without loosing ranking?
Hi, I have two reasons to change some images of a page on a wordpress site: 1.Google speed service advise me to optmize the images size to better spead load times. 2.I want to change images titles (to improve seo optimization for the page keyword), so i need to replace them, since im using wordpress. Now the question is: Can i just change the images without worring about any related seo issues? Or should i follow some best practice to change images in order to not affect the ranking of the page? tx for your support!
On-Page Optimization | | Dreamrealemedia0 -
Clickable Images Question
This may seem like a minor issue but it is something that has been bothering me. When I write a blog post and place images within the text, is it better to have the image linking to nothing or link to the image url. I am guessing that unless I wish the image to rank for a certain keyword then it is not worth it linking to the image url. But would just like clarification if there is a more deep seated reason. Thanks Mark
On-Page Optimization | | markmiton0 -
Replacing text with images
Hello, My client is a "cheap calls" site which is offering calls to around 300 countries in the world. The pages for each country are almost the same, as they are mostly terms and conditions of making a call and explanation of the process how to do it. The copy is quite long (more than 850 words) and the country name is repeated about 26 times in the text. The country name and the phone number is the main difference between the pages, which makes them almost the same. I have recommended to add testimonials to each country and towns within the country, but I am afraid it will not dilute the similarity between the pages enough for Google to stop seeing them as duplicated. Also the client do not exactly rush to publish the testimonials for every country. The rankings are not too bad and all seems fine, but in the long term I know we need to do something. I am not sure if the client would agree to shorten up the copy, as they believe in old style seo with keyword stuffing and bolded keywords but I would like to overcome that problem with exchanging the most of the copy with an image. I would write a new copy for each page making it unique (around 2-3 paragraphs) and the rest would be an image stating exactly the same thing as the copy now to provide the same amount of info to the user. Theoretically it should help to resolve this problem, but would like to check if anyone has done something like that and if it worked/may work. Are they any other implications?
On-Page Optimization | | ThinkingJuice0 -
Image Alt For Logo
I've just run an on page audit of my website www.octopus-hr.co.uk and it seems in reasonable shape. However, I wonder whether I'm missing a trick with the Image Alt for my company logo. The logo appears on every page and links back to the home page. Currently the Alt tag is just the Company name "Octopus". We develop HR Software and we would love to rank better for the term "HR Software". Is it legitimate to change the alt tag to "Octopus HR Software" for my logo or is considered spam and likely to get us hit with a penalty? Thanks in advance David
On-Page Optimization | | davidoff5744440 -
Broken Links/Images Non Optimized Content Help
Hello, After 4 years of incorrect blog creation and 4000 blog posts I have seen the light. I have implemented a new theme, SEO friendly, based on a yoast website report and have been creating timeless blogs with correct structure. However, I have 5400 broken links and images based on the Broken Link Checker. Additionally, of our 2500 blog posts which are on app reviews, only 500 are optimized so I have been painstakingly been going through each to optimize, while balancing new content output. The trouble is Google is seeing massive changes and we are tumbling in search. Any suggestions on how to approach this as it is my understanding that the broken links/images are doing considerable damage to our website overall. the website is crazymikesapps.com thank you Mike
On-Page Optimization | | crazymikesapps0 -
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 -
How would you optimize thousands of images?
The majority of our images are not optimized for search. Specifically, the alt text and image title are blank. The image filenames are also not using descriptive keywords. We publish content quite frequently and this issue will be addressed within the production work flow for all images moving forward. As for the images currently existing on our site, what are some ways to scale the optimization for thousands of images that need to be optimized for alt text, title and filename? We're thinking about mechanical turk, but the problem is that we are a business magazine and have a lot of head shots of entrepreneurs that the mainstream might not recognize. Any insights would be appreciated.
On-Page Optimization | | inc.com0 -
Best Way To Host Images For Image Optimization
I need an image optimization expert to tell me whether or not we are hosting images properly for SEO. Currently, we upload all images to Picasa and then call them out with a webpart in our content management system. See example here - http://www.tennisnow.com/Photos/2011-BNP-Paribas-Open-Day-5.aspx Here's an example of the url that is attached to each image - http://lh5.ggpht.com/_1Oyc-Zgkrpk/TX5H-Pfyd7I/AAAAAAAARbc/nG3Cw-G5tsY/s400/1215548409_FU9xA-L.jpg We have a lot of images, and we've hosted them on Picasa for speed purposes based on a recommendation from our developer (makes the pages load faster). I've read that Google can now factor page load time into its ranking parameters. We are not seeing the images from each photo gallery being indexed on images.google.com. We are torn. What should we do to rank for these images?
On-Page Optimization | | tennisexpress0