Grafiken // PC & Handy bzw. Tablet

  • Seit einigen Wochen beschäftige ich mich mit dem Thema responsives Webdesign. Von einigen Menschen höre ich immer wieder „wenn du es richtig machen willst dann stelle deinen Benutzern zwei Seiten zur Verfügung. Eine für das Web das andere für die Mobilen Geräte“ würde ich machen ist aber doppelte Arbeit. Wir im Verein machen alles ehrenamtlich und können uns auch keinen „Experten“ leisten.


    Ich bleibe meinem Vorhaben eine Seite für alle Geräte zu erstellen. Allerdings kommt es beim Mobilen Surfen auf oft noch auf die Größe der Daten an. Wenn ich nun z.B. eine Fotogalerie online stelle die auf dem PC schön groß dargestellt werden könnte ich die Bilder natürlich mit CSS kleiner drücken. In Wirklichkeit werden dennoch die volle KB des Bildes übermittelt. Lässt sich dieses umgehen in der Form „für das Handy bitte eine ganz anderes Bild laden“? Hätte dann zwar ziemlich viele Bilder / Videos usw. auf dem Webspace aber immer noch lieber dort als unsere User mit großen Bild- und Videodateien zu schockieren.



    Wie setzt ihr solche Sachen um?

  • Die meiner Meinung nach beste Lösung, vorausgesetzt du hast einen Apache-Server mit PHP drauf, gibt es hier: Adaptive Images


    Vorteile:
    - kein zusätzliches Markup außer ein Javascript im head (Bilder werden aber ohne Javascript trotzdem noch angezeigt, nur evtl. nicht skaliert)
    - Bilder werden einfach in der größtmöglichen Auflösung von dir bereitgestellt und bei Bedarf automatisch heruntergerechnet + gecached bzw. aus dem Cache geladen und dann an den User ausgeliefert


    Nachteile:
    - Apache + PHP sind Voraussetzung (aber danke dass du mich drauf gebracht hast vielleicht setze ich mich mal an eine Node-Lösung ;))
    - die gecacheden Bilder nehmen natürlich auf deinem Server Platz weg, das solltest du bedenken


    Einen guten Artikel dazu der die Funktionsweise auch nochmal erläutert gibt es hier

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!