Vergleich von Bildformaten für das Web

Eine Webseite, die verschiedene Bildkompressions-Methoden vergleicht: von drei Beispiel-Bildern werden verschiedene Varianten erstellt (unterschiedliche Dimensionen, unterschiedliches Dateiformat, unterschiedlicher Qualitätsparameter bei der Kompression).

Ein Projekt von Brigitte Jellinek brigitte.jellinek@fh-salzburg.ac.at unter der Lizenz CC BY 4.0

Dieses Projekt ist öffentlich zugänglich auf https://web-development.ct.fh-salzburg.ac.at/images/compare/

Projekt selbst neu bauen

Du kannst das Projekt auf verschiedene Arten anpassen und neu bauen:

• Bilder austauschen
• Text verändern

Dafür gibt es zwei Programme, die in Python geschrieben sind. Du brauchst also python und pip, um sie laufen zu lassen.

Als Vorbereitung musst du zwei Zusatzpakete installieren:

pip install Pillow Jinja2

Bilder austauschen

Die Ausgangsbilder müssen im Hochformat sein, die Dimension 1200px mal 1500px haben und im Hauptordner des Projekts liegen. Im Original sind das Bluntausee.jpg, SalzburgerCafe.jpg und Sonnenuntergang_am_Meer.jpg. Kopiere deine neuen Bilder auch in diesen Ordner und schreibe ihre Dateinamen in der Datei build_webpage.py in das Array.

# Dateiname der Ursprungsdatei und Name der für neue Bilddateien verwendet wird
# also z.B. aus "Bluntausee.jpg" werden viele Dateien erzeugt, die mit "Bluntausee" beginnen
SOURCES = [
    ("Bluntausee", "Bluntausee.jpg"),
    ("SalzburgerCafe", "SalzburgerCafe.jpg"),
    ("Sonnenuntergang_am_Meer", "Sonnenuntergang_am_Meer.jpg"),
]

Dann kannst du die beiden Programme laufen lassen:

python build_imagefiles.py
python build_webpage.py

Text verändern

Editiere den Text (und das HTML) in der Datei template.html. Verändere nicht, was in geschweiften Klammern steht:

{{ full_tables }}

Dann kannst du das Programm laufen lassen:

python build_webpage.py

Verwendete Quellen und Lizenzen

Siehe Datei attribution.html für die Lizenzen der Bilder.

Die Web-Komponente image-compare zum Vergleich zweier Bilder in der Webseite wird unter MIT Lizenz verwendet. - https://github.com/cloudfour/image-compare - https://cloudfour.com/thinks/building-an-accessible-image-comparison-web-component/

Die Programme build_imagefiles.py und build_webpage.py wurden mit Claude Code erstellt. Sie stehen unter der MIT Lizenz (siehe Datei MIT_LICENSE.txt)