HTML/CSS Maximale Bildgröße

[Chris2130]

Hallo,
gibt es einen HTML/Javascript befehl, mit dem man Bilder verkleinern lassen kann, wenn die höhe z.b. über 100px ist?

 

[theHacker]

Du kannst ein Bild gar nicht verkleinern, sondern nur verkleinert darstellen, was aber nicht zu empfehlen is, da der Besucher ja trotzdem das Riesenbild laden muss.

Wenn du kleinere Bilder brauchst, erzeuge Thumbnails (Da gibts auch Tools, die das automatisch machen, wenn du zu viele Bilder hast.)

 

[Chris2130]

Ja ich meinte natürlich verkleinert darstellen^^

wie kann ich denn per php dann thumbnails erstellen?

 

[theHacker]

Ja ich meinte natürlich verkleinert darstellen^^

Das machst du, indem du einfach die width- und height-Styles manipulierst. Beachte, dass du natürlich im richtigen Verhältnis änderst, sonst verformst du das Bild. Übertreibst du es und lädst riesige Bilder und lässt sie nur sehr klein anzeigen, werden sich die Besucher bedanken, weil sie unnötige Ladezeiten im Sekundenbereich haben und dir geht die Traffic-Rechnung rauf.

Besser:

wie kann ich denn per php dann thumbnails erstellen?

Entweder mit der GDLib oder ImageMagick. Ersteres is wahrscheinlicher, dass sie zur Verfügung steht, Letzteres is wesentlich mächtiger. Kommt also drauf an, was auf deinem Server zur Verfügung steht.

 

[tobomator]

... werden sich die Besucher bedanken, weil sie unnötige Ladezeiten im Sekundenbereich haben und dir geht die Traffic-Rechnung rauf ...

Heutzutage gibts doch Flatrates. Auch Webhoster mit Flatrates die PHP und MySQL anbieten

 

[paddya]

Heutzutage gibts doch Flatrates. Auch Webhoster mit Flatrates die PHP und MySQL anbieten

Super Argument

Es geht nicht um den Traffic, sondern um die Ladezeit. Je kürzer die Ladezeit, desto zufriedener der User, desto geringer die Wahrscheinlichkeit, dass er abspringt.

 

[Fishy]

Verkleinert darstellen macht schon sinn z.B, in Foren/Blocks, wo zu große Bilder den Rahmen sprengen würden. Die beste Möglichkeit wäre immer mir Thumbnails, ist aber etwas komplizierter für neulinge.

Hier mal ein resize Image JS

Header:

<script type="text/javascript" src="js/images.js"></script>
<script type="text/javascript">
<!--
var imageMaxWidth = 500;
var imageMaxHeight = 600;
//-->
</script>

Die Werte können angepasst werden


Hier das Script in einenOrdner js auf den Server mit namen images.js:

function resizeImages() {
	for (var i = 0; i < document.images.length ;i++){
		if (document.images[i].className == 'resizeImage') {
			var imageWidth = document.images[i].width;
			var imageHeight = document.images[i].height;
			
			if ((imageMaxWidth != 0 && imageWidth > imageMaxWidth) || (imageMaxHeight != 0 && imageHeight > imageMaxHeight)) {
				if (imageMaxWidth != 0) var div1 = imageMaxWidth / imageWidth;
				else var div1 = 1;
				if (imageMaxHeight != 0) var div2 = imageMaxHeight / imageHeight;
				else var div2 = 1;
							
				if (div1 < div2) {
					document.images[i].width = imageMaxWidth;
					document.images[i].height = Math.round(imageHeight * div1);
				}
				else {
					document.images[i].height = imageMaxHeight;
					document.images[i].width = Math.round(imageWidth * div2);
				}
				
				if (!isLinked(document.images[i])) {
					var popupLink = document.createElement("a");
					popupLink.setAttribute('href', document.images[i].src);
					popupLink.setAttribute('target', '_blank');
					popupLink.setAttribute('title', 'Vollbildansicht');
					popupLink.appendChild(document.images[i].cloneNode(true));
					
					document.images[i].parentNode.replaceChild(popupLink, document.images[i]);
				}
			}
		}
	}
}

function isLinked(node) {
	do {
		node = node.parentNode;
		if (node.nodeName == 'A') return true;
	}
	while (node.nodeName != 'TD' && node.nodeName != 'BODY');
		
	return false;
}

im img tag deines parsers dann: class="resizeImage"

 

[paddya]

Hier mal ein resize Image JS

Das ist wohl ein Witz, oder?

Die CSS-Eigenschaften max-width und max-height können dazu doch problemlos verwendet werden. Da braucht man kein JavaScript.

Wer will, kann natürlich via JavaScript manuell über Canvas das Bild resizen. Aber wer will das schon?

 

[theHacker]

Das ist wohl ein Witz, oder?

Is doch cool. Erst sprengt es das Layout und dann von Geisterhand fixt sich die Seite von selber, wenn das JS die Bilder alle verkleinert

@tobomator:
Klar, gibt es Trafficflatrates, die es eigentlich nicht gibt. Traffic wird wohl erst bei mehr Besuchern interessant. Wo es aber um jeden Besucher geht, is die Ladezeit. Wieso setzt man sonst immer mehr CSS-Sprites ein?

 

[Fishy]

Nun meine beiden Vorposter ,
klar ist das nicht die eleganteste Lösung. die Eigenschaft max-width: verstehen einige Browser immer noch nicht. Das ist ja auch wie ich schrieb eine Art Notlösung für Foren oder Blogs, man geht ja auch davon aus das es da nicht gerade in den Threads mit Bildern in Übergröße zugeflastert wird.

 

[Ronja]

Eine meiner Lieblingsseiten
https://www.april-design.de/css/expressions/

Das dürfte das Problem dann beseitigen!

Gruß Ronja

 

[paddya]

Nun meine beiden Vorposter ,
klar ist das nicht die eleganteste Lösung. die Eigenschaft max-width: verstehen einige Browser immer noch nicht.

Der IE ist kein Browser, sondern ein Programm um einen anderen Browser herunterzuladen

 

[theHacker]

Der IE ist kein Browser, sondern ein Programm um einen anderen Browser herunterzuladen

Seitdem se M dazu verdonnert haben, dass bei Erstinstallation von Windows ein Dialog zur Wahl eines Browsers angezeigt werden muss

 

[flaschenkind]

Seitdem se M dazu verdonnert haben, dass bei Erstinstallation von Windows ein Dialog zur Wahl eines Browsers angezeigt werden muss

Witzig daran ist, dass selbst wenn man den IE auswählt, man unter bestimmten Umständen später noch öfters aufgefordert wird den Browser zu wählen
Ist mir in ner Windows 7 Home Premium Version aufgefallen. Hab den IE ausgewählt (für Browsertests, keine Angst!) und paar Tage später kam der Dialog erneut