Geplaatst op

Van klanten krijgen wij vaak de vraag in welk formaat de afbeelding geüpload moet worden. Maar in het responsive tijdperk is dit geen éénduidig antwoord meer.

Om een afbeelding passend te maken moet deze geschaald en/of bijgesneden worden. Daarnaast is wat er van de afbeelding te zien is niet altijd op alle apparaten hetzelfde.

Hieronder bespreken wij aan de hand van een paar voorbeelden wat dit betekent en waar je rekening mee moet houden.

Schalen

Als een afbeelding geschaald wordt gebeurt er niets meer dan dat de foto een ander formaat krijgt dan het origineel dat wordt geüpload. Een afbeelding kan zowel groter als kleiner geschaald worden, maar groter houdt altijd in dat de foto aan kwaliteit inlevert. Je bent immers “informatie” aan het opvragen die er niet is.

Neem bijvoorbeeld onderstaande foto van 400 bij 400 pixels. De foto is scherp, en de kwaliteit is dus goed.

 schalen 1

Maken wij een uitsnede van deze afbeelding, maar houden we de afmeting hetzelfde, dan zie je dat de foto onscherp wordt en aan kwaliteit inlevert:

schalen 2

Bijsnijden

Bij het bijsnijden wordt er een deel van de afbeelding weggesneden. Dit gebeurt eigenlijk altijd vanuit het midden. Een foto in landschap formaat die vierkant gemaakt wordt zal daarom zowel links als rechts worden afgesneden.

Onderstaande afbeelding is 640x400 pixels groot.

bijsnijden 1

Als we deze afbeelding gaan bijsnijden naar 400x400 verdwijnt er links en rechts wat van de afbeelding:

bijsnijden 2

En dit is het resultaat:

bijsnijden 3

Schalen én bijsnijden

Als een foto zowel geschaald als bijgesneden worden zal altijd eerst de kortste dimensie (breedte of hoogte) passend gemaakt worden en wat overblijft van de langste dimensie wordt afgesneden. Dit om kwaliteitsverlies te voorkomen. 

Onderstaande afbeelding is 640 bij 400 pixels groot.

schalen bijsnijden 1

Wanneer we schalen en bijsnijden naar 250 bij 250 pixels zal hij eerst geschaald worden naar 400 bij 250 pixels (de hoogte is immers de kortste dimensie) om vervolgens links en rechts bijgesneden te worden.

Dit is het resultaat na het schalen:

 schalen bijsnijden 2

En dit na het bijsnijden:

schalen bijsnijden 3

Responsive resultaten

Op verschillende apparaten kunnen afbeeldingen verschillende resultaten bieden. Hierbij is het belangrijk een onderscheid te maken tussen 2 types afbeeldingen: De “contentafbeelding” en de “visual afbeelding”.

Content afbeelding

De content afbeelding maakt deel uit van de content en staat dan boven, rechts, onder of links van de tekst.

De maximale breedte van deze afbeeldingen is de breedte van de beschikbare ruimte. In dit voorbeeld is de afbeelding 240 pixels breed en de beschikbare ruimte 640 pixels breed. De afbeelding zal in dat geval zijn originele breedte houden:

content afbeelding 1

Wanneer we dezelfde afbeelding en tekst bekijken met een beschikbare ruimte van 200 pixels breed dan zal de afbeelding geschaald worden naar 200 pixels breed (de hoogte schaalt naar verhouding mee):

content afbeelding 2

Visual afbeelding

Dit zijn meestal pagina brede visuals bovenaan de pagina, maar kunnen uiteraard ook door de rest van de pagina voorkomen. Soms zijn ze ook niet pagina vullend, maar is het als opvulling van de achtergrond van content. Deze afbeeldingen schalen anders mee content afbeeldingen. De hoogte van een visual afbeelding is vaak afhankelijk van het design of de content die er in zit, terwijl de breedte altijd de volledige breedte van het vlak beslaat. Dit levert op je mobiele telefoon hele andere resultaten op dan op je desktop!

viusal 1

Voorbeeld mobiel:

viusal 2

Zoals je ziet zijn er op de verschillende apparaten andere delen van de foto te zien. Dit is zeker iets om rekening mee te houden! Ook hier geld overigens dat de foto altijd vanuit het midden “bijgesneden” wordt.

Welk formaat moet ik uploaden?

Een van de meest gestelde vragen over het uploaden van een afbeelding.

In het kort:

Minimaal: 800 pixels breed
Maximaal: 2500 pixels breed

In principe geldt hier dat groter altijd beter is. Maar een grote afbeelding is zwaar. En omdat wij niet willen dat elke bezoeker deze hoeft te downloaden (terwijl de foto veel kleiner wordt afgebeeld) zorgen wij er middels code voor dat de afbeelding ook echt verkleind wordt. Er wordt een kopie gemaakt van de afbeelding met de nieuwe afmetingen, en die wordt getoond aan de bezoeker.

Maximum afmetingen
Door een grotere afbeelding te uploaden dan je op dat moment eigenlijk nodig hebt blijf je in de toekomst flexibel om dezelfde afbeelding te hergebruiken wanneer je hem wel groter nodig hebt. In theorie is er geen maximum, maar het is misschien een beetje overbodig om een foto van 8000 bij 5000 pixels te uploaden (die vele MB’s zwaar zijn) die toch zelden groter getoond wordt dan 1920 pixels breed (de standaard scherm resolutie van tegenwoordig).

Een maximale breedte van 2500 pixels (de hoogte maakt niet uit) is daarom prima.

Minimum afmetingen
Uiteraard dien je wel een minimum afmeting aan te houden. Als je weet dat een afbeelding 400 bij 400 pixels groot getoond wordt, dan is het niet handig een afbeelding te uploaden van 250 bij 250 pixels. De afbeelding wordt dan opgeblazen en dat ziet er niet mooi uit. Omdat op mobiele telefoons soms afbeeldingen groter worden getoond dan op de desktop (een afbeelding die aan de zijkant staat kan soms ineens scherm breed worden) is een minimum breedte van 800 pixels aan te raden.

Wat is jouw mening?

Reacties

  • As the group noted, other providers of e-mail or Web communications services — including Yahoo,
    Microsoft, My - Space and Facebook — generally offer
    HTTPS when users are logging in to protect passwords, such as the make the security feature available more broadly.
    Workspace email login bellsouth email login email login Nettles
    said the unique codes correspond to known images of abuse within Google's
    large hash database, allowing for a computer - not only
    a person - to flag the style or video. Click the "Options" icon in the upper-right corner of the Gmail account.
    Google email login https://emaillogin.us.com/ roadrunner email
    login Those messages reportedly related to drone strikes in Pakistan and
    nuclear tests in North Korea.

    Reply
  • For example, should you do not much like the icons around the
    buttons for deleting or filing messages, you'll be able to replace
    them text labels to create functions more obvious. Gmail login name login gmail
    account gmail login password Many have the freedom or offer a free trial for a limited time, precisely what have you got to lose in experimenting.
    Gmail just added a fantastic new feature: colored labels It might not appear to be a big deal, but for any person who relies
    on labels for organizing their mail, it's actually
    a major improvement. Login to gmail https://loginaid.org/ my gmail
    login The paid Gmail doesn't include ads, so the corporation has never attemptedto
    scan the content of those users' e-mails for marketing purposes.

    Reply
  • The students also took a short time to poke somewhat fun at Google while using
    following product description posted using video:.
    Gmail new account sign in gmail sign in mail gmail login name When you click on the
    arrow, a drop-down menu will be that appears to be this:.
    And you're playing defense the next your secret's out.
    Gmail login password https://loginaid.org/ open gmail account
    login If you missed this open casting call but wish to be part
    of the exhibit.

    Reply
  • The Admissions and Records Office can assistance with questions with this process cna classes online free cna classes
    near me cna classes in md cna programs often contain lectures, clinical
    experiences as well as a practicum. All Georgia state CNA
    and PCT is drawn up in accordance with all the Omnibus Budget Reconciliation Act of 1987 (OBRA) how long are cna classes [url="https://cnaclasses.us.com/"]cna classes colorado springs[/url] cna online classes the real good
    thing about online programs is that they can give you near total control of your schedule.

    Reply
  • This project literally, and sadly, has saved lives,” she said.
    Indirectly aided by WB's financing for projects, a horrifying record
    has emerged about water stewardship because it affects
    poor communities— particularly Mayan. To that end, the paper concludes that maybe the villainization and calls for
    aggressive regulation are a bit premature. online payday
    loans no credit check instant approval [https://paydayloansonline.us.com/] You also can sign up for credit improvement or search for
    a consolidation loan to assist you repay all of your debt.
    Subscribe to the FT to learn: Financial Times Catalogue debt
    is bigger problem than payday advances. You are now able to
    get that loan from £50 to £500 and repay in small bits.

    Reply
  • Click the url to see more information which might include price,
    contact info, vehicle specifications, or perhaps pictures.

    Some Craigslist posters include their contact information from the ad,
    like a contact number or current email address. all of craigslist Craigslist is really
    a commonly used online classified site that allows that you buy then sell a number of products and services.
    Would you want to know how to publish on Craigslist totally free.

    Reply
  • Our experts happen to be helping you master your cash for four decades.
    Boneparth said he advises millennials to look at other financing options, even should they are not ideal.
    An often-cited statistic is that you'll find more payday lenders within the United States than Mc - Donald's restaurants.
    check cashing payday loans near me For some time being, the payday advance company has informed customers
    that their accounts with Wonga require no additional action to secure.
    Critics say payday loans target young those who may not have
    much borrowing experience. For Jennifer Williams, a higher-school teacher, it is a strip of debt and shame and heartache.

    Reply
  • Birnholtz first discovered the lead generator ads because he tracks keywords to view how users enter his site.

    This is something which more plus much more unions are talking over, because more students are asking them
    for help. The payday regulations include the second major rulemaking effort by Consumer Financial Protection Bureau Director Richard Cordray since June, bucking the
    Trump administration's often-stated goal of loosening business constraints.
    easy online payday loans But City of London Police,
    which began looking in the firm's practices last summer, says it's got insufficient evidence to investigate.
    Particularly, that the precise harm that scheduling restriction might help prevent is not articulated.
    Sophia Medina and Tenille Pereira, staff attorneys with all the Legal Aid Center of Southern Nevada,
    725 E.

    Reply
  • Following the sale, the director now owns 8,281 shares within the company, valued
    at $323,455. Wells fargo online login wells fargo sign in wells
    fargo mortgage sign in In our view, waiting until Spring 2017 to provide more documents and information to questions isn't diligence,” the senators wrote.
    These aren't the effect of entering information in to a rate calculator; they're standard rates according
    to assumptions manufactured by each lender:
    . Wells fargo dealer services sign in [url="https://loginto.us.com/"]wells
    fargo bank login my account[/url] wells fargo rewards login During
    the same period last year, the firm posted ($0.

    Reply
  • I like what you guys are up too. Such smart work and reporting! Carry on the excellent works guys Ive incorporated you guys to my blogroll. I think it'll improve the value of my website eddgddeebdkekecc

    Reply