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
-
Image upload SEO tips?
Is there anything I can do to my images other than naming them correctly to have with SEO? Size? File type? Maybe adding text on top of them to pick up OCR? Thank you,
Intermediate & Advanced SEO | | Jamesmcd030 -
Setting up redirects from non wordpress
Hi, we are rebuilding our site which was built on WordPress. The old permalink structure was /%post_id%/%postname%/ The new site is a custom build (not Wordpress), however, we are using WordPress for blog posts. The URL structure is www.customewebsite/blog/ As the custom site is not WordPress, we do not know how to create a redirect to push the WordPress url /%post_id%/ to the /blog section of the new site. What we currently get is page not found. Can anyone help with the htaccess redirect code? Many thanks one and all.
Intermediate & Advanced SEO | | Taiger0 -
Mega Menu Navigation Best Practice
First off, I'm a landscape/nature/travel photographer. I mainly sell prints of my work. I'm in the process of redesigning my website, and I'm trying to decide whether to keep the navigation extremely simple or leave the drop-down menu for galleries. Currently, my navigation is something like this: Galleries
Intermediate & Advanced SEO | | shannmg1
> Gallery for State or Country (example: California)
> Sub-region in State or Country (example: San Francisco)
Blog
Prints
About
Contact Selling prints is the top priority of the website, as that's what runs the business. I have lots of blog content, and I'm starting to build some good travel advice, etc. but in reality, the galleries, which then filter down to individual pages for each photo with a cart system, are the most important. What I'm struggling to decide is whether to leave the sort of "mega menu" for the galleries, or to do away with them, and have the user go to the overall galleries page to navigate further into the site. Leaving the mega menu intact, the galleries page becomes a lot less important, and takes out a step to get to the shopping cart. However, I'm wondering if the amount of galleries in the drop down menu is giving TOO many choices up front as well. I also wonder how changing this will affect search. Any thoughts on which is better or is it really just a matter of preference?0 -
Mobile friendly - Sub domain after responsive?
My client has a mobile website (m.website.com) and is working on a responsive website. The site is already labeled "Mobile friendly" on the SERP and I was wondering if, when the site will be responsive, it would be worth it to redirect the subdomain or it would be safer to keep the subdomain and still redirect mobile users to it since we're already Mobile friendly (we would keep the rel alternate on the main domain and the rel canonical on mobile).
Intermediate & Advanced SEO | | Digitics0 -
Link to image (jpg) - Do I benefit? If not how can I?
Doing some research I found a .edu page linking directly to an image on my site. I can't see how this really benefits me so am wondering how to point the link juice somewhere useful, like the page on which the image resides. Can this be done? One idea that just occured to me would be to rename the image and set up a 301 in the .htaccess. Would that work?
Intermediate & Advanced SEO | | Cornwall0 -
Canonical Meta Tag Best Practices
I've noticed that some website owners use canonical tags even when there may be no duplicate issues.For examplewww.examplesite.com has a canonical tag.......rel="canonical" href="http://www.examplesite.com/" />www.examplesite.com/bluewidget has a canonical tag.......rel="canonical" href="http://www.examplesite.com/bluewidget/" />Is this recommended or helpful to do this?
Intermediate & Advanced SEO | | webestate0 -
What is the best Keyword Research Process and Tool?
I'm trying to re-fine my keyword research process and take any pointers you can give. Also, please share the tools you use these days 🙂 I need to make my process fast and efficient, right now it feels bulky.
Intermediate & Advanced SEO | | Hyrule0 -
Mobile version creating duplicate content
Hi We have a mobile site which is a subfolder within our site. Therefore our desktop site is www.mysite.com and the mobile version is www.mysite.com/m/. All URL's for specific pages are the same with the exception of /m/ in them for the mobile version. The mobile version has the specific user agent detection capabilities. I never saw this as being duplicate content initially as I did some research and found the following links
Intermediate & Advanced SEO | | peterkn
http://www.youtube.com/watch?v=mY9h3G8Lv4k
http://searchengineland.com/dont-penalize-yourself-mobile-sites-are-not-duplicate-content-40380
http://www.seroundtable.com/archives/022109.html What I am finding now is that when I look into Google Webmaster Tools, Google shows that there are 2 pages with the same Page title and therefore Im concerned if Google sees this as duplicate content. The reason why the page title and meta description is the same is simply because the content on the 2 verrsions are the exact same. Only layout changes due to handheld specific browsing. Are there any speficific precausions I could take or best practices to ensure that Google does not see the mobile pages as duplicates of the desktop pages Does anyone know solid best practices to achieve maximum results for running an idential mobile version of your main site?1