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
-
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 -
Should I watermark my product images
I am in the process of creating new images for my products to use on my website. Are there any advantages or disadvantages of watermarking each image? Is there an SEO impact good or bad? I am aware that filename and Alt tags are important, but am unsure if google dislikes watermarked images.
On-Page Optimization | | BipSum1 -
SEO Location Pages - ALT Image Tag Question
Hello Guru's, I have a Hire Website whereby you can rent products online. I have created different Location pages for these which are in essence the same pages page but with different location specific urls, title tags , on page content etc etc. This helps me to rank for local search. These location pages also display 20 products per page. My question is Should I make the ALT IMAGE TEXT location specific for each of the 20 products . Example - Steam Cleaner Rental in "location" or should I only amend a few of the Atl Image Texts to be location specific. I don't want to come accross as spammy in google eyes but I also don't want to be seen as having duplicate content , images etc etc What do you think ? thanks Sarah.
On-Page Optimization | | SarahCollins0 -
How to ALT tag correctly many similar images?
scenario: I have a product page with some text about the product and 12-15 different images af the product: details, colours, different views... how should I name an alt tag them correctly, been them actually really similar? Is it keyword stuffing to use the same name containing a relevant keywords?
On-Page Optimization | | DavideM0 -
How much SEO value does a fashion site get from bolting text onto the bottom of home page? Does the value compensate for cluttering up a page focused on an iconic image?
Getting ready to launch a completely redesigned site for a fashion designer. Since it is a fashion site, visitors do not need text to describe what the site is about., We are weighing three options: 1) clean design with no text (just images and navigational links), 2) bolting on a couple of sentences of text at the bottom of the page to signal keyword terms to the search engines, 3) following the lead of the top ranking site in the category and adding lots of text to the bottom of the page. Do the SEO benefits justify cluttering up the design by bolting text onto the bottom of the home page, and if so, how many characters of text seem to be the minimum to be effective?
On-Page Optimization | | RandyP0 -
Google images hits distorting my results. What to do.
Hit from google images seem to be distroting my results. I sell airport taxis so want rid of any hots that came through google images as there no buying intent Aanlytics shows (when i click in) Traffic Sources > Search Engine Optimisation > Quires 250 clicks All of which came from quires related to generic taxi terms which I do (unfortunately) rank for in search. I imagine these generated because I have a taxi cab image in page one of google images. So when people search for a picture of a taxi they click mine. However in SEO MOZ the traffic data tab shows: google = 219 clicks images.google = 3 clicks This should be the other way round shouldn't it?
On-Page Optimization | | smashseo0 -
Home page mostly graphic image
I have a new customer that is redesigning her website. The graphic designer has designed a lovely homepage that is mostly an image with some navigation and footer area for text information. My concern is that there isn't any real call to action or anything on the homepage design other than an interesting and fun graphic. It seems like years ago this was a common practice and then later it was looked down on as not good for the user experience or SEO. What is the latest thinking on this type of design? Should the homepage (www.mysite.com) be allowed to be mostly images? Or should we focus on the optimizing the internal pages and let the homepage be more creative?
On-Page Optimization | | ChristiMc0 -
Image ALT Attribute
Hi, Got a message from the On-Page Optimizer to update the ALT Attribute in an image. Does that mean just rename the image and re-upload it on to the site? Thanks!
On-Page Optimization | | OTSEO0