Hoi Zild,
Het menu zit in een andere laag, en dat maakt niets uit.
Wat wel uitmaakt, is de breedte en hoogte van je afbeeldingen.
Vuistregel 1
Als een afbeelding twee keer zo groot wordt, wordt de breedte twee keer zo groot en de hoogte ook twee keer zo groot. Het oppervlak (in aantallen cm2 of in pixels) wordt dus 4 keer zo groot!
Vuistregel 2
Het loont dus erg de moeite om de afbeeldingen zo klein mogelijk in formaat te houden. Een afbeelding die 1,5 keer zo groot is als vertoond moet worden, heeft volgens vuistregel 1 dus 2,25 keer zoveel oppervlak nodig. Terugbrengen van die 1,5 keer zo groot naar het reele formaat levert dus een 2x zo klein bestand op!
Vuistregel 3
Een afbeelding met de html-maten voor op het beeldscherm wordt er niet scherper van (meer détails) als je 'm opslaat in een groter formaat. Een beeldscherm kan niet kleiner gaan dan 1pixel, en gaat de te grote maten dus afronden. Dat doen browsers lang niet zo goed als een tekenprogramma, dus het resultaat wordt er dan slechter op.
Samengevat
Maak de afbeeldingen met een tekenprogramma precies zo groot als ze op scherm moeten worden.
De praktijk (1)
Al met al moet er nog steeds een pittige
540kB aan images gedownload worden voor de index-pagina, zegt het
Web Page Speed Report. Waar is dat allemaal voor nodig?
Kijken we naar de huidige pagina: foto kelderdeur heeft als image een formaat van 1024*768px (en is daarmee
111kB).
Nodig is maar 690*450px, zegt de html. Verkleinen levert
een jpg van 60kB: alstublieft, die is dus twee keer zo snel binnengehaald!
Het foto'tje van Huub is 576*768px en
60kB; nodig is maar 120*160. Teruggebracht naar ware grootte:
nu nog maar 5,5kB. Kijk, dat zet zoden aan de dijk!
De praktijk (2)
Als je geen fotoprogramma tot je beschikking hebt om dit mooi te doen, is MSPaint in elk geval niet het alternatief. Met het gratis
IrfanView kan je uitstekende resultaten boeken. In menu: Image naar "Resize/Resample", en dan kan je alles doen wat je maar wilt (verscherpen na verkleinen is aan te raden). Tenslotte opslaan als jpg met een kwaliteit van 75% geeft meestal nog een prima resultaat bij een prettig kleine bestandsgrootte.
Ik denk dat je op deze manier na het klikken op de site heel snel zal moeten kijken: hij is er voordat je piep hebt gezegd!
Succes!
Met vriendelijke groet,
CSShunter
