Wordpress maakt fouten in weergave foto's

Status
Niet open voor verdere reacties.

henri2500

Gebruiker
Lid geworden
28 feb 2007
Berichten
265
Hallo allemaal,

Ik hou sinds kort een kleine website bij en kom tot de conclusie dat Wordpress mijn foto's soms vergooit. Hij maakt er vierkantjes van en laat deze ten opzichte van elkaar verspringen zodat ik soms een foto krijg weergegeven als dit: Een keer F5 verhelpt soms het probleem, soms niet, maar het is wel lelijk en lastig. Heeft iemand enig idee wat dit zou kunnen zijn?

Groeten Henri

P.S: Een voorbeeld

Fout%20in%20website.png
 
Laatst bewerkt:
Ik denk dat je de foto's eerst moet verkleinen. Hoeveel MB heeft een foto als je deze er op zet. Maak er kb van en probeer dat eerst eens. En of maak er eens een jpg van. Ik zie nu dat het een PNG is.
 
Laatst bewerkt:
Op de website verklein ik foto's altijd naar 800 x 600. Het aantal MB is dus drastich gedaald. Tevens maak ik ook gebruik van JPG. Ik weet niet hoe jij ziet dat er een PNG staat, die foto die ik postte heb ik namelijk gewoon even met printscreen getrokken, en ja, dat is een PNG geworden, maar op de website staan enkel JPG's.
 
Oke, Henri hallo goedemorgen. Ja ik kan dat zien. Ik klikte met de rechtermusiknop op eigenschappen. Dan zie je in het venster wat zich opent een schernpje en daar staat PNG. Daar staat ook iets van bla bla creations / fout enz enz .

Fout in website.JPG

Maar het is niet opgelost neem ik aan. De foto er af halen en een JPG maken zoals je altijd doet zou het probleem moeten oplossen. Anders toch iets kleiner maken maar 800 x 600 kan voldoen. Let wel hoe meer (veel) foto's en hoe meer grootte in mb of kb gaat ten kostte van de laadtijd. ;)
 
Hoi Henri,
Het is denk ik nog niet 100% gezegd dat het aan de bestandsgrootte van de afbeelding ligt.
Het kan ook nog aan andere dingen liggen.
Om dat te kunnen zien, is de pagina in levende lijve nodig.

Heb je een link naar de (test)pagina?

- Ho stop, ik heb 'm gevonden: www.creations-of-nature.com/ne/dagboek/08-09-en-14-08-2012-nachtvlindernachten-deel-2/

Vraag
In welke browser(s) doet het probleem zich voor?
  • Bij mij gaat het namelijk goed in Firefox, Chrome, Opera en Safari, en ook in Internet Explorer 7.

Algemeen
Eerst de algemene gezondheidscheck voor deze pagina:
  1. De html-validator zegt: 1 fout, 2 waarschuwingen.
    Maar deze 3 kunnen de oorzaak niet zijn.
  2. De css-validator zegt: 8 fouten in .../themes/2010-weaver/style.css, en 13 fouten in .../weaver-subthemes/style-weaver.css.
    Maar op 1 na gaat het allemaal om browser-specifieke extra'tjes, en de errors kunnen het probleem niet veroorzaken.
  3. De javascript-console vindt 1 fout.
    Maar omdat ik het probleem hier niet kan reproduceren, kan ik niet nagaan of herstel van deze (niet zo grote) scriptfout verbetering zou opleveren.

De images
Eerst eens de Huismoeder.JPG opgehaald. Dat is een bestand van 800*600px en heeft een bestandsgrootte van 162kB.
Hé, op scherm wordt deze terug-geschaald naar 640*480px. :rolleyes:
Dat betekent:
  • Wat méér is dan de 640x480px, kan toch niet op scherm vertoond worden. Er worden dus (800x600 - 640x480 = ) 172.800 pixels voor spek en bonen gedownload! Voor de bezoeker en z'n browser: vertraging door 36% ballast-download!
  • Browsers en processors hebben energie en tijd nodig om de foto te verkleinen: dat vertraagt extra.
  • Vooral als je naast de browser andere (zware) programma's hebt openstaan, kan het dringen worden voor de processorbelasting; dat zou een oorzaak kunnen zijn van het slecht renderen.

