Afbeeldingen - formaat aanpassen

Transcriptie

1 Wat leer je in dit hoofdstuk: - Twee nieuwe manieren om foto s in je webshop te plaatsen - Hoe je het formaat van afbeeldingen kunt aanpassen Eindresultaat Een foto met de juiste afmetingen met een goede laadtijd Inleiding Om je website visueel aantrekkelijk te maken gebruik je veel afbeeldingen. Denk maar aan je logo en productfoto s. Daarnaast zijn er afbeeldingen die je klant moeten overhalen om erop te klikken. Dit noemen we call to action. In het vorige hoofdstuk heb je geleerd waar je rechtsvrije afbeeldingen kunt vinden. Al hebben eigen foto s wel de voorkeur. Met het tonen van afbeeldingen gaat het soms fout: - een afbeelding is vervormd - de afbeelding is veel te groot (aantal kb). Dit gaat ten koste van de laadtijd van je pagina. Voor een bezoeker van je website zou dit een rede kunnen zijn om jouw website weg te klikken en ergens anders verder te zoeken. We gaan in deze handleiding leren hoe je kunt weten wat de juiste afmetingen zijn van een geplaatste afbeelding en hoe je deze kunt aanpassen.

2 Plaatsen van een afbeelding Er zijn 3 manieren om een afbeelding te plaatsen in je Webshop: 1. Afbeelding uploaden in het systeem Deze methode ken je al van de cursussen Homepagina maken in MyShop en Productlijst uploaden in MyShop Veel handelingen Gemakkelijk bij kleine webshops Je kunt foto s van maximaal 256 kb uploaden. Dit is gedaan i.v.m. de laadsnelheid van je pagina. 2. Afbeeldingen linken vanuit een webpagina Dit is zeer eenvoudig, je plaatst de url van de afbeelding in MyShop Let op de grootte van de foto s i.v.m. de laadsnelheid van je pagina! Nadeel: Je hebt geen controle over de afbeelding. Als de afbeelding wordt verwijderd of een andere naam krijgt dan verdwijnt de afbeelding ook van jouw pagina. Deze methode is dus niet aan te raden! 3. Afbeeldingen linken vanuit je eigen website/server Dit is erg eenvoudig, je plaatst de url van de afbeelding in MyShop Erg handig bij grotere webwinkels Dit werkt in principe hetzelfde als methode 2, alleen heb je nu controle over de afbeeldingen. Let op de grootte van de foto s i.v.m. de laadsnelheid van je pagina! Je moet naast je webshop een online website of server hebben Extra kosten Methode één heb je al getest. Methode drie testen is lastig aangezien de meeste leerlingen geen eigen website en/of online server. Daarom gaan we met methode twee aan de slag. Zoals eerder vermeld heb je bij methode drie wel controle over de beschikbaarheid van de foto s. Heb je later een eigen website, dan kun je foto s laten zien door te linken naar de url van de foto s. Dat werkt precies hetzelfde als methode twee. Dus let goed op! Je gaat nu op zoek naar een afbeelding die te groot is voor onze website.

3 1 1. Typ in Google advanced image search en klik op de bovenste link. 2. Typ als zoekwoord socks in - Afbeeldingsformaat groot - Geef bij gebruiksrechten aan dat je de afbeelding onbeperkt mag gebruiken of delen, zelfs commercieel..

4 De zoekopdracht leverde bovenstaande resultaten op (resultaten kunnen afwijken) 3. Klik op de afbeelding Rugby Socks van Wikipedia (deze afbeelding heeft als url: ) 4. Klik nu met de rechtermuisknop op de foto en klik op afbeeldingsinfo bekijken

5 Eigenschappen van de afbeelding Locatie: De plaats waar de browser de afbeelding vandaan haalt Type: JPEG is een bestandsformaat Grootte: 6.211,79 KB oftewel ruim 6 Mb Afmetingen: Oorspronkelijk 4.288px x 2.848px. Dat past natuurlijk nooit op het scherm. Daarom is de foto geschaald (aangepast) naar 930px x 618px. De foto wordt daardoor wel onnodig groot om op te slaan. Dit ga je later aanpassen Met een downloadsnelheid van 10 Mbit/sec moet je bijna vijf seconden wachten voordat de afbeelding is gedownload! Let op: een Mb is iets anders dan een Mbit! Een Mbit is 8x kleiner dan een Mb (1 Byte=8 bits) - 10 Mbit per seconde = 1,25 Mb per seconde - 30 Mbit per seconde = 3,75 Mb per seconde Zelf bij een snelheid van 30 Mbit/sec duurt het anderhalve seconde. Dat lijkt niet veel, maar als je weet dat je slechts zeven seconden hebt waarin je een bezoeker ervan moet overtuigen dat hij op de juiste website is, duurt dat te lang. Je gaat nu toch de (te grote) afbeelding plaatsen op één van onze pagina s van de website.

