search

springers54 / reiki

0 stars 0 forks source link

Problem Bilder auf der Startseite: Ladezeiten #161

Closed springers54 closed 5 years ago

springers54 commented 5 years ago

Eigentlich laden wir die Lehrerbilder in 800x 600. Diese werden auch für die Vorschauen genutzt. Du skalierst sie dann auf der Homeseite runter auf 800px × 600px (Skaliert zu 187px × 140px). Damit wird eine Menge an Ladezeit verschenkt. Wir brauchen hier eine bessere Lösung, das jetzige Konzept über die Beitragsbilder, wie du es gelöst hast, ist an der Stelle noch nicht effizient.

Was macht er denn auf dem Handy? Lädt er da auf die 800 px Bilder?

Danis und meins sind nur 400*300, die sehen aber als Vorschaubilder wieder viel zu klein aus.

joergsteinhauer commented 5 years ago

Ja, das Problem besteht noch. Habe es nicht vergessen und wollte es noch angehen, bis jetzt waren aber andere Sachen wichtiger.

Ich schaue als nächstes wie man das Problem lösen kann. Vermutlich müsste ich es ähnlich wie im CherryFramework machen... wobei das dort auch nicht bullet-proof ist. Mal sehen.

Z.z. werden überall (desktop, handy etc) die großen Bilder geladen.

springers54 commented 5 years ago

... das habe ich befürchtet

springers54 commented 5 years ago

Ich habe gerade mit Dani gesprochen und mache folgenden pragmatischen Vorschlag:

  1. Wir Verzichten auf der Startseite auf die Lightboxen komplett, Als Beitragsbilder laden wir die kleine Fassung der Bilder, die auf diese Seite kommt. Beim Klick auf das Bild passiert das gleiche, wie beim Klick auf dem Namen, die Detailseite des Lehrers geht auf. Auf dieser Seite ist ein Bild mit 400*300 Pix in der PC-Fassung. Ich denke, dass sich das mobil automatisch skaliert.
  2. Wir können dann das Fatherlight-Plugin wieder deinstallieren, ich weiß nicht, wo wir das sonst noch brauchen.

Wir glauben, wenn sich jemand wirklich für den Lenrer interessiert, dann ist das Zeigen der Detailseite logisch und ausreichend. Auch die Bilder in 400*300. Größer müssen die nicht sein.

joergsteinhauer commented 5 years ago

Guter Plan. Ich fand sowieso komisch, dass man beim Klick auf das Bild erstmal das große Bild angezeigt bekommt. Logischer ist es eben, auf die Unterseite zu gelangen.

Insgesamt ist das Thema "WP und Bilder" ziemlich umfangreich, ich versuche es zu erklären:

Ich habe bei Katrins-Seite einen Test gemacht und neues Bild hochgeladen: Die Bilder sollten dabei mind. 200px breit/hoch, das empfiehlt mir WP: image

Die Kacheln sind responsiv gestaltet, d.h. deren Größe ändert sich je nach Bildschirmbreite, dabei ist die max. Größe bei ca. 230x170px (Breite/Höhe).

Nun ist 170px zu wenig, also sind die die Bilder 267x200. Einziges Problem dabei mit der besagten Größe: auf hochauflösenden Bildschirmen sind diese Bilder unscharf, da man hier mind. die doppelte Größe bräuchte - also 534x400.

Generell lässt sich das Problem lösen, in dem man größere Bilder hoch lädt - aber unser Ziel ist es ja, die Bilder so klein wie möglich zu halten.

Das ist zum einen.

Zum Anderen; Man muss verstehen, wie WP mit Bildern umgeht: WP erzeugt beim Hochladen der Bilder in die Mediathek immer unterschiedliche Größen von jedem Bild. By default sind das diese Größen:

Das sieht man auch über FTP: image

Nun kann man In WP Einstellungen diese 3 Größen beliebig ändern: image

Des Weiteren erzeugt WP im HTML automatisch responsive Bilder, je nach dem, welches Bild man nimmt. Angenommen wir laden ein 500x500 Bild hoch, quetschen dieses aber in einen DIV mit 250x250px, dann wird ein img-tag erstellt mit mehreren Bild-Ressourcen:

Problem dabei ist: wenn man die Größen in Einstellungen nachträglich ändert, aktualisiert WP die alten Bilder nicht. Es werden also nur neu hochgeladene Bilder in neu definierten Größen erstellt. (Zusätzlich kann man aber auch weitere eigene Größen definieren).

Und genau das ist das Problem für uns: Wenn wir möglichst kleine Bilder ausgeben möchten, diese aber auf normalen Bildschirmen scharf bleiben sollen, müssen wir die Kachelgröße als Ausgangsbasis nehmen - das wären 230x170px. Wie aber oben beschrieben, müssen Bilder mind. 200x200 sein - also nehmen wir 267x200 Bilder, laden sie in die Mediathek und verwenden als Beitragsbild.

Da die Kachel größer als 150x150 ist (=Thumbnail-Größe), wird im HTML nun leider nur das 267x200 Bild ausgegeben - das 150x150 Bild wird heir gar nicht erst gebraucht. Ein größeres Bild für hochauflösende Bildschirme gibt es nicht - also ist das Bild hier unscharf.

Letztendlich ist es nur gut und korrekt, auf diese automatische Größen-Generierung und Ausgabe der passenden responsiven Bilder von WP zurück zu greifen. Man müsste also angesichts aller Bild- und Kachel-Größen eine passende Größe für das Ausgangsbild nehmen, ggf. die zu generierenden Bildgrößen in Einstellungen bzw. in einer neuer PHP Funktion anpassen/hinzufügen und dann diese Bilder von WP automatisch ausgeben lassen. Jedoch wären hier die Bilder nicht ganz so klein, wie man sich wünscht bzw. wie dann die SEO Tests es fordern.

