How to best serve images optimised for mobile devices in WordPress
-
Issue: Images too large for mobile devices in some articles, cannot be shrunk responsively, also should help reduce page size/improve site speed on small screen devices.
I am thinking of switching depending on the user-agent, such as iPhone / Android devices and serving up an optimised, rediced size image. I envisage this working in the background / ie. hidden from authors so it is easy.
Platform: WordPress
Would like a solution or some feedback on people's experiences with this problem. No good plugins found that can handle this so would probably need to be custom coded, but no processing overhead, unless it is generated upon publication of article.
Thanks peeps
Keith H
-
Hi Keith,
I'd recommend starting by compressing the images (if you haven't already). You mentioned that you've had trouble shrinking the images responsively, but you should be able to use a plugin like WP Smush.it. Compressing images is good for desktop site speed as well.
I'd agree with Bradley's CSS recommendation to fix the sizing issue; and for load time you can use CSS image sprites to combine multiple images.
I don't necessarily think that there's a problem with checking for the user-agent, and serving a different version of your images, but as Bradley pointed out, they still need to look good on a high res screen.
Cloud Four wrote a couple posts that go more in-depth into ways of dealing with responsive images (although these are not specifically Wordpress solutions):
- http://blog.cloudfour.com/responsive-imgs-part-2/ (from 2011)
- http://blog.cloudfour.com/8-guidelines-and-1-rule-for-responsive-images/ (from 2013)
You might also want to consider consolidating and minifying your CSS and Javascript files if you're concerned about page load time. Here's an article with these and a couple other tips: http://searchengineland.com/how-to-tune-up-responsive-design-websites-to-improve-mobile-seo-124370
Hope that helps!
-
I'm a fan of using this CSS for responsive images:
image {
max-width: 100%;
}I personally wouldn't be a fan of running a check on the user-agent and serving up an optimized image because you would probably negate some of your load time optimization from shrinking down the image by running unnecessary server processing.
Also - by optimizing an image for mobile, you should actually be increasing the DPI because of higher resolution screens (Retina). Shrunken down images might look awful on iPhones.
Just my .02
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
-
What is the best way to structure website URLs ?
Hi, can anyone help me to understand if having category folder in URL matters or not? how to google treat a URL? for example, I have the URL www.protoexpress.com/pcb/certification but not sure google will treat it a whole or in separate parts? if in separate parts, is it safe to use pcb/pcb-certification? or it will be considered as keyword stuffing? Thank you in anticipation,
Intermediate & Advanced SEO | | SierraPCB1 -
Mobile First Index: What Could Happen To Sites w Large Desktop but Small Mobile Sites?
I have a question about how Mobile First could affect websites with separate (and smaller) mobile vs desktop sites. Referencing this SE Roundtable article (seorountable dot com /google-mobile-first-index-22953.html), "If you have less content on your mobile version than on your desktop version - Google will probably see the less content mobile version. Google said they are indexing the mobile version first." But Google/ Gary Illyes are also on the record stating the switch to mobile-first should be minimally disruptive. Does "Mobile First" mean that they'll consider desktop URLs "second", or will they actually just completely discount the desktop site in lieu of the mobile one? In other words: will content on your desktop site that does not appear in mobile count in desktop searches? I can't find clear answer anywhere (see also: /jlh-marketing dot com/mobile-first-unanswered-questions/). Obviously the writing is on the wall (and has been for years) that responsive is the way to go moving forward - but just looking for any other viewpoints/feedback here since it can be really expensive for some people to upgrade. I'm basically torn between "okay we gotta upgrade to responsive now" and "well, this may not be as critical as it seems". Sigh... Thanks in advance for any feedback and thoughts. LOL - I selected "there may not be a right answer to this question" when submitting this to the Moz community. 🙂
Intermediate & Advanced SEO | | mirabile0 -
Sitemaps during a migration - which is the best way of dealing with them?
Many SEOs I know simply upload the new sitemap once the new site is launched - some keep the old site's URLs on the new sitemap (for a while) to facilitate the migration - others upload both the old and the new website together, to support the migration. Which is the best way to proceed? Thanks, Luke
Intermediate & Advanced SEO | | McTaggart0 -
What is the best text font for health website
What is the good text font for health website, font size, inline spacing, character spacing etc.? Is there any study on it? what font looks to good to eyes? (on what font user stay for long time etc) I personally like apple website text font.
Intermediate & Advanced SEO | | MasonBaker0 -
Title Tag Best Practices
In light of all the Google updates in 2013, have you updated/changed your title tag best practices? Is the format of (Keyword | Brand) still working well for your optimization efforts or have you started incorporating an approach similar to this format . (Keyword in a Sentence | Brand) Thanks in advance for your opinions.
Intermediate & Advanced SEO | | SEO5Team0 -
Mobile Version showing up on Desktop - NoIndex it?
I had a little issue earlier where I found my client's mobile version of their website showing up in the SERPs on my desktop. I asked my programmer to get rid of it. Programmer put a nofollow tag on the link to the mobile site (from the regular website). He also put a noIndex across the whole mobile version of the website. So to double check, I should probably get rid of that noindex on the mobile website right? I think the nofollow should be enough... thoughts? thanks!
Intermediate & Advanced SEO | | Rich_Coffman0 -
Can we really learn from the best?
Hi All, When I started my site (an eCommerce site) I copied (or tried) a lot of things from the best eCommerce sites I thought were out there. Sites like Zappos, ZALES, Overstock, BlueNile etc. I got hit pretty hard with latest algo changes and I posted my question at Google Webmaster Help forum I received answers from Gurus that we are keyword stuffing etc. (mainly with internal links to product pages but other issues as well). My answer was a link to Zappos and other sites showing that what we do is nothing compared to them. I also showed dozens of SEO "errors" like using H1 tag 10 times per page, not using canonicals and many other issues. The Guru's answer was "LOL" - who am I to compare myself to Zappos. So the question is... Can we take them for example or are they first simply because they are the biggest?
Intermediate & Advanced SEO | | BeytzNet0 -
Need a mobile XML Sitemap?
We're going to be running our mobile site on the same domain and generating content for users on mobile devices with style sheets (will not have m.domain). The content on our URLs will be the exact same. My question is if we need to create a mobile XML Sitemap to submit to the search engines. Do we need to create the Sitemap, that will contain the exact same URLs as our non-mobile Sitemap, and just include <mobile><mobile>tags around the URLs? Or do we need to create a mobile Sitemap at all to alert the search engines that we have mobile content?</mobile></mobile> Thanks!
Intermediate & Advanced SEO | | bonnierSEO0