Why not one big jpeg? - CPV Den Forum

Greenie · #1 05-16-2011, 02:23 PM

I haven't really had much of a chance to examine any CPV landers outside of the 32 LP templates given here (which I guess are about 2 yrs old, considering the 2009 tax landers)

I notice that the majority use a 750x550 bg image jpeg of around 80-140kb overlayed with text positioned by CSS.

(Some are .png of about 200+ kb, but they reduce to about half of that when converted to .jpg)

Obviously loading speed is important, but honestly, why CSS-positioned text over a bg image? Why not just do the whole CPV lander as one jpeg?

The fonts in Photoshop will give you more control over the appearance, and the additional font-text-layers only marginally increases the file size of the jpeg. In theory, the loading time of a single complete 750x550 jpg should be about what a full 750x550 bg image with integrated text would be anyway?

rado · #2 05-16-2011, 02:29 PM

Because you may have one jpg file as lander background, but you may want to split test 10 different text variations.

Greenie · #3 05-16-2011, 02:57 PM

But it's trivial to put the bg image on one layer, and then have 10 more layers with different text in each. Just turn on/off the layers as needed and save each variant as individual jpegs and ftp each to their respective directories. Why not that?

But to be honest, I haven't had much chance to "spy" on other landers. I have no toolbars on my PC here. Do most just use 1 big jpeg, or do most use a jpeg with CSS-positioned text?

(I notice that the 32 examples give 2 versions of each: a bg+text version and a full-PSD version)

rado · #4 05-16-2011, 03:57 PM

Originally Posted by Greenie

But it's trivial to put the bg image on one layer, and then have 10 more layers with different text in each. Just turn on/off the layers as needed and save each variant as individual jpegs and ftp each to their respective directories. Why not that?

But to be honest, I haven't had much chance to "spy" on other landers. I have no toolbars on my PC here. Do most just use 1 big jpeg, or do most use a jpeg with CSS-positioned text?

(I notice that the 32 examples give 2 versions of each: a bg+text version and a full-PSD version)

Mostly they are CSS. But now I am thinking that JPG will be better, because if it is JPG only, the competitors cannot search for keywords in your lander, so they cannot popup over your lander. For me dynamically insertion of text with CSS is easier, but now I am thinking the smarter way is to go with JPG only.

LukePeerFly · #5 05-17-2011, 04:44 AM

I see nothing wrong with just using an image. I've tested it in the past and the results were similar.

particles · #6 05-17-2011, 12:58 PM

I see nothing wrong with just using an image. I've tested it in the past and the results were similar.

Same here.

-Aaron

Greenie · #7 05-18-2011, 01:32 AM

Here's a question for anyone who uses 1 big image (or has seen landers with it):

A) do you make a separate image for just the "click here" button, and position it with CSS, or...

B) just add the "click here" button as another layer within the single big image, and make the whole image clickable?

(for choice B this means the "click here" button is essentially a fake button - it's just another incentive to click, even though the user could click anywhere on the whole lander)

blueingreen · #8 05-18-2011, 02:16 AM

I just make the whole image clickable, but also include a call to action
in the image itself. Such as a CLICK HERE or button.

You can always add text above or below the image to call out the user.'
'Welcome target.com visitor' etc ...

PapaBear · #9 05-18-2011, 03:30 AM

i've never sliced images for cpv. i use div and relative placement to move stuff around background images, but other than that, just get a better server and don't make your images huge. keep it simple

- lucas

PapaBear · #10 05-18-2011, 03:32 AM

oh the reason to use css? here is a scenario.. let's say you have a nice big ol bg image, but you need a form

you could slice and dice that image all day .....or, take 5 mins and position with css

- lucas