Optimizing graphics & site speed!!!

Hi all,

Whats the general consensus as to the ‘best’ image format & settings to encompass both best look & speed on the web?!!

Also to spped up page, I use the webfast action… but is there something that pre-loads images so they download faster when initially visiting a site, rather than once they have bin cached?!! Say you have multiple carousels on a page with many panes for example?

Or perhaps & graphical content rich site?

Interested to see what you FW folks use, & percieve to be the ‘best’ of the ‘best’!

I like .pngs & obviously has its advantage if transparancy required… but I understand using a diplomative approach to certain images/needs/requirments is also needed! aka common sense!

Sadly I’ve had the displeasure of meeting fellow humans without this installed!!! "batteries not included etc…

Maybe you guys can elaborate on this…

The ‘Forum’ is yours…

Worm


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

On Jun 12, 2012, at 12:36 PM, Mr worm wrote:

Hi all,

Whats the general consensus as to the ‘best’ image format & settings to encompass both best look & speed on the web?!!

It depends a lot on the image. And the layout. There is no single right answer. I try to stick to JPEG for widest browser compatibility without hacks when showing regular foreground images of natural objects or when making background images. For logos etc. I almost always use GIF, again for widest usability and best text/graphics quality. If I need transparency, I try to balance the amazingness of PNG against its size and browser issues (IE, naturally) and use it if needed, or GIF if not strictly needed.

Also to spped up page, I use the webfast action…

Check to see if your host provides gzip compression automatically in the Web server (Apache and Nginx both do this) and if it’s turned on. That will gzip everything – pictures and code – while WebFast only does the code. You have to go back pretty far to find a browser that doesn’t know what to do with gzipped resources, and this lack of understanding is completely handled by the Web server in the negotiation phase of the HTTP protocol. Note that compressing resources only saves time and bandwidth on the transmission phase. Those resources still have to be decompressed by the browser and then display at their full uncompressed size. On a slower computer, this can take longer in total than sending uncompressed content in the first place.

but is there something that pre-loads images so they download faster when initially visiting a site, rather than once they have bin cached?!! Say you have multiple carousels on a page with many panes for example?

Carousel images are all preloaded into the page anyway. They are foreground images, fully visible (although off-screen under cover of CSS). The one that does not pre-load is ScriptyFader. Again, by design, that Action removes the content from the page and puts it in a “partial” that is loaded by Ajax. There, the design trade-off is that you can have nearly infinite amounts of extra images yet the main page will load as if there was only one image on it. (I.e.: quickly.)

Or perhaps & graphical content rich site?

Try to start with an outline of your page that makes sense in text only. Remember – that’s all Google will ever see or care about. Then decorate it with your rich content, taking care to avoid obstructing that core outline in the process.

Walter

Interested to see what you FW folks use, & percieve to be the ‘best’ of the ‘best’!

I like .pngs & obviously has its advantage if transparancy required… but I understand using a diplomative approach to certain images/needs/requirments is also needed! aka common sense!

Sadly I’ve had the displeasure of meeting fellow humans without this installed!!! "batteries not included etc…

Maybe you guys can elaborate on this…

The ‘Forum’ is yours…

Worm


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

It is my understanding and experience that web crawlers are now mostly searching the copy in web sites rather than Meta Data. My site is about visual images with their descriptive size, etc., information which does not address the nature of the work itself. My pages have thumbnails with target images. On these pages, I want to place a block of copy in place of where the target images appear, copy which will be seen when the page first appears and whenever the cursor is not on a thumbnail.
What this amounts to for example is 16 thumbnails, and 16 target images and 1 block of copy where another target images could appear. See the (folds) page on my site: www.joepalsa.com
Joe


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

Joe

Start another thread for this - don’t hijack.

D


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

It was not my intention to tag onto another issue. Sorry, I’m not sure how that happened.

Joe


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

Thanks Walt,

Totally understand this is a very broad subject area, & can wholey depend on the intentions of the site, & obviously the medium in which graphical items are to be used…

EG: You would expect a photograpy site to have many gallery images, these would indeed be JPEGs.

Logos: GIFs
Background Images: Jpeg
General images: Jpeg
Transparancy required: Png (whats the difference between 8/24 bit) just quality & image size?

By default I always export all my images from Photoshop CS5 via… FILE/SAVE/SAVE FOR WEB & DEVICES option

This brings up & whole gammet of options, this is where is comes down to ‘Personal preference’ I feel!

Say for instance you have a content rich site containing many Large images, you may be less inclined save them as 24 bit PNGs say 300k per image. Where as saving them as JPEGs they can be as low as 50k each! Making the site’s resource size & speed X4 faster?!!!

But if I had only several images on my entire site, that was fairly modest in size, I would be mroe inclinded to save my images as 24 bit PNGs to preserve the best quality!? Right? This may also be said for any industry that offers anything visual that they wish to portray in its best physical form, say photography, apple, automobile industry etc etc…

Guess it comes down to one’s discretion & percieved ‘BEST’ practices! Old habbits die hard…

You visit some sites, & they look so crisp & visually amazing, & others… errrrm yeah!!! lol

Can also be said that this is due to the designers abilities & tools available, As the old saying goes “a bad worksman blames his tools”… but in this case is it true?

If I had Photoshop CS6 vs Corel Draw/Paint… is this the same as having a race between a Rabbit & tortoise!!!

Sorry If I have strayed a little from the path… but essentially is there a RULE OF THUMB for this area?

& yes, scripty fader is annoying, it loads the images one by one which can look very ugly indeed. As for the server side, this is something I will look into, again shared severs have their obvious flaws as would any busy “Freeway” sorry about the pun, but a stand alone server “car pool lane” has its advantages too! (US for a lane on a motorway/freeway that is only for people paying for the privillage to sail thru traffic or fill your car… i.e be efficient!! Or as I remember when I lived back in the sunny CA)

Worm


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