Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
mobile friendly images for Google
I’ve been getting ready for this revised Google ranking system for your websites that came into existence today, where sites that are not “mobile friendly” are apparently going to be penalised, and have been looking at serving up my images differently so that a huge slideshow is not produced as it is on a desktop computer or table.
I’m using adi_mobile to just serve a single image rather than a big slideshow to smaller screens, and that is working just fine.
I’m using two methods to get the images up.
For individual articles:
<txp:article_image width="320px" height="0" class="align-center" />(You can’t put width=“100%”.)
For article lists:
<txp:thumbnail id="1195" style="max-width='100%'" />(No surprise the max-width doesn’t work.)
I have a problem with getting any image to stretch across the full width of the different sized mobile screens. If I optimise for an iphone 5 the image doesn’t make it across the full width of an iphone 6 because of the different screen sizes. And there a million different screen sizes, I want to keep it simple.
Any thoughts about these approaches.
Offline
Re: mobile friendly images for Google
Just some more info here. Man, this is a neurone teaser.
1. I am using the website mobilephoneemulator.com to test the code, they give you a choice of a few different recent mobile phones to see how it looks.
I hope that the emulation is true to an actual phone, it sure looks pretty.
In any case I have changed the status of my site when tested at the official Google testing website from a Big Fail to Awesome!, which indicates that something has gone right.
Are there any better phone emulation sites around?
2. I can approximate the look I want if I have the thumbnail set to 375px wide, that works in the iphone 6 and is just clipped for the iphone 5, the overflow is hidden, the difference between 375px and 320px, it isn’t so significant in the way it looks. I have just over 500 articles on this particular site each with an article image, in all over 2000 images. Sorting out which are the actual article images, there are galleries as well, and changing them from 450px, which are currently used in my page extracts, to 375px would be a pain and I might eventually get around to doing it.
It would kinda help if either <txp:thumbnail>, <txp:article_image> or even <txp:image> had a width=“100%” attribute. In view of the size of the image it would be best to deal with the thumbnail sized image, 375 × 176px, that’s way tiny in comparison with the 1080 × 500px article images.
The <txp:thumbnail> has an attribute style="style rule" but it seems to ignore anything to do with width="100%"
Maybe there’s another way around that is so basic and obvious it has eluded me. Maybe just a div with a class.
Last edited by detail (2015-04-22 05:42:05)
Offline
Re: mobile friendly images for Google
Just use your CSS stylesheet to serve up responsive images, don’t need to use inline CSS attributes for this.
/**
* Make embedded elements responsive.
*/
img,
video {
max-width: 100%;
height: auto;
}Also note that to pass Google’s Mobile-Friendly Test tool your site doesn’t have to be 100% optimised for Google PageSpeed Tools, that’s a separate set of tasks (although one worth pursuing as best you can, obviously). So don’t see the fact that your images are slightly larger in pixels than the viewport as a massive problem.
In future, maybe look at the img srcset as a more effective way of serving mobile optimised images.
Offline
Re: mobile friendly images for Google
Wow, that works. Nothing like stating the obvious.
Being self taught in this coding game sometimes make you have complete blind spots.
Thanks for that Phil.
Last edited by detail (2015-04-26 04:49:53)
Offline
Pages: 1