0

I hope the title isn't too confusing.

I am using Adaptive Images to detect a visitor's screen size and automatically create, cache, and deliver device/break-point appropriate re-scaled versions of the web page's embedded HTML images.

Now... some people want to save images on their mobiles/smartphones, but using Adaptive Images to serve up a smaller sized image (to save bandwidth/download time) gives them the smaller scaled image - rather than a nice sized or the original image.

Does anyone have any ideas on the following?

  1. Serving up scaled images
  2. Having the original available if people want to save them
user991830
  • 864
  • 5
  • 17
  • 35

1 Answers1

0

From the Adaptive Images website:

It creates and manages its own resized images using your "existing images as the source," and it will adapt to the same resolution brackets your site does with the CSS3 @media queries used in your Responsive Design.

Your images are still the "source", it's only adapting them for viewing. Try downloading an image and viewing the properties. It will retain the original dimensions, I've linked a jsFiddle demonstrating how @media queries work. If you shrink the screen and try downloading the image, you will see the "original" properties while scaling appropriately.

@media query:

@media screen and (max-width: 480px) {
  #lincoln img {
    height: 100px;
    width: 150px;
  }
}
Danielson
  • 88
  • 1
  • 8