Eine schöner Ansatz, der zumindest einen großen Teil dieses Gebietes abdeckt, bietet Adaptive Images. Die Software habe ich nicht getestet und sie dürfte für viele ohnehin nicht nutzbar sein, da sie PHP und einen Apache Webserver erfordert. Die Idee ist aber gut und einfach umsetzbar.

Client: Cookie mit Bildschirmdimensionen setzen

Wer generell gegen Cookies und Javascript ist kann jetzt aufhören zu lesen. Via JS setzen wir im Head ein(en?) Cookie mittels JS, in dem die maximale Bildschirmgröße gespeichert wird:

document.cookie = 
    'resolution=' + Math.max(screen.width,screen.height) + '; path=/';

Da wir das Maximum wählen, können wir sicher sein, dass Bilder auch nach dem Kippen des Gerätes ins Querformat noch ordentlich aussehen.

Das war es auch schon. Der Browser sendet ab sofort bei jedem Aufruf die Auflösung mit. Auch bei Bildern, ob aus Img-Element oder CSS.

Server: Bildanfrage abfangen, Bild in neuer Größe erzeugen und umleiten

Serverseitig muss die Anfrage nun auf irgend ein Serverprogramm umgeleitet werden. Dieses kennt den Pfad zum Bild und die gewünschte Dimension. Es nimmt also das Bild, skaliert es herunter und speichert es. Nun schickt es dem Client eine Weiterleitung auf die optimierte Datei. Diese kann sogar permanent sein, da sich die Dimensionen eines Browsers in aller Regel nicht ändern.

Die Skalierung des Bildes ist nur beim ersten mal für eine bestimmte Größe nötig. Später wird auf die bereits erzeugten Varianten verwiesen.

Nur ein Ansatz

Dies ist natürlich nur ein Ansatz. Welche Bilder skaliert werden sollen und wodurch diese vom Server erkannt werden muss für jede Website geklärt werden. Zudem sollte man sich Normgrößen überlegen, damit nicht unzählige Varianten ein und der selben Datei wegen zwei Pixeln Unterschied auf der Platte landen.

Gegenüber verbreiteten Ansätzen gibt es einen zentralen Vorteil. Browser müssen nicht erst alle kleinen Bilder laden um im Nachhinein via Javascript zu erfahren, dass sie diese durch für ihre Größe angemessene Varianten ersetzen sollen. Hier lädt der Client ein Bild und der Server liefert ihm was er braucht.

Der Ansatz funktioniert nicht ohne Javascript und Cookies. Sind diese deaktiviert oder nicht vorhanden, erhält der Browser eine Standardversion des jeweiligen Bildes. Die Website funktioniert somit dennoch wie erwartet, nur die Optimierung fehlt.

final File file = 
    new File( MyClass.class.getResource( "myfile" ).getPath() );

Textdatei in String lesen

Will man eine solche Datei lesen und in einen String schreiben, helfen Apaches FileUtils:

public String getFileContent( final String fileName ) {
    final File file = new File( MyClass.class.getResource( fileName ).getPath() );
    try {
        return FileUtils.readFileToString( file );
    } catch ( final IOException e ) {
        throw new RuntimeException( "Cannot find file: " + file.getAbsolutePath(), e );
    }
}

„Für jeden Job das passende Werkzeug“ führt gern zu folgenden Strukturen auf Server und Entwicklungsumgebung:

http://localhost:8080/tomcat-project
http://localhost:8081/node-project
http://localhost:8082/php-project

Ein Albtraum für jeden Ajax-Entwickler. Mit Nginx lassen sich verschiedene Hosts und Ports zusammenfassen.

Nginx unter Ubuntu installieren und konfigurieren

sudo apt-get install nginx

Ähm… Fertig. Linux eben. Nun die Konfigurationdatei

/etc/nginx/sites-available/default

etwa folgendermaßen anpassen:

server {
    listen   80;
    server_name localhost;

    location /tomcat-project/ {
        proxy_pass http://127.0.0.1:8080/tomcat-project/;
    }

    location /node-project/ {
        proxy_pass http://127.0.0.1:8081/node-project/;
    }

    location /php-project/ {
        proxy_pass http://127.0.0.1:8082/php-project/;
    }
}

Standardport des Apache ändern

Wird PHP mittels Apache ausgeliefert, muss der standardmäßig verwendete Port 80 geändert werden. Hierfür die 80 in den folgenden Dateien auf den Wunschport (im Beispiel oben etwa 8082) umstellen:

/etc/apache2/ports.conf
/etc/apache2/sites-available/default
/etc/apache2/sites-available/*

Abschließend Apache und Nginx neustarten:

sudo /etc/init.d/apache2 restart
sudo /etc/init.d/nginx restart

Selber Host, selber Port

Nun lassen sich verschiedene Webserver (technologisch oder gar physisch getrennt) über die selbe Adresse erreichen:

http://localhost/tomcat-project
http://localhost/node-project
http://localhost/php-project

Das Beispiel bezieht sich lediglich auf HTTP, kann aber analog für beispielsweise HTTPS (Port 443 statt 80) konfiguriert werden.

Um hier keinen falschen Eindruck aufkommen zu lassen: Nginx kann noch weitaus mehr. So ist ein Apache unter Umständen gar nicht notwendig und PHP kann als CGI direkt ausgeführt werden. Die offizielle Dokumentation sollte einen etwas umfangreicheren Überblick liefern.