Max Pages
Het CMS dat met uw bedrijf meegroeit!
Contact opnemen

 
 
 
 

Afbeeldingen uploaden invoegen


Een afbeelding op uw website is feitelijk een bestand dat als plaatje wordt weergegeven binnen een pagina van uw website. Dit plaatje is afkomstig van de server en wordt apart opgehaald.

Dus op het moment dat u bijv. de website http://www.nu.nl gaat bekijken, wordt eerst alle tekst + HTML code opgehaald. De browser bekijkt deze code en zal dan in de code zien dat er nog een plaatje opgehaald moet worden. In de HTML-tag staat precies het adres waar de browser dit plaatje vandaan moet halen en in welke maat hij dit moet weergeven en hoe de tekst er omheen moet worden weergegeven.

3000 pixels is even breed als twee computerbeeldschermen naast elkaar!

De HTML code die een image in een webpagina toont, kent een aantal parameters waardoor de afbeelding anders kan worden weergegeven dan het bestand feitelijk is. Zo kan een plaatje dat feitelijk 3000 pixels breed is (bijv. uit een digitale camera), worden weergegeven op een breedte van 200 pixels. Dit lijkt er dan goed uit te zien, maar toch wordt het plaatje eerst opgehaald met een breedte van 3000 pixels en de browser zal daarna pas de maten van het plaatje aanpassen. Dit betekent dat het volledige bestand over het internet wordt verstuurd, waardoor uw website traag wordt.

Vaak volstaat het om een plaatje weer te geven in een breedte van 300 tot 500 pixels, waarbij een breedte van 500 pixels al een flink formaat is.

Daarom moet u er als websitebeheerder voor zorgen dat het plaatje op het formaat zoals het op de website te zien moet zijn, beschikbaar is op de server, zodat de browser het niet meer hoeft te schalen om het juist weer te geven. Dit zorgt voor een snellere weergave van uw website.

Onderstaand plaatje [figuur 1] is 500 pixels breed. Deze breedte is voor de meeste website's de ruimte die beschikbaar is voor tekst en plaatjes. De rest wordt ingenomen door menu's, banners en andere elementen op de website.

figuur [figuur 1]

Onderstaand plaatje [figuur 2] is 300 pixels breed.

figuur [figuur 2]

Onderstaand plaatje [figuur 3] is 100 pixels breed.

figuur [figuur 3]


IMAGE UPLOAD

In de CK Editor is veel functionaliteit ingebouwd om eenvoudig images toe te voegen aan uw website. U beschikt zelfs over mogelijkheden om 'online' de geuploade images bij te snijden of te schalen. Belangrijk om te realiseren is dat plaatjes die u op uw website wilt laten zien op de server moeten staan.

figuur [figuur 4]

We gaan er in het onderstaande voorbeeld vanuit dat u een nieuw plaatje wilt toevoegen aan een contentartikel.
Wanneer u bezig bent een tekst te typen in de CK Editor en u wilt een plaatje in de tekst invoegen, gaat u als volgt te werk.
Klik op het afbeelding invoegen/wijzigen-icoontje (). Er verschijnt een pop-up venster getiteld 'eigenschappen afbeelding' [figuur 4]. In dit pop-up venster vindt u 2 tabbladen:
  1. Informatie afbeelding
  2. Geavanceerd
1. Informatie afbeelding
Het eerste tabblad is het tabblad dat direct actief is als u dit pop-up venster hebt geopend. In het invulveld ziet u een URL staan die verwijst naar een plaatje dat zich (fysiek) op het internet bevindt. Dit zal in de meeste gevallen een plaatje zijn dat op de server van uw website staat of een plaatje dat u nog op de server zult plaatsen. Door op de knop 'bladeren op de server' te klikken, opent u een nieuw pop-up venster [figuur 5] waarin u de mogelijkheden krijgt plaatjes op de server toe te voegen, te bewerken, te verwijderen van de server en de uiteindelijke keuze te maken welk plaatje u wilt invoegen in uw tekst.

figuur [figuur 5]

Uitleg [figuur 5]:
U kunt ook zelf voorbereidend werk doen door, voordat u de plaatjes gaat uploaden, de plaatjes op de juiste maat te snijden in een fotobewerkingsprogramma. Beschikt u niet over zo'n programma of de kennis ervan dan biedt het venster uit [figuur 8] genoeg functionaliteit om foto's voor het internet te schalen en bij te snijden.

