Kursiv Platform Logokursiv.

Verbesserter Support und Integration von Bildern auf Kursiv

Robin Ostner 4.2.2024 • Lesezeit: 5 min
|

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!



|

Kommentare

Was denkst du?

Melde dich an um deine Gedanken zu teilen.

Geschrieben von Robin Ostner

Veröffentlicht am: 4.2.2024
Profil ansehen

Hi ich bin Robin, der Gründer von Kursiv. Hauptberuflich bin ich seit mehreren Jahren Webdeveloper und arbeite seit 2022 als Consultant bei Netlight. Ich schreibe selber eigentlich nicht oft, aber ab und zu lasse ich auch meinen Gedanken freien Lauf. Ich schreibe zu verschiedensten Themen aber aktuell hauptsächlich über Kursiv selbst.

Wolltest du auch schon mal einen Artikel schreiben?

Mehr Stories von Robin Ostner

Wie erstelle ich einen kostenlosen Blog?

Du möchtest den kleinen Zeh ins Wasser stecken und einen eigenen Blog erstellen ohne viel Aufwand und vor allem ohne Kosten zu haben? Dann bist du hier genau richtig gelandet, denn ich werde dir hier in nur wenigen Minuten die besten Optionen zeigen, wie du völlig kostenlos einen eigenen Blog erstellen kannst. Wenn du dich dann später für eine aufwändigere Methode entscheidest, weil du dir sicher bist, dass du es mit dem Bloggen ernst meinst kannst du das ja natürlich trotzdem noch tun. Davon hält dich definitiv niemand ab, auch wenn es dann vielleicht nochmal etwas Aufwand bedeuten könnte die Plattform zu wechseln.

27.3.2024 Lesezeit: 10 min

Was ist ein Labersack?

Wenn man eine Freundin von mir frägt, dann bin ich ein Labersack. Deshalb hieß auch diese Plattform (Kursiv) am Anfang so. Und sie hat nicht ganz unrecht damit, zumindest in gewisser Hinsicht.

20.2.2024 Lesezeit: 3 min

Eine deutsche Medium Alternative

Wer sich heutzutage viel auf Englisch im Internet bewegt ist vermutlich schon des Öfteren auf die Webseite Medium gestolpert und hat dort den ein oder anderen Artikel gelesen. Ich persönlich freue mich immer, wenn ich bei meiner Internetrecherche einen Medium Artikel entdecke, weil ich mir meist recht sicher sein kann, dass der Artikel gut geschrieben ist und visuell ansprechend ist. Vor allem werde ich nicht sofort mit Werbeanzeigen vollgemüllt, was das Lesen um einiges angenehmer macht, weil ich mich voll und ganz auf den Artikel konzentrieren kann.

11.2.2024 Lesezeit: 4 min

Bilder sagen mehr als tausend Worte

Mit Worten lässt sich einiges kommunizieren, aber leider nicht alles. Deshalb freut es mich, dass Kursiv ab heute auch Bilder unterstützt. Damit kann der Text etwas untermalt werden und auch Anleitungen zu gewissen Themen lassen sich jetzt hier umsetzen. Man findet aktuell 2 verschiedene Möglichkeiten Bilder hochzuladen. Es gibt jetzt ein Profilbild und es lassen sich Bilder im Fließtext in deinen Stories hinzufügen.

21.1.2024 Lesezeit: 4 min

Eigenen Blog kostenlos erstellen in nur 5 Minuten

Auf Kursiv kannst du eigene Artikel veröffentlichen ohne dich mit einer eigenen Webseite auseinandersetzen zu müssen und du bist innerhalb weniger Minuten startklar. Es ist die perfekte Möglichkeit für dich den Einstieg in die Welt des Bloggens zu machen. Bisher musste man sich dafür mit einer eigenen Webseite rumschlagen wenn man einen eigenen Blog erstellen wollte, was bedeutet hat, dass man sich mit Dingen wie Domains, Baukastensystemen und sonstigem technischen Kram auseinandersetzen muss. Wenn es dir bei diesem Gedanken eiskalt wird, dann ist Kursiv genau das richtige für dich.

