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
-
Hostage Taking by My Wordpress Developer
Since 2013 a Wordpress developer has coded my real estate website. Their hourly rate is $24 but the programmers take too long to perform tasks and the service has become prohibitively expensive. Examples of unreasonable time estimates below: | | 1. Change theme settings so posts/pages do not display a date. -> 7 hrs
Intermediate & Advanced SEO | | Kingalan1
2.Google search results are displaying the breadcrumb on the top of each page rather than the URL. Please correct so this does not display. -> 3 hrs
3. Install SSL certificate to www.metro-manhattan.com domain -> 8 hrs | | The above does not include 5-6 hours for testing. I am considering changing vendors. Potential programmers have asked how the site was developed and to what extent is it is customized. Ends up several plugins were built from scratch. My question is whether a new developer is going to be able to pick up a custom coded site. That without understanding how the site was built, any change will break the site. My concern is that current developer has made themselves indispensable, and created a situation where there is no alternative to using them and they can therefore charge any price they want.Any thoughts? Also below are questions I asked my developer about how the site was built and their answers: | 1. Was everything coded using a child theme?
No, is a custom theme. 2. Did you use any ready made theme or just plugins
We used the theme and and we've used plugins. Third party plugins and plugins builded from scratch 3. Can Wordpress and every one of the plugin be updated?
Wordpress can be updated, core files was never modified. If after an update something start to work wrong is due to some radical wordpress change or similar Can't be updated: FireStorm Professional Real Estate Plugin Created at xxx: Form Submissions Report Miscellaneous Hooks and Filters NYC Check memory usage NYC SEO listings NYC Slider Sitemap Updater 4. Were any of the plugins customized and if so, which ones?
Yes, this plugin "FireStorm Professional Real Estate Plugin" |0 -
How important is the file extension in the URL for images?
I know that descriptive image file names are important for SEO. But how important is it to include .png, .jpg, .gif (or whatever file extension) in the url path? i.e. https://example.com/images/golden-retriever vs. https://example.com/images/golden-retriever.jpg Furthermore, since you can set the filename in the Content-Disposition response header, is there any need to include the descriptive filename in the URL path? Since I'm pulling most of our images from a database, it'd be much simpler to not care about simulating a filename, and just reference an image id in my templates. Example: 1. Browser requests GET /images/123456
Intermediate & Advanced SEO | | dsbud
2. Server responds with image setting both Content-Disposition, and Link (canonical) headers Content-Disposition: inline; filename="golden-retriever"
Link: <https: 123456="" example.com="" images="">; rel="canonical"</https:>1 -
SEO Friendly Files Redirected From Images
I have images (.jpg's) of products that when you click them redirect you to a .pdf's containing all the products' specs, patterns, colors, etc. These are 302 redirects that open on a different window when clicked on. Is there a way to keep these redirects and maintain SEO optimization? Any advice is appreciated.
Intermediate & Advanced SEO | | SuperiorPavers0 -
For SEO... - Display Graphs in HTML5 or Image?
Hi All, Would you recommend displaying charts and graphs as images or HTML5 (highcharts etc.)? Thanks
Intermediate & Advanced SEO | | BeytzNet0 -
URL strategy mobile website
Hello everyone, We are facing a challenging decision about where our website (Flash Gaming website) is going. We are in the process of creating html5 games in the same theme of the flash games that we provide to our users. Now our main concern is to decide how to show this new content to the user? Shall we create brand new set of urls such as : http://www.mydomain.com/games/mobile/kids/ Or shall we adapt the main desktop url : http://www.mydomain.com/games/kids/ and show the users two different versions of the page depending on whether they are using a mobile device (so they see a mobile version) or a pc/laptop (so they a see desktop version). Or even redirect people to a sub-domain : http://m.mydomain.com/ The main idea we had is to keep the same url structure, as it seems that google is giving the same search results if you are using a mobile device or not. And creating a new set of urls or even a sub-domain, may involve a lot of work to get those new links to the same PA as the desktop URL that is here and know since a while now. Also the desktop page game should not be accessible to the mobile devices, so should this be redirected (301?) to the mobile homepage of the site? But how google will look at the fact that one url is giving 2 different contents, CSS etc, and also all those redirects might look strange... we are worried that doing so will hurt the page authority and its ranking ... but we are trying to find the best way to combine SEO and user experience. Any input on this will be really appreciated. Cheers,
Intermediate & Advanced SEO | | drimlike0 -
Google images directing to Escaped Fragment instead of #!
Our indexed images in Google images are directing to:
Intermediate & Advanced SEO | | CBuy
http://www.cbuy.tv/?escaped_fragment= for example, instead of: the http://www.cbuy.tv/#! version. Is there something we can do on our end to fix this or is this a bug with Google?0 -
Do follow or no follow on wordpress site?
I have read many different opinions on what links to make do follow on a wordpress website versus which ones to leave as no follow. (internal and external) There does not seem to be any consensus among the inputs to date. Any perspectives on this would be appreciated. thanks
Intermediate & Advanced SEO | | casper4340 -
Building a mobile site.
We are building a mobile site that will be launching in another month. I’m concerned that the mobile site will start catabolizing our traditional rankings. Is there a way to keep this from happening? Should we utilize the cross domain canonical tag and point back to the traditional site URLs?
Intermediate & Advanced SEO | | SEO-Team0