Eerst zult u een plaatje van uw computer naar de server moeten overbrengen. Navigeer op de server naar de juiste map waar u het plaatje wenst op te slaan. Klik vervolgens op uploaden (Dit kan links bovenin het scherm of rechts onderin het scherm).

U krijgt nu het "nieuw bestand uploaden" scherm te zien. In dit scherm kunt u eventueel de nieuwe aangepaste naam van het image opgeven. Tip: In het kader van SEO is het verstandig uw images ook een duidelijke naam te geven. Dit helpt de vindbaarheid van uw site in zoekmachines.

Daarna kunt u eventueel de maximale afmetingen opgeven waarme het plaatje op de server dient opgeslagen te worden. Hiermee geeft u het CMS de opdracht om het door u opgestuurde plaatje terug te schalen binnen de maximale aangegeven maten.

Als laatste mogelijkheid vindt u de knop "browse" of "kies bestand" om uw afbeelding op uw computer te selecteren klikt u hierop.

Er verschijnt een 'systeem pop-up' [figuur 6]. In deze popup kunt u het plaatje op uw eigen computer opzoeken. Als u eenmaal het plaatje van uw keuze heeft gevonden, klikt u het aan zodat het met een blauwe achtergrond wordt weergegeven. Klik vervolgens op de knop 'open'. Het 'systeemvenster' sluit zich.
Het pop-up venster [figuur 6] komt nu weer tevoorschijn. De lokatie van het plaatje op uw computer wordt nu in het tekstveld links van de 'Browse' knop geplaatst.

Door vervolgens op de button 'Uploaden' te klikken, wordt het plaatje (in origineel formaat en met originele naam) daadwerkelijk van uw computer via het internet naar de server gestuurd en daar opgeslagen. Pas als het op de server staat, wordt het bestand eventueel hernoemt en het formaat gewijzigd. Dus het plaatje op uw computer blijft ongemoeid.

figuur [figuur 6]

Nadat u op de knop 'Upload' hebt geklikt, begint het uploaden. Afhankelijk van het formaat van het plaatje kan het even duren voordat het naar de server is gestuurd. Als het uploaden klaar is kunt u rechts onderin kiezen voor "invoegen".

U komt nu terug in [figuur 4].

Wanneer u wederom op "Bladeren op server" klikt komt u terug in het venster van [figuur 5]. Dit venster heeft naast de mogelijkheid om nieuwe afbeeldingen op te sturen ook een aantal andere functionaliteiten. Deze bevinden zich onder de rechter muisknop [figuur 7].

U heeft daar ook nog de mogelijkheid het plaatje te verwijderen van de server of na te bewerken.  Als u het plaatje nog wilt nabewerken (bijv. uitsnijden of kleiner maken), klikt u op "Afbeelding bewerken" van het plaatje dat u wilt bewerken.

figuur [figuur 7]

Nadat u "Afbeelding bewerken" hebt geklikt, opent zich een nieuw pop-up venster [figuur 8]. In dit venster ziet u de foto van uw keuze staan. Verder heeft het venster twee tabbladen. Eentje om een uitsnede van de foto te kunnen creëren, de ander om de foto te schalen. Verder ziet u om de foto een zwarte omlijning met op alle hoeken en halverwege de zijden een klein zwart blokje. Door met de muis op één van de blokjes te klikken en daarna met de muis naar het midden van de foto te bewegen, kunt u de uitsnede van de foto bepalen (eerste tabblad actief) of het formaat van de foto aanpassen (tweede tabblad actief).

Let erop dat u de wijziging eerst vastlegt voordat u van tabblad wisselt door te klikken op de 'Uitvoeren' button.

Als u helemaal klaar bent met het aanpassen van uw foto en u hebt de foto in beeld staan zoals u dat ook op uw website zou willen, klikt u op de knop 'Opslaan'. Dan pas wordt de foto daadwerkelijk op de server aangepast.

De 'Herstel' button haalt de orignele foto weer op van de server. Als u klikt op 'Sluiten' wordt er geen wijziging doorgevoerd.

figuur [figuur 8]

Terug in [figuur 4] moet het plaatje van uw keuze nog ingevoegd worden in de tekst. Dit is het venster waarin u HTML eigenschappen kunt instellen. HTML eigenschappen hebben geen daadwerkelijke invloed op het bestand van het plaatje. Alleen de weergave van het plaatje wordt ermee beïnvloed.

figuur [figuur 9]

[figuur 9] is een uitsnede van [figuur 4]. De volgende eigenschappen kunt u instellen:
  • Alternatieve tekst (= de tekst die tevoorschijn komt bij tekstbrowsers die geen plaatjes kunnen laten zien)
  • Breedte (van het plaatje in beeldpixels)
  • Hoogte (van het plaatje in beeldpixels)
  • Rand (randdikte rondom het plaatje in pixels)
  • HSpace (= horizontale ruimte, links & rechts van het plaatje)
  • VSpace (= verticale ruimte, onder- & bovenkant van het plaatje)
  • Uitlijning (geeft aan hoe tekst om het plaatje wordt weergegeven)
Het kleine blauwe hangslot-icoontje geeft aan of de verhouding tussen breedte en hoogte intact moet blijven of vrij instelbaar is. Als het slotje openstaat (door er op te klikken), kunt u het plaatje oprekken. Is het slotje gesloten en u vult een breedtemaat in, dan wordt de hoogte automatisch ingevuld. Door op het ronde pijltje te klikken, worden de originele pixelmaten weer ingevoerd.
In tegenstelling tot de mogelijkheden die de editor in [figuur 8] biedt, hebben veranderingen die u invoert in [figuur 9] geen directe invloed op het bestand van het plaatje. Alleen de weergave in de browser wordt aangepast.
In het kort komt het er als volgt op neer: Als het bestand van het plaatje op de server een pixelmaat heeft van 1000 x 1000 pixels en u zet in [figuur] de breedte en hoogte op 100 pixels, dan wordt het plaatje nog steeds opgehaald in het formaat van 1000 x 1000 pixels. Dus de downloadtijd verandert niet.

COMPRESSIE EN BESTANDSFORMATEN

Voor het weergeven van plaatjes op het internet zijn drie bestandsformaten populair. Ze hebben elk hun voor- en nadelen.
  1. JPG
  2. GIF
  3. PNG
Het JPG bestandsformaat
Het JPG/JPEG (Joint Photographic Experts Group) bestandsformaat is veruit het populairste bestandsformaat dat wordt gebruikt om images weer te geven waarbij vooral foto's goed worden weergegeven zonder dat de bestanden te groot worden. Praktisch alle digitale fotocamera's bieden de mogelijkheid de gemaakte foto's in de camera op te slaan als een 'JPEG' bestand.

Het grote voordeel van het JPG bestandsformaat is dat het gecomprimeerd kan worden, zodat het bestand sneller gedownload wordt. Comprimeren betekent dat het plaatje in weergavegrootte (het aantal pixels in de hoogte en de breedte) gelijk blijft, maar dat vooral de bestandsgrootte kleiner wordt. Dit heeft natuurlijk wel gevolgen voor de kwaliteit van de foto. Daarom is het altijd belangrijk een goede visuele check uit te voeren als u het bestand met de gewenste compressie opslaat. In [figuur 10] is duidelijk te zien dat het sterk afhankelijk is van het weergegeven beeld of de juiste compressie is gekozen. Compressie stelt u in op het moment dat u een foto als JPG bestand opslaat in het fotobewerkingsprogramma dat u gebruikt.

[figuur 10]

Vooral in de vacht aan de rechterzijde (onder in [figuur]) is duidelijke blokkerigheid te zien. Dit noemen we JPEG artefact. Deze blokkerigheid wordt sterker naarmate er met meer compressie wordt opgeslagen. De hoeveelheid compressie wordt in de verschillende fotobewerkingsprogramma's uitgedrukt in percentages. (0% = veel compressie, 100% = nauwelijks compressie). Echter, het is niet gezegd dat dezelfde compressie-percentages uit verschillende fotobewerkingsprogramma's dezelfde kwaliteit opleveren. Zo resulteert het opslaan van een JPG bestand in een programma als Adobe Photoshop zelfs bij hoge compressiewaarden nog in een acceptabele kwaliteit.

