/    Sign up×
Community /Pin to ProfileBookmark

best size of webpage and images for optimisation

Copy linkTweet thisAlerts:
Jun 11.2010

currently my webpages are averaging 20-25k in size
What is the optimal size in terms of download speed and viewing?
Some of my pages link to images in an images folder (average size of images folder is 2mb
Max image size is 80kb. They are png files
Is there a rule of thumb for image size not to go over.
Also, what is the recommended webpage size

I’m more interested in accessibility/speed for our elearning material.

to post a comment
HTML

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@EinsteinsEyesJun 11.2010 — The rule of thumb we used to use was no more then 100k per page for speedy download. Of course, the proliferation of high speed internet has changed all that. I would suspect as high as 200k would be fine.


Google has away to test speed via http://code.google.com/speed/page-speed/

Also there are some plugins for fire fox that will do the same from your browser.

Best of Luck.
Copy linkTweet thisAlerts:
@eenglishJun 11.2010 — Regarding recommendations, many developers now develop for 1040 width since the majority of computers are wide screen.

Also, remember that PNG files are the largest image files, so if you don't need the transparency consider JPG.
Copy linkTweet thisAlerts:
@NikuJun 11.2010 — JPG have less size and less quality . I use PNG .

But i don't now how you do webpages with 25 kb. I have at least 100 kb. But all content is cacheable . but i succeed to have 99/100 in page speed.
Copy linkTweet thisAlerts:
@eenglishJun 11.2010 — Your reply is untrue. Your image formats are not strictly speaking higher quality just because they are larger in size. The image formats (at least between JPG and PNG) relate to the TYPE of graphic you are placing on your site. For example, JPG is much better to use for Photo based graphics than is PNG. Whereas if your graphic contains text and/or you need a transparency filter, then PNG is the best. The reason that oftentimes JPG is used is because the fractal difference is so small you almost can't tell the difference and thus one opts for the much smaller file size than the bloated one.
Copy linkTweet thisAlerts:
@Jarrod1937Jun 11.2010 — Pages for a website i develop goes up to 300kb for total size (images and all, not cheating with any cached items). Though i suspect you're referring purely to the main html doc file size, unless you performed some wizardry and shrunk a page with graphics and all down to 25kb! You normally should not be going over 100kb if you're properly designing your site with cache-able includes and such. The exception is when you have a giant text document you're displaying.

However, no matter your text size you should be compressing (server side gzipping) text whenever possible, this includes your main html doc, any .js and .css files and such. Gzipping can dramatically reduce the transport time (thus making it actually load faster) and the size of the file (reducing bandwidth usage). You can also minify your .css and .js files, which can sometimes have a dramatic effect on their own (i once managed to reduce a 27kb .css file to 12 kb just by minifying).

As for image formats, they all have their uses. Jpeg is both a lossy compression algo as well as a perception one. It will make changes to the chroma portion of images due to the fact that us humans don't see much of a change to chroma compared to luma. Thus is it very good (and better than any other type of format) for photorealistic images that have lots of gradations in them. Gif (pronounced jif) is better than jpeg due to it being a palletized image format. With gif's the file size is mainly dependent on the amount of colors required to save an image, with the max (for standard gif formats) being 256 colors. You'd be surprised what you can get away with when reducing the colors, and .gif also supports 1 bit transparency, so try to use a gif first before .png's (8 bit png is basically the same as a gif, but gif's have wider browser support). However one limit of the gif format is that, as said, it can only use up to 256 colors so images with gradations don't work too well. But you can try to diffuse the gradations with the available algo's (normally diffusion, random noise, and a pattern), which works well as our eyes are more pleased with random noise gradations rather than blocky ones. Png is another format that is used, but i'd recommend against using png 24 bit due to its tendency to inflate file sizes compared to other formats. Thus it is usually used only because of its 8 bit transparency capability (if the developer is doing things right). But i rarely see a transparency use of png that can't be done using a more appropriate image format if things are changed around a bit.
×

Success!

Help @webacity spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...