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
-
A grade optimised posts not showing in SERPs
Hi all, I've been using Moz to research, optimise and grade a broad range of copy and blog posts over the years. After the optimisation process I've always seen a relatively quick improvement of pages/posts in SERPs. I am currently working on a new website launched earlier in the year on a subdomain. There's a sitemap, fresh content added every month and the site has an verified Google Analytics and Search Console account. The content is quite niche with low traffic data for related terms, however, I am finding that after three or four weeks the optimised posts aren't displaying in the top 50 results in Google. These are the posts: https://sykeshome.europe.sykes.com/cut-the-cost-of-customer-support-use-a-work-at-home-model/ - optimised for "Cut the cost of customer support" (and also "Cut the cost of customer support: use a work-at-home model") https://sykeshome.europe.sykes.com/quality-and-compliance-in-a-work-at-home-environment/ - optimised for "Quality and compliance" (and also "Quality and compliance in a work-at-home environment") As a new website launched on a subdomain there aren't currently any inbound links, but I wanted to know if I am simply being impatient in expecting the above posts to rank higher (if only slightly), or if there could be a reason optimised content with a Moz A grade isn't showing in the first 50 results. Any advice or pointers would be much appreciated. Jonathan
Intermediate & Advanced SEO | | JCN-SBWD0 -
Hubspot (Primary CMS) and WordPress Blog on Subfolder?
We are thinking about transitioning a WordPress blog from a subdomain to subfolder on our main root domain that is run on Hubspot. Is there anything that we need to be aware of? In my mind, it should be a simply as creating the WordPress instance on a subfolder and then importing everything in and then setting up 301 redirects. Has anyone done this before? I ask because our product managers would like to continue to update their blogs within the WordPress environment rather than transition over to Hubspot. Thanks in advance!
Intermediate & Advanced SEO | | s1jkirkpatrick0 -
Invest in a Image Sitemap - Yes or No?
Hey Mozers, 2 part question I'm reaching out to see if you all think Image Sitemaps are totally worth it for a big company. I can totally understand its value for a smaller mom & pop company. With a larger company they would have way more products so is it worth it having an image site map? I cant find examples of image sitemaps online. Would you be able to provide a website that is doing it? I can only find video sitemaps.
Intermediate & Advanced SEO | | rpaiva0 -
Multiple keyword optimisation
What is the best way to optimise for multiple keywords for the same product? The situation basically is I have several products which I need to optimise currently only one page, the search terms that relate to the product are in some cases very different.
Intermediate & Advanced SEO | | seoman100 -
What is the best SEO way for a shop
Hi there ! A client want to sell some products on its future website but just a small range (the most part of this website will not be an online shop). The idea is to add a "shop" button in the menu to redirect clients in this shop. I would like your opinion about how should I construct this shop, what do you think is the best for SEO : "www.website.com/shop" or "shop.website.com" thank you in advance for your answers !
Intermediate & Advanced SEO | | EnjinFrance0 -
Best Keyword Taxonomy Discussion
Sorry to bring this up again but I think the title was very misleading resulting in helpful members ignoring the question/thread completely. Also, I believe this should be in the discussion section, but please correct me if I'm wrong? Hi All, This is my first post and hopefully a question that could help others in similar positions as I haven't been able to find a concrete answer on this anywhere. Say we are trying to rank for the keyword "security testing tools". Product name is "Sectest" and its a security testing tool. *We currently have an "SEO" section that is purely good content and the idea with this is to be able to rank for "security testing tools" talking about what to expect and look for in such tools and relevant content - Linking to our product page at the end of it. structure is brand.com/security-testing/tools and that would have a link to brank.com/products/sectest Obviously product pages would get their meta tags and content re-written so we don't compete for the same keywords. Is this approach optimal? or would google want us to link directly to the product page instead of "information" about security testing tools? Nobody in our sector is taking this approach and we have already started it, but I am starting to wonder if I am getting into big trouble further down the line. Thanks and best regards, 2 Responses<a class="image-button add-response-button"> </a><a name="post-131828"></a> | JorgeGarciaAspirant | about 22 hours ago |JorgeGarcia Just to make it clearer. Our competitors seem to be using "security testing tools" directly in their product pages. We would like to use "security testing tools" for a page with content on it and an introduction to our product and then link to our product page. | <a name="post-131872"></a> | SEO5Journeymen | SEO5Director - Marketing at SEO 5 Consulting Hi Jorge, How are your competitors ranking for their approach by using security testing tools directly. If they are doing well then i would adopt the same strategy and try to beat them with quality backlinks and good on site optimization. SEO is not the only thing you have to worry about , you also should keep conversion rates in mind. By first taking the visitors to a security tools page and then your product page you are increasing your conversion funnel and this might impact your conversion rates. At the end of the day , it's all about sales/revenue/leads/ROI so you dont want to do anything to jeopardize your conversions. That one extra step that the visitor has to take might result in fewer conversions. <a class="image-button add-response-button"> </a> | <a name="post-131946"></a> | JorgeGarcia |
Intermediate & Advanced SEO | | JorgeGarcia
JorgeGarcia Hi there, Although I do understand your reasoning, we have the resources and people quantity to focus on all things at once being a big a company. So at the present moment it wouldn't be a matter of prioritizing work - but rather - delivering the best future-proof strategy. I don't mind doing the same as our competitors, but sometimes stepping out of the sheep line is good. You do make a great and very valid point addressing that this is an extra step for the visitor and could lead to fewer conversions. This is holding me back a little bit. But, if properly implemented, wouldn't a content focused site rank way better than a product page would? I guess the real question is if prospects would really find value in the information about "security testing tools" or they would rather just get the product page instead. But just looking from Google eyes, what do you think of this approach? _After re-reading my post I realize I might sound as if all I want is you to agree with me and justify my approach, I don't really. I would really value any honest thoughts and reasoning 🙂 _ |0 -
Mobile site version - Is it a duplication issue?
There is a blog www.blogname.com and someone creates 2 mobile versions: iphone.blogname.com mobile.blogname.com they are the perfect copy of www.blogname.com (articles, tags, links, etc etc) How Google will manage them? Right now, my article gets backlink by three sites www.blogname.com iphone.blogname.com mobile.blogname.com
Intermediate & Advanced SEO | | Greenman0 -
What are the best joomla seo plugins?
When optimizing a joomla site what is the best plugins etc for seo tweeking
Intermediate & Advanced SEO | | DavidKonigsberg0