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
-
Google image search
How does google decide which image show up in the image search section ? Is is based on the alt tag of the image or is google able to detect what is image is about using neural nets ? If it is using neural nets are the images you put on your website taken into account to rank a page ? Let's say I do walking tours in Italy and put a picture of the leaning tower of pisa as a top image while I be penalised because even though the picture is in italy, you don't see anyone walking ? Thank you,
Intermediate & Advanced SEO | | seoanalytics1 -
Best practice to redirect http to https
I have an SSL certificate on our domain but at times some search results still list the HTTP version. Clicking on this then warns the user about security and they leave. To avoid this I am using this in the htaccess file to redirect all HTTP visits to the https version. RewriteEngine On
Intermediate & Advanced SEO | | Gavpeds
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://domain.com/$1 [R,L] Is this ok? I notice on Moz toolbar it give a 302 temporary redirect I am thinking this isn't good and needs to be a 301 maybe? What is the best practice in this situation?1 -
What if page exists for desktop but not mobile?
I have a domain (no subdomains) that serves up different dynamic content for mobile/desktop pages--each having the exact same page url, kind of a semi responsive design, and will be using "Vary: User-Agent" to give Google a heads up on this setup. However, some of the pages are only valid for mobile or only valid for desktop. In the case of when a page is valid only for mobile (call it mysite.com/mobile-page-only ), Google Webmaster Tools is giving me a soft 404 error under Desktop, saying that the page does not exist, Apparently it is doing that because my program is actually redirecting the user/crawler to the home page. It appears from the info about soft 404 errors that Google is saying since it "doesn't exist" I should give the user a 404 page--which I can make it customized and give the user an option to go to the home page, or choose links from a menu, etc.. My concern is that if I tell the desktop bot that mysite.com/mobile-page-only basically is a 404 error (ie doesn't exist), that it could mess up the mobile bot indexing for that page--since it definitely DOES exist for mobile users.. Does anyone here know for sure that Google will index a page for mobile that is a 404 not found for desktop and vice versa? Obviously it is important to not remove something from an index in which it belongs, so whether Google is careful to differential the two is a very important issue. Has anybody here dealt with this or seen anything from Google that addresses it? Might one be better off leaving it as a soft 404 error? EDIT: also, what about Bing and Yahoo? Can we assume they will handle it the same way? EDIT: closely related question--in a case like mine does Google need a separate sitemap for the valid mobile pages and valid desktop pages even though most links will be in both? I can't tell from reading several q&a on this. Thanks, Ted
Intermediate & Advanced SEO | | friendoffood0 -
Index or noindex mobile version?
We have a website called imones.lt
Intermediate & Advanced SEO | | FCRMediaLietuva
and we have a mobile version for it m.imones.lt We originally put noindex for m.imones.lt. Is it a good decision or no? We believe that if google indexes both it creates double content. We definitely don't want that? But when someone through google goes to any of imones.lt webpage using smartphone they are redirected to m.imones.lt/whatever Thank you for your opinion.0 -
Embedded mobile page?
I have a client who wants a mobile version of their homepage. Normally, I use responsive design to accomplish this for the SEO benefit, but in this case the client wants very different information on the mobile home page than their regular home page. I don't want to go to a dedicated mobile version of the page because they get a fair amount of mobile traffic and so it would probably have a significant negative impact on their SEO to do so. So I was thinking I would add a hidden div to the home page which includes everything they want on the mobile home page and then use CSS to hide the regular content and show the hidden content if someone reaches the page from a smart phone. What do you think about this idea? Would I run afoul of Google's anti-cloaking "rules"? Has anyone done something like this before? Thanks!
Intermediate & Advanced SEO | | farlandlee0 -
Images and SEO
Hi, I would like some opinions on the topic of using images for SEO. I have come across a few sites that I see have very few backlinks, but have decent pagerank and seem to rank well for certain keywords. One such site I looked at had very little content other than tons of images (It was a joke blog that focussed on funny images, funny pics etc) and now I am starting to question whether hotlinking images assists in SEO? are there any benefits to having someone using one of your images (hosted on your site) ? I do recall reading somewhere that someone hotlinking an image is akin to a link. Any truth in this?
Intermediate & Advanced SEO | | rightmove0 -
Image ALT Descriptions
Due to the way our system is and the way we want to do something. We have to make the description for each image in the ALT. Now this is not just a few words but is actually a few sentences. Is there going to be any negative disadvantage to doing it this way? The positives I see is that it will help with accessibility and atleast the bots will be able to tell what the item is about. The negatives is that maybe this description could be better used elsewhere?
Intermediate & Advanced SEO | | websitesaleslab0 -
Are free WordPress templates bad for SEO?
Hello, I often build sites using WordPress. The other day I read an article in which the author stated that the sites built using the free WordPress template are not SEO-friendly. Could someone please confirm this statement? Does this mean that I need to develop themes myself or buy WordPress templates? Thank you for your help.
Intermediate & Advanced SEO | | salvyy0