0

On this page, the images look fine on desktop but are white/not found on mobile devices. I have no idea why this is happening. I'm just calling an img tag but it says its not found on mobile even though it is there

Colton Anglin
  • 431
  • 3
  • 9
  • 19
  • what model mobile and what platform used (browser) ? – Hichem Jan 26 '14 at 21:56
  • I personally used an iPhone with Safari (iOS 7). – Colton Anglin Jan 26 '14 at 22:03
  • 1
    All of those images are _large_, 3,264 x 2,448 pixels in size and several MB of data – that’s clearly too much for mobile! (Not technically, but in regard to traffic it’s a slap in the face of every mobile user). Use images in appropriate sizes. – CBroe Jan 26 '14 at 22:04
  • thats it the pictures are large so the cache of browser is busy – Hichem Jan 26 '14 at 22:05
  • If you really want to force large images, then I would address the missing alt tags, not just for seo but so the visitor can get an idea of what they are waiting for... But would look at the css width issue I have raised below :) – Neil Jan 26 '14 at 22:26
  • Please paste your code here instead of linking to some external website, which by the way doesn't exist anymore. – jor Jun 22 '17 at 11:09

2 Answers2

5

I have checked your files, @MrVimes is correct your should finish your html which will help validate better on slower devices.

However the problem is purely down to size of the image. Chrome Dev tools shows me that they are massive in size, Enable emulator and select iPhone 5 and see what happens. It is just taking a long time to download.

Try using Picturefil.js to serve smaller images or make them smaller in your software application.

This was the picture I got from Google Dev Tools (which is free and amazing):

enter image description here

Also I noticed that your need to change the way the images are handled in CSS, if you open dev tools:

enter image description here

Position:center

Is not valid, maybe set it to relative or static depending on how you want your page structure to look.

I also saw you may want to update your header with this css:

z-index: 99999;

This will make your header appear on top, as the z-index changes the layers of the html elements (much like the fillings in a sandwhich)

Neil
  • 971
  • 2
  • 12
  • 33
  • I've compressed them to about 50KB each and it works! Thanks, Neil! – Colton Anglin Jan 26 '14 at 22:10
  • I deleted my answer as it was incorrect. Also apparently the syntax is correct for html5. http://stackoverflow.com/questions/7366344/do-we-still-need-end-slashes-in-html5 – MrVimes Jan 26 '14 at 22:10
  • Im only 23, and I still have the OCD closing tag in my head. I did double check but if you are using XHTML for HTML EMAILS I would still add them. But great link @MrVimes – Neil Jan 26 '14 at 22:38
0

sorry my friend but this is false COMPRESSSING THE IMAGES TO 50KB the big images won't appear because your cache browser is full you have to empty your history/cookies/cache of the browser

IOS DEVICE SUPPORT 32 MEGAPIXEL SIZE OF IMAGE IN SAFARI

take a look here for maximum image size and resolution support Apple IOS developper

to delete your cache just go to "Setting=>Safari=>Cleare cache=>clear cache" and that's it

Note: Check the avaible space on your IOS DEVICE should be greater then 50MB

You have to Enjoy the technologie by let the images greater then 1.5mb and works in both of computers/devices
Hichem
  • 1,111
  • 11
  • 30
  • yes clearing cache is a great idea, however it needs to be nipped in the bud. If you also note that a fixed width for mobiles is not supporting people with slow internet. I would suggest to set a min-width:100%;height:auto;Great spot on the safari docs! – Neil Jan 26 '14 at 22:23
  • the right solution of this this problem is not compressing images all peaope have at lease débit of 300kb/s so this is wrong – Hichem Jan 26 '14 at 22:25
  • 1
    thanks for the reply, I have not once mentioned compressing. I would make the image smaller to match the needs of the size. If the image is 500px * 200px then create one that size. Making the browser force the size is unneeded heavy lifting. Also making the size of the image smaller, will naturally make the size easier to download for all browsers. – Neil Jan 26 '14 at 22:30