This is what is getting to me.
Currently, the mobile version of my photo site allows people the option to view the photo full-size directly in their browser even tho its larger than the standard hardware pixel resolution most phones can handle. Because of this, I need to change my strategy so adsense bots don't think I'm linking non-mobile-friendly pages to the mobile site.
The only idea I have come up thus far is gzipping the image and offering the download as a gzipped file. This works fine for people with desktop computers, but I think this can be a disaster for mobile since mobile phones have limited memory and people have limited budgets and might not be able to find the right unzipping tool for gzipped files.
I ran tests with google page-speed insights on all my image download ideas.
For the idea to gzip the file, upon accessing the URL, the browser processes headers similar to this:
Last-Modified: Wed, 03 Dec 2014 05:00:00 GMT
Cache-control: max-age=864000,must-revalidate
content-disposition: attachment; filename="Photo2.jpg.gz"
Content-Length: 247064
Accept-Ranges: bytes
Content-Type: application/gzip
The desktop browser responds correctly asking the user to open/save the file, and the contents are correct and the compressed file is extractable. No problem there. However, with google's page-speed insights, I receive this message on desktop:
An error has occured
The URL was fetched, but nothing was rendered. Ensure that the URL points to an HTML page that loads successfully in a web browser. You may refresh to try again. If the problem persists, please visit the PageSpeed Insights mailing list for support.
It seems ok to me. So then I proceeded to try a jpeg image file itself and the browser then processes these headers:
Last-Modified: Tue, 23 Dec 2014 21:57:46 GMT
Accept-Ranges: bytes
Content-Length: 86685
Age: 0
Cache-Control: max-age=2592000
Content-Type: image/jpeg
Every browser is happy to display the image but google page-speed insights has an issue, particularly when testing with mobile.
Should Fix:
Configure the viewport
Your page does not have a viewport specified. This causes mobile devices to render your page as it would appear on a desktop browser, scaling it down to fit on a mobile screen. Configure a viewport to allow your page to render properly on all devices.
I also tried the option to make the image a forced-download image, almost like the gzip setup. The headers processed are:
content-disposition: attachment; filename="test.jpg"
cache-control: max-age=864000,must-revalidate
Content-Length: 86685
Content-Type: image/jpeg
In this setup, browsers are happy to offer this image as a file to download via a pop-up which is normal, but what got to me is that google reports the exact same problem about configuring the viewport.
I'm curious. What would be the best way to offer a full-sized downloadable image from a mobile website without resizing the image to fit the screen and without google's page-speed complaining about it?
Will I be forced to use the POST method and pray google doesn't complain even tho the button will look different compared to the rest already on site?
I want to make the process easy for mobile users without requiring too many extra steps and/or apps incompatible to some devices.