0

I have an iPad with a Retina display and all things are loading nicely apart from some images (they don't show up in random).

What I have tried so far:

  1. Use -webkit-transform: translateZ(0); on those elements - didn't work
  2. Use data-at2x="<?= $img[0][1][0];?>" on the <img> tag - didn't work

What else could I try?

Norukh
  • 364
  • 1
  • 14
Xeen
  • 6,955
  • 16
  • 60
  • 111
  • 2
    Have a look at this post: http://stackoverflow.com/questions/15764257/html-images-not-loading-in-ipad-mini – Aruloci Apr 27 '15 at 05:58
  • @Aruloci thanks, but that does not work for me. – Xeen Apr 27 '15 at 06:06
  • How many images and what size do they have? – Uooo Apr 27 '15 at 06:19
  • @Uooo multiple images and the size varies a lot - sometimes it's the logo that's not being shown, sometimes it's a thumbnail, othertimes it's a large image. – Xeen Apr 27 '15 at 06:38
  • The reason I'm asking is because there is an [image size limit on iOS](http://stackoverflow.com/a/4721899/1328300). I don't know how this behaves on newer iOS devices, though. However, if the sum of your image filesizes is big, this could be the reason. – Uooo Apr 27 '15 at 06:49

1 Answers1

3

Have a look at the Apple naming convention in their "Resource Programming Guide" on page 46.

The bundle- and image-loading routines automatically look for image files with the @2x string when the underlying device has a high-resolution screen. If you combine the @2x string with other modifiers, the @2x string should come before any device modifiers but after all other modifiers, such as launch orientation or URL scheme modifiers. For example:

  • MyImage.png - Default version of an image resource.

  • MyImage@2x.png - High-resolution version of an image resource for devices with Retina displays.

  • MyImage~iphone.png - Version of an image for iPhone and iPod touch.

  • MyImage@2x~iphone.png - High-resolution version of an image for iPhone and iPod touch devices with Retina displays.

Aruloci
  • 589
  • 4
  • 18