Home > kruimelpad

vorige 63 volgende

inhoud

Test verkleinde versie (reset)

Images optimaliseren

Attentie: uiterlijk is er geen verschil tussen deze pagina en de vorige: de pixels van de images zelf zijn exact hetzelfde gebleven. Alleen de manier van opslaan en van plaatsing is veranderd, met behoud van kwaliteit.

Voor optimaliseren van images voor webgebruik zijn er verschillende mogelijkheden: keuze van bestandsformaat, samenvoegen van images, en los optimaliseren.

  • De keus van het bestandsformaat (png, jpg of gif) ligt niet altijd voor de hand (zie: which is the best format?). In ons geval: de tranparante images komen niet in aanmerking voor het .jpg-formaat, dat geen transparantie kent. Een probeersel leert: de header ook niet. Die wordt als jpg heel erg drabberig, zelfs met de minst mogelijke compressie:

  • De header als .gif opslaan, met 256 kleuren, levert wel een stevige besparing op (van 156kB png naar 57kB gif), maar daarmee verlies je o.a. alle tussentinten in het blauw. Het effect is niet eens zo onaardig, dan worden het blauwe baantjes.
    Test hier het gif-effect (reset).
  • Samenvoegen.
    Voor de header zijn 4 images nodig: 2 voor de standaard versie, en 2 voor de verkleinde versie. Bij gebruik van een lage resolutie moeten ze alle 4 opgevraagd worden (de grote ook, voor geval javascript uit staat). Dat betekent: 4 http-requests om die op te vragen bij de server, en dat gaat traag.
  • De kleine versies kunnen ook pas gedownload worden als de rest van de pagina binnen is: het javascript moet over de id's van de elementen beschikken om de kleinere images te kunnen plaatsen. Pas op dat moment worden de kleinere opgevraagd, wat ook vertraging voor de pagina oplevert.
  • Als de (background-) images samengevoegd worden, zijn meteen bij openen van de pagina ook de kleinere versies aanwezig (maar die worden met hun background-position buiten het zicht gehouden).
  • Tenslotte kunnen images ook per stuk geoptimaliseerd worden om de bestandgrootte omlaag te brengen. Alle definitieve images kunnen nu gekopiëerd worden van de voorwerk-map (waar alle versies e.d. in zitten) naar de echte images-map.

Gerealiseerd in deze stap:

  • Voor de twee header-versies een gecombineerd image gemaakt: een z.g. css-sprite. Omdat het background-images zijn, kan met de css-eigenschap background-position het juiste deel van de combinatie getoond worden.
    Bekijk hier de header-combinatie.
  • Voor de transparante gif's met de benen is hetzelfde gedaan.
    Zie de benen-combinatie.
  • Op het moment dat het javascript ontdekt, dat de kleine versies gebruikt moeten worden, zijn die nu al gedownload (via de combinatie). Ze hoeven alleen maar een andere background-positie te krijgen, en dat gaat heel snel.
  • NB: de 4 zouden ook in 1 transparante png opgenomen kunnen worden, maar daardoor neemt de bestandgrootte toe i.p.v. af. - De staande Marjanne kan niet gecombineerd worden vanwege het afwijkende formaat, en omdat dit img schaalbaar moet zijn.
  • De 4 images met de ronde hoekjes voor het twitterblok (buiten-boven, binnen-boven, binnen-beneden en buiten-beneden) waren al in een eerder stadium samengevoegd in een gecombineerd hoekjes-image.
  • Ook de hover-variant van het Rozenborg-image was al in de rechterhelft opgenomen van een gecombineerd Rozenborg-image.
  • De css en het javascript zijn aangepast voor de nieuwe formule. O.a. is in de #header de hoogte (die voor de witte ijsbaan-achtergrond zorgde) verkleind tot de hoogte van de header-afbeelding, en een border-bottom met het wit toegevoegd, zodat het andere gedeelte van de sprite niet in het wit van de ijsbaan komt.
  • Tot slot is de bestandsgrootte van de resterende 8 images nog iets verder omlaag gebracht met de online Smush.it (van samen 209kB naar samen 192kB, toch weer 8% er af). Alle beetjes helpen voor een snellere pagina!
    De transparante gif's zijn door smush.it omgezet in transparante png's: die kunnen ook gebruikt worden.
  • De resultaten zijn in de images-map geplaatst (voor het gemak met een nieuwe naam, dan kan er nooit verwarring ontstaan). En de css- en html-verwijzingen zijn aangepast naar deze map.

NB: De winst van deze optimalisatie zit 'm niet eens zozeer in het beknibbelen op de bestandsgrootte (van 220kB naar 192kB), maar vooral in het combineren: eerst waren er 14 losse images te downloaden, nu maar 8.

Images klaar!

ToDo lijstje

Kleine header voor lage resoluties, plus bijbehorend javascriptje.
Real life testen in IE8 en IE9.
Flits bij pagina-wissel in IE wegwerken.
Images zo nodig bijwerken.
Images optimaliseren.
Toegankelijkheid en hidden navigatie verbeteren.
HTML-code opschonen.
CSS-code en javascript in apart stylesheet/js-bestand.
PHP-header met charset aanmaken.
Favicon maken en in de html zetten.
Spelling en tikfouten nalopen.
Google-optimalisatie.
Test-inhoud uitproberen.
PHP-includes voor menu en zijkolommen.
Na elke wijziging testen op css, html, WCAG en Webrichtlijnen.

vorige 63 volgende

Twitter

[vultekst]
[vultekst]
[vultekst]
[vultekst]
[rechterkolom]
rozenborg-sprite-0.gif
niet geoptimaliseerd,
10kB

mt-rozenborg-sprite.png,
geoptimaliseerd,
7,5kB