Hoe u een digitale camera gebruikt om afbeeldingen toe te voegen aan uw HTML5 en CSS3 Gebaseerd webpagina's - dummies

Digitale camera's en scanners verbazingwekkend tegenwoordig. U kunt ze gebruiken om afbeeldingen aan uw HTML5- en CSS3-webpagina's toe te voegen. Zelfs redelijk geprijsde camera's kunnen nu de resolutie van old-school analoge camera's benaderen. Scanners kunnen ook traditionele afbeeldingen maken en deze converteren naar digitale indelingen die door computers worden gebruikt.

In beide gevallen kan de standaardafbeelding echter een indeling hebben die problemen veroorzaakt. Digitale afbeeldingen worden opgeslagen als een reeks punten of pixels. In gedrukte vorm liggen de puntjes heel dicht bij elkaar, maar computerschermen hebben grotere stippen. Dit beeld komt rechtstreeks uit de digitale camera.

Deze foto (gemaakt op een oudere digitale camera) registreert bij 6 megapixels (MP). Dat is een redelijk goede resolutie, maar moderne digitale camera's zijn veel hoger. Als je die foto op papier afdrukt, zijn al die punten erg klein en krijg je een mooie foto. Als u dezelfde afbeelding op het computerscherm wilt weergeven, ziet u slechts één hoek.

Deze werkelijke foto kwam uit op 2, 816 pixels breed bij 2, 112 pixels lang. Je ziet alleen een kleine hoek van de afbeelding omdat de schermafbeeldingen zijn genomen op 1024 × 768 pixels. Minder dan een kwart van de afbeelding is zichtbaar.

Als u in de meeste browsers naar een grote afbeelding kijkt, wordt deze automatisch aangepast zodat deze op de pagina past. De cursor verandert meestal in een soort vergrootglas en als u op de afbeelding klikt, kunt u deze zien in de volledige grootte of in de kleinere grootte.

Sommige beeldviewers nemen zeer grote afbeeldingen op en passen ze automatisch aan zodat ze op het scherm passen. (Dit is het standaardgedrag van de standaardbeeldviewer van Windows en de meeste browsers.) Vanwege deze functie lijkt het alsof de afbeelding redelijk groot is, maar het zal enorm zijn en moeilijk te downloaden zijn op een echte webpagina. Zorg ervoor dat u de werkelijke grootte van een afbeelding kent voordat u deze gebruikt.

Hoewel het krimpen van een afbeelding, zodat deze in zijn geheel kan worden gezien, uiteraard gunstig is, is er een nog dwingender reden om dit te doen. Elke pixel op het scherm heeft 3 bytes aan computergeheugen nodig. (A byte is de basiseenheid van het geheugen op een computer.) Ter vergelijking, één teken van tekst vereist ruwweg 1 byte.

Het ongecomprimeerde beeld van het schip weegt maar liefst 17 megabytes (MB). Als u een woord vijf tekens lang vindt, neemt een foto rechtstreeks uit de digitale camera evenveel opslagruimte en verzendtijd in beslag als ongeveer 3, 400, 000 woorden.Deze afbeelding heeft bijna drie minuten nodig om te downloaden op een 56K-modem!

Op een webpagina worden kleine afbeeldingen vaak weergegeven op ongeveer 320 × 240 pixels en grotere afbeeldingen zijn vaak 640 × 480 pixels. Als u software gebruikt om de afbeelding opnieuw te samplen tot het formaat dat u echt nodig hebt en een geschikt compressiealgoritme gebruikt, kunt u de afbeelding er goed laten uitzien.

De nieuwe versie van de afbeelding is de grootte en bestandsindeling die nodig is, deze ziet er net zo goed uit en weegt een veel redelijkere 88 kilobytes. Dat is 2 procent van de originele afbeeldingsgrootte.

Hoewel deze foto veel kleiner is dan de originele afbeelding, neemt deze nog steeds veel meer geheugen in beslag dan tekst. Zelfs deze kleinere afbeelding kost evenveel overdrachtstijd en opslagruimte als 1, 600 woorden! Het duurt nog steeds 10 seconden om te downloaden zonder een breedbandverbinding. Gebruik afbeeldingen verstandig.

Afbeeldingen zijn geweldig, maar onthoud enkele dingen wanneer u ze gebruikt:

• zorg ervoor dat de afbeeldingen de moeite van het weergeven waard zijn. Gebruik een afbeelding niet zonder goede reden, omdat elke foto uw pagina aanzienlijk langzamer toegankelijk maakt.

• Gebruik software om het formaat van je afbeelding te wijzigen. U kunt zelfs gratis software gebruiken om de afbeelding in precies de gewenste grootte te veranderen.

• Gebruik een gecomprimeerde indeling. Afbeeldingen worden bijna nooit in het oorspronkelijke formaat op internet gebruikt omdat ze gewoon te groot zijn. Er zijn verschillende indelingen ontstaan ​​die nuttig zijn voor het werken met verschillende soorten afbeeldingen.