Let op: De hoogste kwaliteit JPG is nog steeds gecomprimeerd ook al is dit nauwelijks te zien. Wilt u zonder kwaliteitsverlies een bestand op uw website tonen dan is het enige geschikte bestandsformaat het .PNG bestandsformaat.

Het PNG formaat

PNG is de afkorting en de bestandsextentie van het bestandsformaat Portable Network Graphics. Het is een bestandsformaat voor plaatjes dat wel gecomprimeerd wordt weggeschreven (opgeslagen) maar dit heeft geen invloed op de kwaliteit van de getoonde afbeelding. Ondanks de compressie kan de bestandsgrootte wel veel groter zijn dan een JPG image dat praktisch dezelfde (visuele) kwaliteit biedt.

Transparantie
Een bijkomende positieve eigenschap van PNG is de mogelijkheid een beeld met transparantie te tonen, iets dat het GIF-formaat ook kan maar minder goed. Verder biedt het PNG formaat de mogelijkheid met 16 miljoen kleuren te werken. Ook is er de mogelijkheid een palet met maximaal 256 kleuren mee te schrijven in het bestand waardoor de bestandsgrootte aanzienlijk kleiner wordt.

Het GIF formaat

figuur [figuur 11]

GIF is de afkorting en de bestandsextentie voor het Graphics Interchange Format en is van origine bedoeld om een image compressie-vrij en dus zonder kwaliteitsverlies op te kunnen slaan. Het nadeel is dat het slechts 256 kleuren kan bevatten waardoor het ongeschikt is om foto's in op te slaan. Het wordt wel veel gebruikt om icoontjes op te slaan, omdat die vaak maar een beperkt aantal kleuren bevatten. GIF biedt dan ook de mogelijkheid een kleurenpalet mee weg te schrijven in het bestand, waardoor de bestandsgrootte zeer klein kan zijn. Verder is er de mogelijkheid een kleur 100% transparant te maken. Dat wil zeggen dat bijvoorbeeld de zwart kleur in een image niet getoond wordt maar de achtergrond 'door het plaatje heen' zichtbaar is bij die betreffende kleur, [figuur 11] is een foto opgeslagen als GIF bestand.

Voor wat voor type image zijn de verschillende bestandsformaten geschikt?
Als u zonder kwaliteitsverlies een image wilt tonen met meer dan 256 verschillende kleuren, dan zult u gebruik moeten maken van een PNG bestandsformaat. Voor grafieken, icoontjes en bestanden minder dan 256 kleuren kunt u ook zonder kwaliteitsverlies het GIF formaat gebruiken. Soms is het ook mogelijk een foto als GIF op te slaan, maar dit moet altijd visueel goed beoordeeld worden. Het JPG formaat is veruit het meest geschikt om foto's te tonen als de kwaliteit naar uw smaak voldoende is en u een klein bestandsformaat op prijs stelt. Het JPG formaat is ongeschikt om grafieken en icoontjes met duidelijke harde lijnen te tonen. Door compressie zullen strakke lijnen minder goed weergegeven worden.

In de drie onderstaande figuren is duidelijk te zien wat het verschil tussen GIF en JPG is in geval van getekende figuren. De rafeligheid en blokkerigheid die in [figuur 12] ontstaat, valt vaak weg als 20% compressie wordt toegepast op een foto.

figuur [figuur 12]

[figuur 12] is als GIF en heeft een bestandsgrootte van 2 KB

figuur [figuur 13]

[figuur 13] is als JPG opgeslagen met 80% (dus veel compressie) en heeft een bestandsgrootte van 5 KB

figuur [figuur 14]

[figuur 14] is als JPG opgeslagen met 100% (dus praktisch geen compressie) en heeft een bestandsgrootte van 23 KB


De overige bestandsformaten
Er is nog een groot aantal andere bestandsformaten over die nog niet genoemd zijn maar óf niet populair zijn óf gewoonweg niet geschikt zijn voor het gebruik op internet en daarom wordt u aangeraden alleen in te zetten op JPG, GIF en PNG bestanden. Daarvoor zijn de verschillende MAX tools ook geschikt gemaakt. Andere bestandsformaten zoals bijvoorbeeld BMP, TIF en TARGA worden niet door MAX ondersteund.


Reageren

 
Verzenden