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 Audit: Getting a list of *ALL* Images on a Site?
Hello! We are doing an image optimization audit, and are therefore trying to find a way to get a list of all images on a site. Screaming Frog seems like a great place to start (as per this helpful article: https://moz.com/ugc/how-to-perform-an-image-optimization-audit), but unfortunately, it doesn't include images in CSS. 😞 Does the community have any ideas for how we try to otherwise get list of images? Thanks in advance for any tips/advice.
Intermediate & Advanced SEO | | mirabile0 -
Is it best practice to have a canonical tags on all pages
The website I'm working on has no canonical tags. There is duplicate content so rel=canonicals need adding to certain pages but is it best practice to have a tag on every page ?
Intermediate & Advanced SEO | | ColesNathan0 -
Product URL Optimisation
Hi guys, We are currently trying to add new products to our site but we are in a quandary on what type of URL structure to pursue. For example:
Intermediate & Advanced SEO | | michel_8
Product Name: Aspect Exfoliating Cleanser 240ml https://www.example.com.au/aspect-exfoliating-cleanser-240ml (including the size)
VS
https://www.example.com.au/aspect-exfoliating-cleanser 1.) Which is a better URL structure based on SEO 2018 and why?
2.) Is there any merit in removing the size from the URL key with the aim of attracting more traffic? Keen to hear from you guys! Cheers,0 -
What does actually Mobile First Index means?
Hello All, What does actually Mobile First Index means? Is it that on my desktop in google.co.uk when I will search my keyword then site will come on top whose Mobile performance is good as per google? and then what is Mobile Second Index? Thanks!
Intermediate & Advanced SEO | | micey1231 -
Best option for Affiliate links on your website?
Hello! I have a website which is completely affiliate based. What is the best option for the links on-page? Examples would be: affiliate.website.com/12901730?2=3532523=user12342901730?2=3532523=user?Whittie www.website.com/affiliate=user?Whittie=load-of-tracking=date=blah=blaH?blah And So on... Which look ugly as sin when you hover over the Anchor Text. Ideally I would like a 301 redirect to mysite.com/goto/affiliatename, which would then have a rel nofollow. This way I could also track the exit pages via Analytics too guess, which I've not currently got set up and i'm desperate for it to be done. Does this method effect anything on search engines though? I've seen mixed report, but going back to 2011 which is too long ago in the SEO world. Another option is to use the likes of "Bit.ly" or use another domain and host 301s on there? The new bit.ly integration from moz might come in handy here. Please advise on the subject, I really appreciate any help on this, as i'm at a brick wall. Thanks
Intermediate & Advanced SEO | | Whittie0 -
Should I remove the ?replytocom variables in wordpress?
I'm using Yoast's wordpress plugin and there is an option to remove the replytocom variables. I'm curious what everyone's thoughts were on that, and if I should do it. Here's the site if you need to see it. Thanks!
Intermediate & Advanced SEO | | NoahsDad0 -
What is the best way to learn SEO?
I was wondering if it's worth taking an SEO Training course. If so is it better to take a live class or Online class. Or is better to just read all the SEO Books out there? Or is there a good video series anyone can recommend? What is the best way to learn SEO? I have a good understanding of SEO but I'm not a Pro ( Yet ). Obviously SEO is always evolving so even the Pro's are constantly updating their skill set but I want to make sure my foundation is solid and complete. Advice Please. Thank you all.
Intermediate & Advanced SEO | | bronxpad0 -
Tips for Link Building for Mobile Sites
Hi, I wondered if anyone had any tips and advice for link building for mobile sites. Many thanks
Intermediate & Advanced SEO | | MarkChambers0