Dit alles geldt ook voor de andere 8 foto's op deze pagina, want die moeten ook allemaal van 800*600px naar 640*480px!
Er valt dus veel winst te halen uit het op de juiste maat brengen van de foto's (vergroten/verkleinen werkt kwadratisch door! Zie de voetnoot hier).

Doe je dat met de huismoeder, en sla je die op met 20% jpg-compressie (geen waarneembaar kwaliteitsverlies), dan wordt het:
Dat is dus nog geen 30% van het origineel van 162kB (maar 29%)!

Hetzelfde geldt voor de andere images, en voor het totaal tikt dat lekker aan:
  • Totale bestandsgrootte van de 9 foto's was: 1465kB (=1,4MB !) te downloaden.
  • Alles teruggebracht tot 30% geeft: maar 440kB te downloaden (en geen browser-schalen nodig).
  • Winst: 1MB ! :)
  • En de bezoeker/ster heeft de pagina veel eerder op scherm.

Met vriendelijke groet,
CSShunter
 
Beste Manamana: Klopt, deze printscreen staat idd als PNG op de server, maar de foto's allemaal als JPG.. zie CSShunters bericht.

CSShunter, wat een geweldig uitgebreid bericht! Bij mij komt het af en toe voor dat de website in zowel Firefox als IE9 fout wordt weergegeven. Het is niet altijd zo, dus het kan zijn dat je een paar keer de pagina moet bekijken voor dat je een fout ontdekt.

Het is fijn om te horen dat er waarschijnlijk niks aan de scripts ligt. En die uitleg die je geeft over de bestandgroottes van de website is duidelijk. Ik wist niet dat de website automatisch de foto's nog verkleinde, maar ik zal dan zeker de volgende keer de foto's nog kleiner maken, want dat scheelt idd heel wat bestandsgrootte en laadtijd.

Verklaart echter nog niet waarom er fouten worden weergegeven soms, of zou dat ook met die laadtijd te maken kunnen hebben?
 
Laatst bewerkt:
Ja, dat zou heel goed kunnen.
Browsers zijn tegenwoordig in de race om maar zo snel mogelijk iets op scherm te tonen: "Onze browser is sneller dan alle andere!".
Dus beginnen ze zo snel mogelijk om images op scherm te zetten, terwijl er op de achtergrond ook nog gedownload wordt.
Ik kan me voorstellen dat browsers dan bij veel en grote images soms struikelen over hun eigen snelheid.
En dan met name als de images ook nog in de browser geschaald moeten worden: dan moet de browser een beetje veel tegelijk doen.
  • Een browser kan geloof ik maximaal 4 of 6 gelijktijdige verbindingen hebben met één server. Als er veel foto's gedownload moeten worden, moet er telkens gewacht worden tot de vorige 4 of 6 binnen zijn; en als die groot zijn, duurt het wachten langer.
  • Het verschil kan enkele milliseconden zijn, maar kan mogelijk net genoeg zijn om soms een verhaspeld beeld op te leveren.
  • Het tijdstip en de drukte op de (gedeelde) server zou misschien ook kunnen uitmaken: soms vlot, soms traag.

