Foto's en video's op het web

Foto-afmetingen/verkleinen

Foto's moet je vaak verkleinen of bijsnijden voor het web. Daarnaast zijn er en aantal andere tips en tool beschikbaar die het werken met foto's makkelijker maken. Deze worden hieronder toegelicht. 

Wanneer gebruik je .jpg en wanneer .png?

Er zijn meer type formaten voor foto's en grafieken, maar voor websites zijn .jpg en .png te belangrijkste. Het is ontzettend belangrijk dat je de juiste type kiest, anders is je foto mogelijk erg onscherp:

  • JPG: Dit bestandstype wordt gebruikt voor 'normale' foto's die je met een kamera of telefoon maakt. (JPG kan niet worden gebruikt voor logo's, grafieken of foto's met tekst erop. Het bestand wordt op het internet niet scherp weergegeven.) 
  • PNG: Dit bestandstype is voor logo's, grafieken of foto's met tekst erop. (Het is geen ramp om een foto in PNG te plaatsen maar dat is niet aan te bevelen omdat PNG vaak een stuk groter is dan JPG.)

(minimale) foto-afmetingen op UT-websites

Het is belangrijk dat de foto's niet te klein worden geupload, anders zijn deze op de website niet scherp en dat staat erg onprofessioneel. De afmetingen verschillen per template. De ene template heeft grote foto's in de header, de andere niet. Ook zijn er verschillende locaties waar je foto's kan uploaden (boven in de header, in de lopende tekst, in kleine widget blokjes, etc.) en die zijn niet allemaal even groot. Voor de standaard-template van de UT kun je de afmetingen op twee plekken vinden: 

>>> Voor de header van de standaard UT-websites is een breedte van minimaal 3000 pixes noodzakelijk (iets kleiner kan ook maar is op sommige schermen niet scherp). Het tekstvlak is ca 1000 pixels breed. Foto's die je daar (bij voorkeur liggend) over de volledige breedte wilt plaatsen dienen dus 1000 pixels groot te zijn.

De belangrijkste afmetingen van alle templates zijn ook samengevat in dit pdf-bestand, dat reglelmatig wordt geupdated. 

Wat zijn de afmetingen voor foto's op social media?

Afmetingen op Social Media veranderen regelmatig. Deze blog van Sprout Social vat de actuele afmeltingen samen. Let op dat je voor header-foto's van Social Media als deze tekst bevatten het beste een PNG kan gebruiken (zie uitleg boven). Twitter zal de png helaas omzetten naar een jpg, maar Facebook plaatst wel (de scherpere) png, maar ook alleen als het bestand maximaal 1 MB is. 

Zijn mijn foto's groot genoeg?

Of je foto's op je computer voldoen aan de gevraagde afmetingen kun je op Windows makkelijk zien:

Open de map op je computer, waarin de foto zit. Selecteer de foto (enkele klik met linker muis), dan zie je onderaan in de grijze statusbalk de afmetingen. Met de muis op je foto wijzen en een seconde wachten geeft vaak ook een popup met de afmetingen. Daar kun je dus zien of het aantal pixels de minimale afmeting heeft die hierboven gevraagd wordt. 

Grote foto's verkleinen voor het web

Een foto van de camera kan al snel 8 MB groot zijn, maar 0,2 is voor de website meestal al voldoende. Te grote foto's kosten je veel tijd en irritatie als je daarmee in websystemen werkt. Download daarom dit bestandje naar je Desktop op foto's met 1 klik te kunnen verkleinen. Plaats een foto (of meerdere) die je wilt verkleinen ook op je desktop of open de map waar je foto’s in staan. Selecteer de foto’s die je wilt verkleinen, en sleep deze foto’s vervolgens met je muis naar dit bestandje op je Desktop. Als je de muis los laat, boven dit bestandje worden alle foto’s verkleind en opgeslagen met het oorspronkelijke bestandsnaam en een -3000 erachter. Voorbeeld: een foto met de naam piet.jpg heet na het verkleinen piet-3000.jpg en is dan 3000 pixels breed. Standaard staat het bestandje op 3000, en dat is voor de nieuwe websites een prima afmeting voor bijvoorbeeld de header. Mocht je een andere afmeting (aan de lange kant) willen kun je dit bestandje een andere naam geven.

Foto's met een klik verkleinen voor het web
Download bestandje naar Desktop

Knippen (‘croppen’) op juiste formaat/uitsnede foto gebruiken

1) In WebHare met de online photo editor: In WebHare worden op de plekken waar het knippen van de juiste uitsnede relevant is (zoals bij de header in de nieuwe template) mogelijkheden aangeboden om online na het plaatsen bij te snijden. Op de testwebsite zie je een aantal screenshots van de WebHare-foto-editor. Hierin zijn knoppen voor het bijsnijden (croppen) beschikbaar, maar ook om een focuspunt op de foto te selecteren. Op kleinere schermen waar maar een uitsnede van de foto te zien is zorgt WebHare er dan voor dat het gebied rond je focuspunt (bijv een hoofd van iemand) altijd in beeld is. 

2) Geintegreerd in windows 7, windows 8 en Windows 10: Windows 7, Windows 8 en Windows 10 hebben een klein programma waarmee je dit gratis kan doen: In Windows7 is dat de Picture Viewer, met een zogenaamde crop functie. Foto openen met de Picture Viewer en boven de foto de tweede button (Fix) aanklikken, vervolgens rechts de optie crop kiezen. In Windows 8 open je een foto, en klik je vervolgens op de foto op de opties onderaan te laten verschijnen. Bij deze optie zit ook de crop-functie. 

3) Photoshop (gratis op UT-werkplekken): Als je iets meer opties wilt (voor gevorderden), dan kun je het beste Photoshop gebruiken. Dit programma is het meest gebruikte programma voor het bewerken van foto’s en is voor UT-werkplekken van medewerkers verkrijgbaar. Op de Windows 7 werkplekken kun je het zelf installeren. Voor thuisgebruik kunnen medewerkers Photoshop downloaden via www.utwente.nl/icts/nsc --> inloggen bij Softwaredistributie. Photoshop is een redelijk ingewikkeld programma. Als je er regelmatig mee moet werken kun je bij Marketing & Communicatie ook een Photoshop-cursus volgen.