5

I have Matt Willcox's great adaptive-images working on my site. It works like this:

  • Server delivers 800px image.
  • Adaptive-images redirects to an image that is no bigger than your resolution width

The problem is that BootStrap displays the images in columns for desktop and full-width for tablet and mobile. So technically, adaptive should be delivering smaller images for desktop than the smaller viewports. Google PageSpeed is slamming me for this. I have 800px images scaling down to about 150px or so.

I've done a lot of research but can't seem to find a workable solution. Should I hack adaptive-images to look at a feature other than resolution width to deliver the correct image? Is there a different library that addresses this issue?

oppositeday
  • 113
  • 1
  • 5

2 Answers2

0

As resolution in cookies is set via JS, you can try to override code that is provided in installation step 3

Cookies should have higher priority according to this:

It handles cases where there isn't a cookie set; mobile devices will be supplied the smallest image, and desktop devices will get the largest

EDIT Also I recommend to pay attention for tag as it is described on the projects github page However, there are still problems with browser support for this features, hope they will be fixed in the nearest future

xtraicecat
  • 21
  • 6
0

If you are using a S3 bucket to load your images then you can try AWS lambdas to handle your resizing work. You can refer to below article https://medium.com/@vinay.humberi/image-compression-and-optimisation-with-aws-lambda-deb766fac2fe

Or if you dont want to use amazon services then there is super cheap saas application available called gumlet https://www.gumlet.com/

Check it out! hope this helps you.

Vinayak humberi
  • 191
  • 3
  • 8