Background photo loads last

I’ve got a background photo embedded into the main container.

I did some rearranging of the other content, including dropping an HTML5 animation into the container and then returning it to being an independent layer.

Now when I view it online, everything loads before the background image (which doesn’t show up for a full three seconds). I have no idea how to get the background photo to load first. It doesn’t show up in the item view


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

URL:
http://ohair.com/_test/index.html


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

Well, if the “background” image is managed by an action (like Background
Supersizer) and it uses javascript to do so, then I think DOM loads
javascript last – am I right, o great internet consensus?


Ernie Simpson

On Mon, Jul 22, 2013 at 10:51 AM, Trey Yancy email@hidden wrote:

URL:
http://ohair.com/_test/index.html


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

This is standard HTML. The photo was placed into the container as background-size cover.

The slowness may have something to do with the server, as I can clear the cache and preview it from the hard drive without any speed issues.

Even so, it would be a nice thing to be able to force the image to load first.


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

Try this: http://cssway.thebigerns.com/workbench/trey-bgimage/

I used Photoshop to optimize the image from 1.9mb to around 130k

I used Pingdom to measure the individual load times before and after, and
the load time in the browser is significantly reduced

Compare load dynamics:

It’s not the server or delivery time, just the extra time for the browser
to decompress the image from 300+k to 1.9m natural.

You can download the optimized version here:
http://cssway.thebigerns.com/workbench/trey-bgimage/testbackground2cr-optimized.jpg

These are the PSD Save for Devices setting that I used:

:slight_smile:


Ernie Simpson

On Mon, Jul 22, 2013 at 1:04 PM, Trey Yancy email@hidden wrote:

This is standard HTML. The photo was placed into the container as
background-size cover.

The slowness may have something to do with the server, as I can clear the
cache and preview it from the hard drive without any speed issues.

Even so, it would be a nice thing to be able to force the image to load
first.


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

I’m not sure where you’re getting the 1.9 MB. The image I brought into Freeway is 440 kb. (admittedly large but I needed it to look good full screen on a 27" with no artifacts).

I checked the file on the web server. It is 365 kb. This is the same size as the image found my local upload folder.

I took a look using Safari’s web inspector. It took a whopping 13 seconds to display the image by itself but when I dragged it to my desktop it still weighs in at 365 kb. Large as it is, this only took around a 1.5 seconds to display the whole page last week (starting with an empty cache).


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

Trey,

A jpg is a compressed image, so there is the compressed file size - for transmitting the file over the Internet, then the decompressed size which is the visual image rendered by the browser. Photoshop lets you measure both.

You never said if my optimized version performed better for you - it certainly did for me and you can measure the dramatic difference with the web tool I shared.

Best,


Ernie Simpson, aka The Big Erns

On Jul 22, 2013, at 2:43 PM, “Trey Yancy” email@hidden wrote:

I’m not sure where you’re getting the 1.9 MB. The image I brought into Freeway is 440 kb. (admittedly large but I needed it to look good full screen on a 27" with no artifacts).

I checked the file on the web server. It is 365 kb. This is the same size as the image found my local upload folder.

I took a look using Safari’s web inspector. It took a whopping 13 seconds to display the image by itself but when I dragged it to my desktop it still weighs in at 365 kb. Large as it is, this only took around a 1.5 seconds to display the whole page last week (starting with an empty cache).


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

I’m not sure where you’re getting the 1.9 MB.

The point is that jpeg is a compressed image format which has to be decompressed by the Browser to make it viewable.

I am assuming that Erns 1.9Mb is the decompressed file size.

Every Browser has to go through that process to display the image. The bigger the file the longer the download/decompression.

David


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

I know you made a serious effort with this and I very much appreciate it. I used to be an Adobe sysop and am familiar with Compression. The thing is that I didn’t make any changes to the image and it has been up and working perfectly for nine weeks, but suddenly this morning the background images on all the pages were taking far too long to display and (a second issue) the background images were loading last.

Obviously something was corrupted. My focus is on tracking down the source of the problem. I am concerned that this might somehow be related to compatibility/translation issues with version 6.

This morning I accidentally started to open this 5.5 file with 6 and immediately quit without making changes. I then launched the original file in 5.5, made some minor changes unrelated to any bitmapped items, previewed it via Safari without a problem, then saved and uploaded it. When I checked it out via the Internet the slow background image and last-to-load thing happened. It behaves as though the 5.5 file was changed somehow without saving.

I took the source png file and source pngs for the other page backgrounds, re-output them as .jpgs, and updated the image links. It is still slow, plus the background is the last thing to load, which makes the site look hugely unprofessional.

I’ll contact SP directly. Thanks again.


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