6 5. Maak (indien nodig) een nieuwe pagina aan met de naam Link-2 6. Voeg op deze pagina een WYSIWYG editor toe in de middenkolom 7. Klik op de knop Insert/edit image 8. Vul in bij Image URL: 9. Vul vervolgens bij Image discription en Title het woord Rugby Socks in Dit is gunstig voor je vindbaarheid in Google 10. Klik vervolgens op Update en klik daarna op OK. Bekijk nu het resultaat. Als je afbeeldingen van andere websites gebruikt, neem je wel een risico. 1. De eigenaar van de website de afbeelding verwijderen (daarmee is de afbeelding ook verdwenen van jouw website) 2. Het is lang niet altijd toegestaan om afbeeldingen van anderen commercieel te gebruiken. Deze manier raden we dus af! Zet afbeeldingen die je gebruikt in het systeem van MyShop, zodat je zeker weet dat de afbeeldingen blijven staan.

7 Het resultaat ziet er niet uit: de foto is veel te groot en uitgerekt. Als je de eigenschappen van de geplaatste afbeelding onderzoekt zie je dat de afbeelding is geschaald naar 954px x 2.848px. De afbeelding is dus helemaal uitgerekt, maar waarom? De pagina (bepaald door de skin) waarop je de afbeelding hebben geplaatst kan blijkbaar geen bredere afbeeldingen aan dan maximaal 954 pixels. De hoogte van pixels is voor de pagina blijkbaar geen probleem. Je gaat dit natuurlijk aanpassen. 11. Ga terug naar je WYSIWYG-editor en selecteer de afbeelding 12. Klik op de Insert/edit image knop.

8 13. Verander in het tabblad Appearance het formaat van de afbeelding in 954 px. Als je het vinkje laat staan bij Constrain proportions dan verandert de hoogte automatisch. 14. Klik op Ok en bekijk het resultaat De foto staat nu goed op de pagina Link-2. Toch is het geen goede oplossing om afbeeldingen op deze wijze op je website te plaatsen. De afmeting is goed (954x634 px), maar de afbeelding is nog steeds te zwaar (6.211,79 KB). Je gaat de afbeelding bewerken om hem geschikt voor het systeem te maken en natuurlijk voor onze website i.v.m. een korte laadtijd!

9 Foto bewerken Om de foto aan te passen heb je een fotobewerkingsprogramma nodig. Wij maken in deze cursus gebruik van Adobe Photoshop om de afbeelding te bewerken. Online foto s aanpassen Er zijn online natuurlijk ook programma s die de foto s kunnen aanpassen. De mogelijkheden zijn uiteraard beperkter, maar als je school geen Photoshop heeft is het zeker een goede optie. Een Nederlandstalige site is Open Photoshop en Klik op Bestand -> Nieuw 2. Stel de breedte in op 954 pixels en de hoogte in op 643 pixels 3. We gaan het bestand ingesloten plaatsen - Photoshop cc: kies Bestand / Ingesloten plaatsen - Photoshop CS6: kies Bestand / Plaatsen

10 4. Kopieer de url van de Rugby Socks in het vak bestandsnaam (mocht dat niet werken, sla de foto dan eerst op op je USB-stick en browse naar de foto) 5. Klik op Bestand / Opslaan voor Web Stel de kwaliteit van de Jpg afbeelding in op 60%. Klik op Opslaan en sla het bestand op je USB-stick als Rugby_socks.jpg 6. Upload de verkleinde foto via Pagina s/ Plaatjes en andere bestanden / Overige plaatjes en bestanden

11 7. Open de WYSIWYG editor op de pagina link-2 8. Vervang nu het plaatje van de rugby sokken met het verkleinde plaatje - Delete de wikipedia url in het vak achter Image URL - Klik op het lijstpijltje achter Image list en kies Rugby_socks - Klik op Update - Klik op Ok 9. Bekijk nu de eigenschappen van de afbeelding. - Klik op Bekijk winkel - Klik op Link-2 - Klik met de rechtermuisknop op de afbeelding en klik op afbeeldingsinfo bekijken

12 Eindresultaat: de afbeelding heeft nu de juiste grootte, is niet vervormd en de afbeelding laadt snel.