15.1.2024 Lesezeit: 4 min

Die besten Wege einen eigenen Blog zu erstellen

Im Jahr 2024 sollte man meinen, dass es einen einfachen und schnellen Weg gibt seine eigenen Artikel im Internet zu veröffentlichen, ohne gleich eine eigene Webseite dafür erstellen zu müssen. Dem ist grundsätzlich auch so, nur nicht für die deutschsprachige Bevölkerung. Leider fällt es uns aus irgendeinem Grund noch immer schwer, ins 21. Jahrhundert und die Digitalisierung einzutreten. Ich möchte hier wirklich niemandem zu nahe treten, aber deshalb findet man auch heute noch Informationen auf Webseiten, die aussehen, als hätte sich ein Clown aus dem Jahr 2005 darauf übergeben, oder auf solchen, auf denen man den eigentlichen Inhalt vor lauter Werbepopups schon gar nicht mehr finden kann. Jedes mal wenn ich etwas auf Deutsch suchen muss, würde ich am liebsten direkt wieder den Browser schließen, was mir zum Glück eher selten passiert, da ich meistens auf Englisch im Internet unterwegs bin. Deshalb ist mir dieses Problem auch lange Zeit nicht bewusst gewesen, da es, wie bereits erwähnt, im Englischen viele Möglichkeiten(z.B. Medium) gibt für Hobbyautoren etwas in einem ansprechenden Format zu veröffentlichen.

31.12.2023 Lesezeit: 9 min

Alles von Robin Ostner ansehen

Beliebte Stories auf Kursiv

Bilder sagen mehr als tausend Worte

Mit Worten lässt sich einiges kommunizieren, aber leider nicht alles. Deshalb freut es mich, dass Kursiv ab heute auch Bilder unterstützt. Damit kann der Text etwas untermalt werden und auch Anleitungen zu gewissen Themen lassen sich jetzt hier umsetzen. Man findet aktuell 2 verschiedene Möglichkeiten Bilder hochzuladen. Es gibt jetzt ein Profilbild und es lassen sich Bilder im Fließtext in deinen Stories hinzufügen.

Robin Ostner 21.1.2024 Lesezeit: 4 min

Die Teutonensaga

Kapitel 1 - Eine barbarische Kindheit

Bunny Kill 28.2.2024 Lesezeit: 24 min

Neues Jahr - Neues Leben? Neue Rituale zu Gewohnheiten werden lassen.

Zu Neujahr werden besonders gerne gute Vorsätze gefasst: Mehr Sport, gesünder Essen, abnehmen, kein Alkohol, kein Rauchen… die Liste kann endlos so weiter gehen.

Anja Groß 14.1.2024 Lesezeit: 4 min

Eine deutsche Medium Alternative

Wer sich heutzutage viel auf Englisch im Internet bewegt ist vermutlich schon des Öfteren auf die Webseite Medium gestolpert und hat dort den ein oder anderen Artikel gelesen. Ich persönlich freue mich immer, wenn ich bei meiner Internetrecherche einen Medium Artikel entdecke, weil ich mir meist recht sicher sein kann, dass der Artikel gut geschrieben ist und visuell ansprechend ist. Vor allem werde ich nicht sofort mit Werbeanzeigen vollgemüllt, was das Lesen um einiges angenehmer macht, weil ich mich voll und ganz auf den Artikel konzentrieren kann.

Robin Ostner 11.2.2024 Lesezeit: 4 min

Vitamin D - Bildung ab wann möglich?

Es wird wieder Frühling. Die Sonne strahlt und die Natur erwacht. Auch uns zieht es jetzt wieder raus ins Freie.

Anja Groß 11.3.2024 Lesezeit: 3 min

Der "Rabeneltern" Irrglaube

Rabeneltern. Rabenmütter. Diese Ausdrücke existieren schon sehr lange in unserem Sprachgebrauch. Es werden damit Eltern bzw. Mütter assoziiert, die sich schlecht oder gar nicht um ihre Kinder kümmern und sie vernachlässigen.

Mama Rabe 7.3.2024 Lesezeit: 2 min