1

Probably a basic question to the experts in this

Example:

I have image 2000x1500px @ 556kb - a set of pictures of that size causes iOS devices to not load the page (considering there are many pictures) due to cache levels I'm guessing.

If I create two of the same files one at 2000x1500 and other at 800x450 with a much lower weight due to smaller dimension - which would be intended for mobile devices only.

How would I address that in CSS or whatever is the right method to go about this?

Nettrus
  • 11
  • 2
  • That is exactly what the new `` element does, with its multiple `` descendants. See, for example, the [MDN page](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture). – Mr Lister May 06 '15 at 07:28
  • @MrLister `` tag is unfortunately even less supported than `srcset` – Tim Rijavec Jun 10 '15 at 15:56

2 Answers2

0

If you can determine what image sizes to use for mobile/tablet/desktop/extraneous cases then you can use javascript or CSS media queries to accomplish replacing the images on the fly.

For instance say you know all your mobile devices will trigger at window width 768px and that it is safe to assume an image size less than 500kb will be good for all these devices, then CSS is your solution:

HTML

<img class="mobile_image" src="mobile_image.png" alt="Mobile Image"/>
<img class="desktop_image" src="desktop_image.png" alt="Desktop Image"/>

CSS

@media (max-width: 768px) {
    .desktop_image { display: none; }
    .mobile_image { display: block; }
}

Note: Media Queries for standard devices

If you need something more sophisticated, due to identifying which device is being targeted, you can also couple the above CSS with Javascript for image detection.

Look here: What is the best way to detect a mobile device in jQuery?

Community
  • 1
  • 1
AGE
  • 3,389
  • 3
  • 34
  • 56
0

You could use srcset attribute

<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x,
                             image-3x.png 3x, image-4x.png 4x">

Nice demo can be seen here and more details here

To see which browsers support this attribute see here, firefox 38+, chrome 39+, safari 7.1+, opera 29+, ios safari 8.3+ ...

The src and srcset attributes on the img element can be used, using the x descriptor, to provide multiple images that only vary in their size (the smaller image is a scaled-down version of the bigger image).

Browsers can then use this information to pick the best image source.

Other option is to use <picture> tag and srcset attribute together.

The picture element gives developers control when those images are presented to the user.

<picture>
   <source media="(min-width: 20em)"
           srcset="image-big.jpg 1x, image-big-hi-res.jpg 2x">
   <source srcset="image-small.jpg 1x, image-small-hi-res.jpg 2x">
   <img src="fallback-image.jpg" alt="No support for picture tag">
</picture>
Tim Rijavec
  • 1,681
  • 21
  • 25