Hi all,
I’m working with Freeway for a short while now and made a site with different background pictures for different pages.
My problem is that the background pictures take a long time to load if I go from one page to an other.
Anyone a suggestion how I can improve this?
See the site www.perpetuabloematelier.nl
hope somebody can help me.
Ronald
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Ronald,
You have many unnecessarily large images - starting with the main
background,
herfstblad-back2-.jpg - 3194 x 2504 pixels
Compressed, its transmission size is nearly a megabyte - that’s about 9
times larger than I would allow for a heavy load background image. This
puts a heavy burden on the user to download the image to their browser.
Worse, the decompressed size is almost 23 megabytes, which then puts a
heavy burden on the user’s browser AFTER it has been downloaded.
The largest I will allow a background image to grow to is 1600 x 1200
pixels. This is only my preference and you should also consider all the
other images a page must load. Here is a link to how I have solved your
problem:
http://cssway.thebigerns.com/workbench/du_jour/ronald_botman_background/index.html
Using Photoshop to resize the background to 1600 pixels wide, then using
the Save for Web and Devices to progressive jpg at quality of 30.
Transmission load now 73kb (down from 934kb) and a browser load of 5.7mb
(down from 23).
Now to get it to fit whatever the browser window size is, there is a small
CSS trick you can use to let current browsers take care of the scaling
issue - it’s been discussed a few times on this list but here it is again
for your sake. Simply add this to your body tag
background-size: cover;
That solves your background, but there is a second background image buried
in the page layout itself that is contributing to your problem. Now this is
more difficult, as you are using table layout for this and I generally do
not comment on table layouts, but there is a solution that will help reduce
the graphic load on even this type of layout… a solid-color
semi-transparent png to give the illusion I think you are trying to
achieve. Look at my sample page again… that central background is actually
a semi-transparent png I made in photoshop by sampling the darkest color of
your image and giving it some transparency, then replacing the current
images with it.
Here are links to both images that I used:
http://cssway.thebigerns.com/workbench/du_jour/ronald_botman_background/transback.png
–
Ernie Simpson
On Thu, Sep 20, 2012 at 6:10 AM, Ronald Botman email@hidden wrote:
Hi all,
I’m working with Freeway for a short while now and made a site with
different background pictures for different pages.My problem is that the background pictures take a long time to load if I
go from one page to an other.Anyone a suggestion how I can improve this?
See the site www.perpetuabloematelier.nl
hope somebody can help me.
Ronald
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 suppose that you are also using a very large or high resolution monitor,
as your content width is 1200 pixels. This doesn’t bother someone like me
with wide big screens to view your page with, but it could make viewing
your page more difficult on smaller screens or resolutions. Everyone has a
different idea on this though.
–
Ernie Simpson
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks Ernie, will try your suggestion
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I tried inserting “background-size: cover;” after the tag and then I tried the following from another discussion thread:
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
In both cases, the image can only fill the browser window when tiled.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Please, publish your page and provide a link - you are doing something
wrong if it’s not working and I cannot tell what without seeing your page
code.
–
Ernie Simpson
On Mon, Feb 11, 2013 at 11:50 AM, Trey Yancy email@hidden wrote:
I tried inserting “background-size: cover;” after the tag and then
I tried the following from another discussion thread:background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;In both cases, the image can only fill the browser window when tiled.
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
Sorry, but I don’t have it available online.
Where do I insert this snippet? “after ”? What about the settings in the properties palette? Are they ignored?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Trey, it does NOT go in the Page Markup.
When a background-image is set for a page in Freeway Pro, the style rule is
attached to the body element of the page. Therefore, the background-size
property must also be attached to the page’s body tag.
One way to do this is to go to the Style Editor (menu Edit > Styles) and
create a style for the body tag. Just click the plus icon to create a new
style, then enter the name body into the Tag field while deleting the
automatic stylename in the Name field. Open the Extended style window and
create a new rule - name it background-size and enter cover as the value.
Save your file and preview it. Done.
–
Ernie Simpson
On Mon, Feb 11, 2013 at 3:49 PM, Trey Yancy email@hidden wrote:
Sorry, but I don’t have it available online.
Where do I insert this snippet? “after ”? What about the settings in
the properties palette? Are they ignored?
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
What I have learned here is that the name has to be a proper html term. You can’t give it a name and enter the term in the value field (i.e., “background-size: cover;”).
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
the name has to be a proper html term
name: background-size
value: cover
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks DeltaDave. Worth 1,000 words.
What he said…
–
Ernie Simpson
On Mon, Feb 11, 2013 at 6:36 PM, DeltaDave email@hidden wrote:
the name has to be a proper html term
name: background-size
value: cover
David
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 was able to figure that one out. Thanks.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options