Am Ende musst du entscheiden, was wichtiger ist: möglichst wenig KB pro Bild, damit die Seite schnell lädt, oder größere Bilder, die aber auch auf hochauflösenden Bildschirmen (was die meisten Smartphones sind) scharf aussehen.

Ich hoffe man kann meiner Beschreibung folgen.

Meine Empfehlung:

ausgehend von der Kachelgröße (230x170) Bilder in 534x400 hochladen, somit wäre das dann die Größe für das hochauflösende Bild. Für normale Bildschirme müsste WP dann 267x200 nehmen. Am Ende werden die Bilder kleiner skaliert und sind etwas unscharf. Jedoch muss ich hier nochmal anschauen, wie WP die responsiven Bilder rendert und ggf. neue Bildgrößen im PHP definieren. Danach müsste man für jeden Lehrer das Beitragsbild neu hochladen.

ODER

Wir laden nur 267x200 Bilder hoch und diese sind auf hochauflösenden Bildschirmen etwas unscharf. Wäre pragmatisch.

joergsteinhauer commented 5 years ago

Ich habe bei Katrin wie gesagt erstmal ein 534x400 Bild hochgeladen, dabei das Bild vorher manuell in Photoshop komprimiert. Ersparnis von 75KB auf 30KB im Chrome/Desktop. Wäre das ein Kompromiss? Wenn nein, bleibt nur eins: mein zweiter Vorschlag mit 267x200 Bildern.

springers54 commented 5 years ago

Wir reden absolut aneinander vorbei, du verstehst nicht, was ich meine. Mein Vorschlag ist einfach und pragmatisch:

  1. Wir nehmen als Beitragsbilder die Größe der benötigten Vorschaubilder, die sind nach der alten Seite 172*128 Pix, laden genau diese Größen halbwegs optimiert für jeden Lehrer hoch.
  2. Im Beitrag selbst nehmen wir das Bild 400*300, optimieren das ebenso.
  3. Beide Bilder müssen miteinander nicht mal was zu tun haben, die sind vollkommen unabhängig von einander, wenn wir es wollen.
  4. Ich befriedige weder Wordpress noch Facebook und irgendwelche Empfehlungen von denen, wozu auch. Facebook muss meine Vorschaubilder nicht zeigen, sie sollen nur auf der Seite halbwegs brauchbar sein.
  5. Es sollten auf jeden Fall, wie auch auf der alten Seite, 6 Bilder nebeneinander passen. Nach deiner neuen Aktion sind es nur 5 und es wird auch nur eine Zeile mit Lehrern angezeigt.

ich habe das an einem Beispiel probiert und für Karin ein neu hochgeladenes Vorschaubild von Lilo eingesetzt. Es ist 5 kb groß, muss gar nicht scaliert werden und sieht ordentlich scharf aus aus meiner Sicht.

grafik

joergsteinhauer commented 5 years ago

Naja, ich verstehe dich vollkommen, eher meine Erklärung ist nicht verständlich genug.

Wir blenden die Sache mit Social Media jetzt mal aus - nun weiß ich, dass es euch egal ist. Dann nehmen wir darauf keine Rücksicht. Ich wollte es nur nicht unangesprochen lassen, da viele Menschen Social Media als wichtig betrachten.

Dann habe ich versucht zu eklären, wie Wordpress mit Bildern umgeht und welchen Zusammenhang es mit der Lehrer-Kachel und dem Darstellen auf hochauflösenden Displays hat. Genau das ist scheinbar nicht angekommen. Das hat nichts mit "Befriedigung von Wordpress" zu tun - viel mehr geht es darum, möglichst optimale Bilder WP zur Verfügung zu stellen, damit WP möglichst optimale Bilder rendert. Egal.

Wir machen erstmal so, wie du sagst. Wir nehmen relativ kleine Bilder für die Lehrer und laden diese auf jeder Lehrerseite als Beitragsbild. Nun wirst du dabei festellen, dass diese Bilder auf manchen hochauflösenden Bildschirmen unscharf sind. Also nicht wundern. Wenn du dies ändern willst, musst du entsprechend größere Bilder hochladen und als Beitragsbild nutzen.

Korrekt - das Bild, was man oben auf der Lehrerseite sieht, hat nichts mit dem Bild auf der Startseite zu tun. Ich habe auch nirgendwo das Gegenteil behauptet.

Die Lehrer-Kacheln auf der Startseite habe ich angepasst - der Link auf dem Bild führt zur Lehrerseite. Du kannst jetzt also beliebige Bilder als Beitragsbilder hochladen, diese werden dann auf der startseite angezeigt. Probiere dich gern aus und teste ggf. auf hochauflösenden Displays.

Anzahl der Kacheln auf der Startseite variieren je nach Bildschirmbreite - noch mal - das ganze Modul ist responsiv gestaltet. Maximale Breite ist jedoch 230px.

So wie ichs mitbekommen habe, testest du gern auf deinem Desktop - ist auch ok, vergiss aber nicht auch andere Geräte. Hier wirst du nicht nur den Unterschied bezüglich der Auflösung feststellen, sondern auch den der Anordnung der Elemente - nochmal - so ziemlcih alles ist responsiv gestaltet, d.h. die Elemente haben nicht immer gleiche Abmessungen und schon gar nicht die gleiche Position.