iPhone JPEG Background Not Appearing

Freeway
1

Hi All,

I’m trying to use a 2700 x 1400 jpeg image for my background of my site, link below. On the iPhone the background jpeg image is not appearing. When I upload a 2500px x 1200px jpeg the background appears. I am aware that the iphone has some image size limitations. Could this be the issue I am having?

From what I have read jpegs on the iPhone can be up to 32 megapixels but will start subsampling at 3 megapixels. I’ve read PNG should be smaller then 3 megapixels.

Could anyone enlighten me as to what the correct iPhone image size limtations are, as I have read several limatations. Also why can I not get the background that is much less then the supposed 32 megapixel limit to show up?

Site With The Issue: (www.onedotdesigns.com)

Thanks,

Christian

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Does anyone have any input to this iPhone image size issue?

Christian

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

I have never tried to use an image that large on any site, on any
platform. I’m surprised it works at all. Try to design your way out of
using it – use a tiling background, a group of different tiling
backgrounds on different elements, etc. There’s many ways to fix this,
but you’re hitting it with a big hammer using a single image instead.

Walter

On Apr 15, 2011, at 10:40 AM, TeamSDA wrote:

Does anyone have any input to this iPhone image size issue?

Christian

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Hi Christian,
I looked at this briefly this morning and although your background image is less than 180k as a JPG Photoshop tells me that the image data is about 10.4MBs when decompressed. I read in an old post that Apple have tried to throttle large images like this for Mobile Safari and although I couldn’t find anything on Apple’s own site (either on the front end or in the developer sections) I did stumble over an article that mentioned images smaller than 1024x1024x2 which is 2MBs.
Here’s the page; http://www.waterworld.com.hk/en/node/78

When you check the site in the iPhone does it matter if you are connected over Wi-Fi or 3G or does the image not appear for either connection?

You may want to consider adding a specific stylesheet for the iPhone so that these users get an image you know will load. Here’s are a few examples of how to add iPhone specific styles;
http://iphone.wikidot.com/detection
Regards,
Tim.

On 15 Apr 2011, at 15:40, TeamSDA wrote:

Does anyone have any input to this iPhone image size issue?

FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro.
…
Protect your mailto links from being harvested by spambots with Anti Spam.
Only available at FreewayActions.com
…
http://www.freewayactions.com

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Hi Guys,

Thank you for your response,

Walter, yes I understand that the images pixel dimensions are very large for the web and we will mostly likely reduce them. From what I had read before, our image size should have been fine, just looking to get a little bit educated. But from what Tim said our images should be less then 2 megapixels.

Tim, The article says 1024 x 1024 x 2 is the iphone limitation. Is it just a fluke at the image shows up when I make it 2500 x 1200? In regards to the 10.4 MB decompressed, how is this effecting the iPhone?

I’ve only tested it on the Wi-Fi, so if it doesn’t work on Wi-Fi then it mostly likely won’t be working on 3G (Right now I have no way to test 3G)

Christian

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

All images, no matter how they are compressed for transmission,
require a certain amount of memory in order to display on screen at
full size.

For a bitmap in millions of colors, this is X x Y x 24 or 32 bits per
pixel (depending on the format – PNG has 8 bits per RGB color plus
another 8 bits for the alpha transparency). Multiply the width in
pixels by the height in pixels, then multiply by either bpp
multiplier, and divide by 8 for bytes. Then start dividing by 1024 to
arrive at Kilobytes, another for Megabytes, and so on. The math is
unavoidable.

In order to display a compressed image, the browser and operating
system have to decompress it and hold the entire thing in memory
before sending it along to the video card. iOS is a modern, virtual
memory operating system, but even still, the hardware has its limits.

Walter

On Apr 15, 2011, at 1:48 PM, TeamSDA wrote:

Hi Guys,

Thank you for your response,

Walter, yes I understand that the images pixel dimensions are very
large for the web and we will mostly likely reduce them. From what I
had read before, our image size should have been fine, just looking
to get a little bit educated. But from what Tim said our images
should be less then 2 megapixels.

Tim, The article says 1024 x 1024 x 2 is the iphone limitation. Is
it just a fluke at the image shows up when I make it 2500 x 1200? In
regards to the 10.4 MB decompressed, how is this effecting the iPhone?

I’ve only tested it on the Wi-Fi, so if it doesn’t work on Wi-Fi
then it mostly likely won’t be working on 3G (Right now I have no
way to test 3G)

Christian

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

So if you want here is a snippet that will redirect on the basis of a screen size less than 699px

<script type="text/javascript">
<!--
if (screen.width <= 699) {    document.location = "http://www.yoursite.com/youriphonepage.html";    }    //-->
</script>

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

Walter, thank you for your explanation. Just to reiterate, our current background image with a 2713 width x 1338 height, comes out to 10.4 MB as decompressed. (2713 x 1338 x 24 / 8 / 1024 / 1024 = 10.4)

Is there any code that I could use that would load a specific background image for the iPhone and iPad? Probably 1024 wide x 768 high to be compatible with the iPad resolution.

Christian

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

Just use the iPhone/iPad redirect action to a page with those specs.

Or use the bit of code I placed before to redirect based on screen size.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

Hi David,

Thank you for the suggestion. What I am looking to accomplish is for the iPhone and iPad to use the same page just put a script of code in for them to use a different background image.

Christian

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

I appreciate that but I would suggest that it would be much easier to duplicate the page, change the bg image and use the redirect.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

12

Hi Christian,
One of the links I sent before contains a block of code that allows you to set up a css stylesheet that should only get applied to mobile devices;

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iPhone.css">

Insert this code using Page > HTML Markup > Before end head and attach a hand coded stylesheet to the page using the Upload Stuff (or similar) action. You will also need to upload the smaller background image as well.

The contents of your iPhone.css file will look something like this;

body { background-image:url(my-smaller-background-image.jpg); }

Now when you test your page on an iPhone you should see the alternative background image.
Regards,
Tim.

On 20 Apr 2011, at 00:30, TeamSDA wrote:

Is there any code that I could use that would load a specific background image for the iPhone and iPad? Probably 1024 wide x 768 high to be compatible with the iPad resolution.

FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro.
…
Protect your mailto links from being harvested by spambots with Anti Spam.
Only available at FreewayActions.com
…
http://www.freewayactions.com

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

13

Hi Tim,

Thank you for your post. For some reason it doesn’t seem to be functioning for me. Below are a couple questions.

  1. Link to site is below. Can you see something that could be going wrong?

  2. I see that the code is setup for a 480 maximum screen resolution. Would I change the maximum screen size to 1024 for it to work on the iPad? Would this still provide the smaller background image to the iPhone?

  3. I am using “Upload Extra Resource” and only have the option to put the files in the Resource or with my Page’s HTML file. I chose to upload the iPhone.css file in the same folder as the Page’s HTML file, does it need to go into the css folder? If so, how do I accomplish this.

Website: (www.onedotdesigns.com)

Stylesheet: (www.onedotdesigns.com/iPhone.css)

iPhone Background Image: (www.onedotdesigns.com/Resources/background_iphone.jpg)

Thanks for all your help,

Christian

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

14

It doesn’t NEED to go anywhere special, as long as the page knows
where to find it.

Walter

On Apr 20, 2011, at 8:10 PM, TeamSDA wrote:

  1. I am using “Upload Extra Resource” and only have the option to
    put the files in the Resource or with my Page’s HTML file. I chose
    to upload the iPhone.css file in the same folder as the Page’s HTML
    file, does it need to go into the css folder? If so, how do I
    accomplish this.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

15

Hi Christian,
The link in your iPhone CSS file (that specifies the background image) has the file sitting alongside the home page in the same folder but the file itself is in the Resources folder. Here to be exact;
http://www.onedotdesigns.com/Resources/background_iphone.jpg

Either change the CSS style in the iPhone.css file to point to this file;

body { background-image:url(/Resources/background_iphone.jpg); }

or use the Upload Extra Resources Action to upload the image to the same directory as the parent HTML page.

Unfortunately I’ve no way of testing if the css switch works as I don’t have an iPhone with me and switching the user agent and window size in Safari isn’t enough to fool the page into making the switch itself.
In answer to question 2, yes you may need to play with the screen size figure to include the iPad in there as well.
Regards,
Tim.

On 21 Apr 2011, at 01:10, TeamSDA wrote:

  1. I see that the code is setup for a 480 maximum screen resolution. Would I change the maximum screen size to 1024 for it to work on the iPad? Would this still provide the smaller background image to the iPhone?
  2. I am using “Upload Extra Resource” and only have the option to put the files in the Resource or with my Page’s HTML file. I chose to upload the iPhone.css file in the same folder as the Page’s HTML file, does it need to go into the css folder? If so, how do I accomplish this.

Website: (www.onedotdesigns.com)

Stylesheet: (www.onedotdesigns.com/iPhone.css)

iPhone Background Image: (www.onedotdesigns.com/Resources/background_iphone.jpg)

FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro.
…
Protect your mailto links from being harvested by spambots with Anti Spam.
Only available at FreewayActions.com
…
http://www.freewayactions.com

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options