: How do I enable users to download large images on mobile in an SEO friendly way without complication? This is what is getting to me. Currently, the mobile version of my photo site allows people

@Harper822

Posted in: #CrossBrowser #CrossPlatform #GooglePagespeed #Images #Mobile

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.

Vote Up Vote Down

Login to post a comment!