1

On my website I have a page that displays an image in optimized form. I made it display at 60% compression/quality instead of 100%. I also have the link to download the full 100% quality image to satisfy the picky people who are so particular with regards to every pixel of the image.

When I run the test in page-speed insights, I see the following issues listed for mobile and desktop respectively:

    MOBILE TEST RESULT

    76/100 Speed

    Should Fix:
    Optimize images
    Properly formatting and compressing images can save many bytes of data.
    Optimize the following images to reduce their size by 291.7KiB (99% reduction).

    Compressing and resizing <download link> could save 291.7KiB (99% reduction).

    Consider Fixing:
    Leverage browser caching
    Setting an expiry date or a maximum age in the HTTP headers for static resources
    instructs the browser to load previously downloaded resources from local disk rather than over the network.
    Leverage browser caching for the following cacheable resources:

    <download link> (60 seconds)

    89/100 User Experience

    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.


    DESKTOP TEST RESULT

    Should Fix:
    Optimize images
    Properly formatting and compressing images can save many bytes of data.
    Optimize the following images to reduce their size by 291.7KiB (99% reduction).

    Compressing and resizing <download link> could save 291.7KiB (99% reduction).

    Consider Fixing:
    Leverage browser caching
    Setting an expiry date or a maximum age in the HTTP headers for static resources
    instructs the browser to load previously downloaded resources from local disk rather than over the network.
    Leverage browser caching for the following cacheable resources:

    <download link> (60 seconds)

I understand that for me to get rid of the optimize image warning, I should deliver it at the same quality as what is on the screen, but that is pointless. Another way is to compress the image into a different file format and offer that, but that requires the user to use a third-party program just to extract one file.

As for leverage browser caching, How often would someone want to use the same download link especially when they can view the same thing on screen but at a slightly lower quality?

I need some advice on the best way to handle these issues because I am monetizing the website with google adsense, and when I get errors thrown at me, it makes me think I'll earn nothing from them.

And why do I need to configure a viewport for a download file?

I'm confused

Also, here are my headers for the file:

HTTP/1.1 200 OK
Date: Thu, 12 Mar 2015 14:12:03 GMT
Server: Apache
Set-Cookie: PHPSESSID=6344462b6fa83d4460919191def27b85; path=/
Vary: Accept-Encoding
ETag: "354331de98415e85cb48ef40b09a5365"
Last-Modified: Thu, 12 Mar 2015 13:50:47 GMT
Cache-control: max-age: 5,must-revalidate
Expires: Thu, 12 Mar 2015 14:13:03 GMT
Connection: keep-alive
content-disposition: attachment; filename="Photo8.jpg"
Content-Transfer-Encoding: binary
Accept-Ranges: bytes
Content-Length: 298982
Content-Type: image/jpeg
  • I found that using tools such as PhotoShop are not as good at compression and image quality as this tool: smalleranimals.com/thumb.htm which is only $15 to license. If images are important to you, you can serve a lean one for the page and a link to a higher resolution copy for those who want that. I found that using ThumbNailer is outstanding at good quality images- especially since this only what this company does and they are real experts in the field. I was able to reduce images significantly without reducing image quality far better than what PhotoShop can do with this tool. – closetnoc Mar 12 '15 at 16:09
  • So you're suggesting I should change the link to make a potentially "thin content" type of page showing the image itself instead of having the link cause the browser to ask the user what they want to do with the jpeg file? and I'm actually using PHP to set image compression by modifying the last parameter in imagejpeg() – Mike Mar 12 '15 at 16:13
  • I apologize. I am not suggesting creating a thin page at all. Just where the image is on a webpage, make it lean and create a link to a higher resolution image. This may not apply to what you are doing- I have no idea. But I do suggest trying ThumbNailer in trial mode to see if you get a better effect. I also suggest looking into PNG file format. I am not sure how the PHP compression thing works. I am rather old school- mostly because I am old! ;-) So if my suggestion is not right- please forgive me and ignore it. But put ThumbNailer in your toolbox anyway- it pays dividends from time to time. – closetnoc Mar 12 '15 at 16:20
  • No need to apologize. I know you're trying to help, but I'm also trying to look at my situation the way an SEO expert would look at it and I want to create something thats best for everyone. – Mike Mar 12 '15 at 16:30
  • For what it is worth, I do SEO and answer a lot of SEO questions here. Mostly, I do not worry about image download speeds too much but do try and lean them out as much as I can. The reason for this is that images do largely effect page download speeds more than dang near anything. Being old school keeps me in the simple world with simple solutions. PHP can do wild things these days. I do not write PHP code. It may be that the PHP compression is not as good as it could be or as good as other tools. Assuming a gallery, I would suggesting experimenting outside of the current PHP solution. – closetnoc Mar 12 '15 at 16:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.