Verbesserter Support und Integration von Bildern auf Kursiv

Vor zwei Wochen habe ich endlich die Möglichkeit von Bilder im Fließtext veröffentlicht, was ein Feature ist was auf einer Blogging Plattform natürlich nicht fehlen darf. Man hat endlich nicht mehr nur Text vor sich, sondern man kann es jetzt auch schön mit Bildern untermalen. Das hilft vor allem wenn man Anleitungen zu gewissen Themen verfassen möchte, da es dort oft nötig ist etwas auch visuell darzustellen. Für die erste Version war ich sehr zufrieden mit der Lösung, aber mir war von Anfang an bewusst, dass es noch lange nicht perfekt ist. Ein paar dieser Probleme habe ich seitdem beseitigt.

Keine maximale Dateigröße für Bilder

In der ersten Version durften Bilder nicht größer als 1 MB sein. Das lag daran, dass ich noch nicht sicher war wie teuer das Hosting für diese Dateien werden würde deshalb wollte ich mich an die ganze Sache erstmal etwas rantasten. Nachdem ich Feedback bekommen hatte war schnell klar geworden, dass 1 MB einfach nicht ausreicht. Man konnte so gut wie keine Bilder hochladen, weil einfach jedes zweite Bild zu groß war. Das macht natürlich keinen Spaß, also habe ich erstmal das Limit auf 5 MB erhöht. Aber auch dieses Limit hat sich irgendwie nicht richtig angefühlt. Wie lang ist es her, dass man sich über so etwas auf einer Plattform Gedanken machen musste?

Das Limit für die Dateigröße musste also komplett weg, aber ich wollte auch nicht einfach unbegrenzt große Bilder zulassen. Es gab also nur einen Weg: Automatische Bildoptimierung!

Automatische Bildoptimierung mit WebP

Die einzige Lösung, um "unendlich große" Bilder zuzulassen, war eine automatische und für den Nutzer unsichtbare Bildoptimierung. Das Ziel voDie Bilder werden jetzt also vor dem Upload automatisch auf eine bestimmte Größe, welche für diesen Zweck vollkommen ausreicht, zurecht geschnitten. Die maximale Größe, sowohl Breite als auch Höhe, ist 1920 Pixel. Dabei wird das Bild aber niemals abgeschnitten sondern lediglich skaliert, sodass es in die Maße passt.

Daraufhin wird das Bild optimiert und in einem sogenannten Next-Gen Format namens WebP abgespeichert. Dieses Format ermöglicht es bei hoher Komprimierung eine bessere Bildqualität pro Datenmenge als das allseits bekannte JPEG zu erreichen. Dies ermöglicht deutlich kleinere Dateigrößen bei gleicher Qualität, was genau das ist was wir brauchen.

Schauen wir uns das ganze doch einfach mal an einem Beispiel an. Hier habe ich ein fantastisches Bild von Tim Mossholder, welches ich in originaler Größe von Unsplash heruntergeladen habe.

Das sieht doch echt gut aus oder? Dann schauen wir uns doch mal die Werte etwas genauer an.

Hier erstmal die originalen Werte vor der Optimierung:

Maße: 8256 x 5504 Pixel (45 Megapixel)
Dateigröße: 12,6 MB

Und hier die optimierten Werte:

Maße: 1920 x 1280
Dateigröße: 0,5 MB

Holy shit! Das ist eine Optimierung von ~96% der Dateigröße! Das nenne ich mal Effizienz. Klar geht dabei auch einiges an Information verloren, aber der Sinn hinter dem Bild ist ja auch nicht, dass man sich das auf eine riesige Leinwand packt und in einer Galerie zur Schau stellt. Es soll ja lediglich den Text untermalen und dazu reicht das optimierte Bild allemal. Das ganze hilft allerdings nicht nur mir, sondern auch den Lesern, da dadurch die Bilder viel schneller im Internet geladen werden. Das ganze wird, dann noch durch eine weitere On-Demand Optimierung perfektioniert.

On-Demand Optimierung

Wir haben jetzt also aus einem riesigen Bild ein immer noch recht großes aber deutlich kleineres Bild gemacht. Aber was, wenn wir das Bild gar nicht in voller Größe, sondern nur als Thumbnail, was auf Kursiv jetzt auch gemacht wird, anzeigen wollen? Dort brauchen wir nur ein kleines Bild mit maximal 256 x 256 Pixel, da wäre es doch ziemliche Verschwendung ein Bild in voller Auflösung zu senden.

Zum Glück bietet NextJS (das Framework mit dem Kursiv gebaut wurde) eine integrierte Lösung die Bilder On-Demand zu optimieren und genau auf die gebrauchte Größe zuzuschneiden. Das spart zusätzlich an Datenmenge und ermöglicht ein schnellere Ladezeit der Seite.

Selbes gilt für die Bilder im Text. Diese werden auf eine Breite von ca. 828 Pixel reduziert. Mehr ist auch nicht nötig, da die Bilder sowieso nicht größer angezeigt werden. Hier könnt ihr euch das optimierte Bild von vorhin in voller Größe anschauen:

https://prod.cdn.kursiv.io/images/301e0c95-8464-4613-9ccc-a10fa7f0b3a0.webp

Und hier ist das Bild das tatsächlich im Fließtext angezeigt wird:

https://kursiv.io/_next/image?url=https%3A%2F%2Fprod.cdn.kursiv.io%2Fimages%2F301e0c95-8464-4613-9ccc-a10fa7f0b3a0.webp&w=828&q=75

Thumbnails in Story Previews

Um die Story Previews etwas ansprechender zu gestalten und die neue Bilderfunktionalität vollständig auszunutzen werden jetzt auch automatisch Thumbnails erstellt und angezeigt. Dafür wird einfach das erste Bild im Fließtext verwendet. Wenn keins vorhanden ist dann wird einfach kein Thumbnail angezeigt, was auch in Ordnung ist.

Zukunftsmusik und was vielleicht noch kommt

Mit den Grundsteinen gelegt stehen jetzt etliche Möglichkeiten zur weiteren Verbesserung bereit. Man könnte zum Beispiel ein Titel Bild einstellen, was dann ganz groß am Anfang der Story angezeigt wird und das ganze noch professioneller wirken lässt. Denkbar ist es auch, dass man ein selbstgewähltes Bild als Thumbnail hochladen kann, welches dann nicht unbedingt im Fließtext auftauchen muss.

Was definitiv irgendwann noch sein muss ist ein Untertitel und vor allem ein Alt-Text. Diese Texte sind unabdingbar für Menschen mit Sehschwäche und helfen ihnen das Internet zu navigieren. Aktuell sind die Alt-Texte noch komplett leer, was nicht schön ist, aber dafür muss ich erstmal schauen wie ich das gut in den Editor integriert bekomme. Es wird aber definitiv kommen!

Das wars dann auch schon wieder von meiner Seite. Ich wollte nur mal wieder ein kurzes Update geben zu den neuesten Änderungen auf der Plattform. Wenn dich etwas anderes interessieren würde oder du Ideen zu neuen Features hast, gib mir gerne Bescheid. Du kannst mich ganz einfach unter kontakt@kursiv.io erreichen.

Tschüsli Müsli! Tschau mit au!