Het kan eventueel ook nog schelen of je harde schijf langzamerhand begint vol te lopen, zodat de grote bestanden erg gefragmenteerd op je pc komen te staan. Na het downloaden moeten dan al die losse partjes weer opgehaald en aan elkaar geplakt worden.
Zo kunnen wellicht ook andere hard- of software-perikelen een rol spelen: bv. hoe zwaar de processor op dat moment belast is (door andere programma's), of een ijverige virusbeschermer die de gedownloade bestanden nog even vasthoudt om ze te checken voor ze definitief worden toegelaten, enz.

In elk geval: hoe groter de foto-bestanden, des te meer kans op tussentijdse ongelukken!

=======
Ik wist niet dat de website automatisch de foto's nog verkleinde
Bij de foto's staat wel opgegeven dat ze 800*600 moeten zijn, maar in het stylesheet style.css wordt de maximale breedte van images in het content-gedeelte aan banden gelegd (regel 855), wat niet zo'n slecht idee is:
Code:
#content img {
    max-width: 640px;
    height: auto;
}
Hoe dit in het Wordpress-stylesheet verzeild is geraakt, weet ik niet; het kan via het sjabloon door Wordpress gedaan zijn, of misschien heb je dat zelf eens opgegeven.
Doordat de hoogte tegelijkertijd op automatisch is gezet, wordt ook de opgegeven hoogte niet aangehouden, maar in proporties gebracht met de breedte. De hoogte wordt hier dus (640/800)*600 = 480px.
Zo blijft alles gelukkig in verhouding.
Maar de bestanden meteen 640*480 maken scheelt dus enorm! :)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Doordat mijn sites zo langzaam geworden waren, ben ik nu al mijn foto's vaan het verkleinen naar 800x600 en daarna gooi ik de plugin Smush.It er nog eens overheen. Die installeer je dus via het Dashboard.
Dat is een geweldige plugin die zorgt dat je foto's gecomprimeerd worden en dat scheelt ook weer enorm.

Heb je de gratis Wordpress (dus wordpress.com en niet via een hosting) dan kan je helaas geen plugins installeren en zal je het handmatig moeten doen op je pc en daarna uploaden naar je site.

En ja, CSShunter geeft uitgebreide hulp, ik weet er alles van! Hulde!!

ps. je hebt het al veranderd? Want hier is alles netjes te bekijken. Gebruik Firefox versie 14.0.1
 
Laatst bewerkt:
@CSShunter: Overduidelijke uitleg CSShunter, mijn diepe respect en dank! Ik ga vanaf nu die maten aanhouden en hopen dat ik daarmee de browsers wat minder pest. Misschien dat dat het probleem oplost. Fijn om iig te weten dat het niet in de code zit, want anders had het wel elke keer moeten gebeuren en jij vind geen duidelijke fout. Bedankt!

@femke98: Thanks! En idd, hij geeft super advies :D
 
"Hij geeft ... " ?
Dank voor de complimenten! Maar zie deze! :P


  • Als je een heel mapje foto's tegelijk wilt laten formaat-verkleinen en/of meer jpg-compressie wilt laten geven, dan kan je daarvoor (onder Windows) IrfanView gebruiken. Zie dit topic.
  • Voor nog wat algemene beschouwingen over zo klein mogelijk opslaan van image-bestanden: Zo klein mogelijke images!

Met vriendelijke groet,
CSShuntster?
 
Laatst bewerkt:
Ow, oeps, haha! Idd, what's in the mens mind. Mijn oprechte excuses madame!

Groeten Henri
 
OMG!! Hahaha, geweldig dit! Nooit achter je gezocht, maar ja..................de naam is zo.............mannelijk.
Ik kan er niets aan doen. Maar wel even mijn welgemeende excuses geven. Bij deze dus.
 
/offtopic/
:d
Ach, meneer henri resp. mevrouw femke (neem ik aan), mensen zijn er in allerlei soorten, terwijl "De roeping van de mens is mens te zijn" (Multatuli).
  • Bij de oude Grieken en Romeinen hadden ze trouwens geen god van de jacht, maar een godin van de jacht: Artemis of Diana, uitgerust met pijl en boog.
Maar ik heb nog geen uitsluitsel gegeven, hihi. :P
Dus het blijft nog even raden:

Met vriendelijke groet,
CSShunter (m/v, wit/zwart, webprofessional/hobbyist, grotestedeling/provinciaal, linkshandig/rechtshandig, enz.enz.)
:d
/offtopic/
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan