Antworten auf deine Fragen:
Neues Thema erstellen

HTML und Bilder

elo63

Nicht mehr ganz neu hier

Hallo,
wie macht Ihr es, wenn Ihr Bilder in HTML einfügt, mit den Größen der Bilder ?

Also wenn ich in HTML ein Bild einfüge z.B.
<img alt="logo-Mustermann" src="img/logo.jpg" width="900" height="180" />
dann habe ich das Bild vorher mit einem Grafikprogramm auch auf die größe
900 * 180 gebracht.

Man kann aber auch das Bild selbst wenn es jetzt 1200 * 480 wäre so in HTML
einfügen und der Browser würde es dann auf 900 * 180 wie in diesen Beispiel skalieren.

Meine Frage welches vorgehen ist besser und Profihafter und warum.

Vielen Dank

elo
 

El Gordo

Noch nicht viel geschrieben

Bilder sollten nicht via CSS oder wie du es beschrieben hast skaliert werden.

Nimm ein einfaches Beispiel. Du möchtest ein Bild in der Größe von 1000x200 Pixeln im Browser anzeigen lassen. Das Originalbild hat aber die Abmessungen 2000x400. Skalierst du das Bild nun runter wird es zwar korrekt angezeigt aber die Ladezeit ist wesentlich höher als wenn du das Bild direkt auf die richtigen Maße bringst via Bildbearbeitungsprogramm.

Und die in deinem beispiel angegebenen Maße würden das Bild auch verzerren wenn du es runterskalierst. Die Proportionen bei den Maßangaben sollten, wenn du es denn schon skalierst, stimmen.
 
N

neudenk

Guest

Beim Surfen passiert es mit nicht ganz so schnellen Leitungen, dass sich Bilder quasi abrollen, weil sie erst nach und nach angezeigt werden. Das scheint mir der Effekt von zu großen Bildern zu sein, die beim Einbinden skaliert werden.
Das ist überflüssich und nimmt dann richtich viel Ladezeit wech, was mich nervt.
Leider scheint es heute nicht mehr üblich zu sein, auch die User mit geringerer Bandbreite zu berücksichtigen.
 
L

Lycanos

Guest

Bisher habe ich mir immer die Mühe gemacht, die Bilder vorher auf die richtige Größe mittels Grafikprogramm zu bringen.
Das automatische skalieren birgt vor allem die Gefahr des Verzerrens.
Auch das Argument mit der sehr langen Ladezeit kenne ich, wenn Bilder in voller Größe herunter geladen werden müssen und erst im Browser skaliert werden.
Was ich nicht auf anhieb weiß, ob die aktuellen CMS (joomla und co.) mittlerweile die Grafiken serverseitig mittels Skript skalieren bzw. ob es dafür Module gibt und diese die Grafiken dann gleich in der nur notwendigen Größe senden.
Bei statischen HTML-Seiten würde ich immernoch auf gute Vorarbeit setzen.
 

lachender_engel

Aktives Mitglied

Meine Frage welches vorgehen ist besser und Profihafter und warum.
Besser ist es immer das Transfervolumen im Auge zu halten. Bei DSL ist das nicht mehr so wichtig, aber durch die Smartphones und die Datenpakete umso mehr.

Je größer ein Bild ist, umso größer ist auch die Datei des Bildes. Damit überträgt der Web-Server auch mehr Datenvolumen zum Endgerät.

Um das einzudämmen nutzt Du idealer Weise immer das Minimum an Dateigröße. Im Umkehrschluss zu meiner Erklärung legst Du das Bild auch nur in der Größe auf dem Server ab, in der es später angezeigt wird. Zusätzlich achtest Du noch auf das Dateiformat. Je nach dem was Du im Bild zeigen willst sind die Dateiformate GIF; JPG und PNG unterschiedlich sinnvoll. Zudem spielt bei JPG noch die Datei-Komprimierung eine große Rolle.

"Professionell" ist es zudem direkt ein adaptive, responsive oder fluid Design zu erstellen. Dabei passt sich der Inhalt (= Content) der Anzeigengröße des Endgerätes an.

In dem Fall stellst Du das Bild in der maximal notwenigen Größe bereit und am Endgerät wird es in die machbare Größe skaliert bzw. prozentual angepasst.

Zusammengefasst:

- So wenig Datenvolumen wie nötig übertragen!
- Die Bilder nur so groß wie sie sein müssen (Bildgröße und Datei).
- Bestes Bildformate und Komprimierung für jedes Bild ermitteln und nutzen.

Ist es das, was Du wissen wolltest?
 
Zuletzt bearbeitet:

vincitore

Aktives Mitglied

"Professionell" ist es zudem direkt ein adaptive, responsive oder fluid Design zu erstellen. Dabei passt sich der Inhalt (= Content) der Anzeigengröße des Endgerätes an.

In dem Fall stellst Du das Bild in der maximal notwenigen Größe bereit und am Endgerät wird es in die machbare Größe skaliert bzw. prozentual angepasst.

Warum nicht mehrere Größen, die je nach Fenstergröße ausgewählt werden?
 

lachender_engel

Aktives Mitglied

Warum nicht mehrere Größen, die je nach Fenstergröße ausgewählt werden?
Weil dei Fesntergröße nicht statisch ist.
Beispiel: Besucher hat einen 22" Monitor und sein Browser ist in einem beliebigen, kleineren (nicht Vollbild) Format wie 1078 x 644 Pixel geöffnet. Die Seite wird geladen und der Server liefert eine der Fesntergröße entsprechende Grafik aus. Nun macht der Besucher die Seite auf Vollbild mit einer Auflösung von 2580 x 1640 Pixeln (o.ä.) . Was passiert mit der Grafik? Sie ist nicht für die Fenstergröße ausgelegt. Entweder wird sie hochskaliert = schlechte Qualität, oder sie bleibt so klein und "zerhaut" das Layout für die große Auflösung.
Das gleiche gilt wenn ein Besucher mit einem Tablet im Hochformat die Seite öffnet und dann auf Querformat dreht.
Da das Ändern der Fenstergröße clientseitig passiert und erst nach dem der Server die Seite und Dateien ausgeliefert hat, ist ein Nachladen der passenden Bilder nur mit großem Aufwand möglich (und unnötig).
 

MainAngler

Excel (SVERWEIS...)

Mein Vorschlag: Bilder in verschiedenen Größen auf den Webserver legen und per CSS an die Fensterbreite anpassen.
Das ist nicht gut!
Warum? Wird das Fenster des Browsers immer kleiner, dann "springt" das Bild irgendwann auf eine andere Größe (läd also das andere Bild für die passende Bildschirmgröße), aber der "Effekt" ist dann nicht schön, eben weil das Bild auf eine andere kleinere Größe "springt".
Das Layout müsste dann adaptiv sein, da die Bilder springen = schlechter als responsiv!
Beim Surfen passiert es mit nicht ganz so schnellen Leitungen, dass sich Bilder quasi abrollen, weil sie erst nach und nach angezeigt werden. Das scheint mir der Effekt von zu großen Bildern zu sein, die beim Einbinden skaliert werden.
...
Das was du meinst ist ganz einfach das Problem, dass die Bilder mit ihrer gesamten Größe (Bilder haben oft einige MB!) geladen werden, auch wenn das Bild verkleinert (width und height) dargestellt wird.

as ich nicht auf anhieb weiß, ob die aktuellen CMS (joomla und co.) mittlerweile die Grafiken serverseitig mittels Skript skalieren bzw. ob es dafür Module gibt und diese die Grafiken dann gleich in der nur notwendigen Größe senden.
Das Bild wird in der größten Auflösung, in der es Verwendung findet, eingebunden.
Nur bekommt es weder eine Breite noch eine Höhe zugeweisen!
Somit sakiliert es sich proportional egal welcher Viewport (mittels media querie) verwendet wird.
Das ist für responsive Seiten sinnvoll.

Je größer ein Bild ist, umso größer ist auch die Datei des Bildes. Damit überträgt der Web-Server auch mehr Datenvolumen zum Endgerät.
Stimmt zwar, aber man kann die KB-Größe des Bildes, bei gleichbleibender Größe, reduzieren, wenn das Bild für Web optimiert wird!

Um das einzudämmen nutzt Du idealer Weise immer das Minimum an Dateigröße. Im Umkehrschluss zu meiner Erklärung legst Du das Bild auch nur in der Größe auf dem Server ab, in der es später angezeigt wird.
Kommt darauf an, wie du das meinst!
Siehe meinen Hinweis dazu zum 1. Quote.

"Professionell" ist es zudem direkt ein adaptive, responsive oder fluid Design zu erstellen. Dabei passt sich der Inhalt (= Content) der Anzeigengröße des Endgerätes an.

In dem Fall stellst Du das Bild in der maximal notwenigen Größe bereit und am Endgerät wird es in die machbare Größe skaliert bzw. prozentual angepasst.
Wobei bei adaptive die Bilder "springen", während sie bei responsive sich jeweils "flüssig" skalieren ohne erkennbare Übergänge.

Warum nicht mehrere Größen, die je nach Fenstergröße ausgewählt werden?
Siehe mein 1. Quote!!!
 

afr0kalypse

Allwissendes Karmameerschweinchen!

Das ist nicht gut!
Warum? Wird das Fenster des Browsers immer kleiner, dann "springt" das Bild irgendwann auf eine andere Größe (läd also das andere Bild für die passende Bildschirmgröße), aber der "Effekt" ist dann nicht schön, eben weil das Bild auf eine andere kleinere Größe "springt".
Das Layout müsste dann adaptiv sein, da die Bilder springen = schlechter als responsiv!
Dem kann ich nicht zustimmen.
Der Grundgedanke von RWD bzw AWD ist, dass man für verschiedene Endgeräte eine passende Lösung hat. Diese beinhaltet natürlich eine minimale und eine maximale Größe.
Wenn man mobile first programmiert, nutzt man genau diese Technik, Bilder entsprechend der Bildschirmgröße / Endgerätegröße anzubieten. Das kann man sowohl im responsive als auch im adaptive Webdesign machen. Nur für Desktop Browser macht es wenig Sinn, die Bilder auszutauschen.

Bezüglich deiner Frage, ob es professioneller ist, width und height als HTML Argumente zu nutzen:
Laut W3C gibt es keine Hinweise darüber, dass die genutzt werden müssen.
Entweder du nutzt sie im HTML Tag oder in einer CSS. Ganz ohne wäre wohl keine gute Lösung :)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben