Bilder variabel im Text einbinden und sichern für Blog, P... t:Tt212 s:249 24.02.24 12:50

24.2.24 249_f558-t2

Tipps zum Fotografieren, Schreiben, etc. - Diverses

Bilder im Text

Bilder variabel im Text einbinden und sichern für Blog, P...
Seite 3 von 6
Finde Ausflugs-Ziele im Allgäu - gelistet nach Gehzeit in Stunden
Tour oberstdorf sonthofen hindelang allgäu primapage
Tour oberstdorf sonthofen hindelang allgäu primapage Tour Halbtag oberstdorf sonthofen hindelang allgäu primapage oberstdorf sonthofen hindelang allgäu primapageTour Tour oberstdorf sonthofen hindelang allgäu nagelfluh primapage
Wandern Touren Oberstdorf Sonthofen Hindelang Nagelfluh primapage bildband
Seite 3 von 6 Wähle weiteren Bericht 

Touren in Bayern, Tirol, Vorarlberg, Berner Oberland + Savoyen

Berwang roter stein ehrwald reutte zugspitze primapage tirol Schafreuther Karwendel bayern tirol primapage Achensee pertisau tirol primapage Bonderspitz Blick Öschinensee Adelboden Berner Oberland Mont Blanc Blick Aufstieg zum Mont Joly Savoyen

Bilder sichern und in variabler Größe in Texte einbinden

Die Möglichkeit "Wer mehr sehen will klickt auf die Bilder im Bericht" gibt es wegen des Einstellens der PICASA-Alben durch Google nicht mehr.

Neue Vorgehensweise einbinden Bilder aus Google-Alben

1. Schritt:
Pagewizz Artikel Textbaustein öffnen mit bearbeiten.

2. Schritt:
Bild aus Quelle kopieren,
meine Quelle: Google-Alben

Warum Alben: meine Wanderartikel bieten über den Verweis zum entsprechenden Album die Anzeige im Vollformat und Diaschau anstelle Pagewizz-Miniformat.

Im Album Bild klicken für Anzeige, dann Menü rechte Maustaste wählen kopieren.

3. Schritt:
im Pagewizz Artikel im Textbaustein
Taste strg mit V drücken (Einfügen)

4. Schritt:

  1. Bild mit Maus leicht schieben bis Eckpunkt links oder mehrere angezeigt werden.
  2. Bild an Eckpunkten zum Verkleinern bzw. Vergrößern auf gewünschtes Format wählen.
    Während des Schiebens wird die Bildgröße laufend angezeigt.
  3. Bei Bedarf: Für etwas größere Darstellung (schmälerer Zwischensteg) Bild klicken und Format Bild links bzw. rechts wählen.
  4. Für zwei Bilder nebeneinander Bildbreite je Bild bis 295 Pixel bei links rechts Ausrichtung (Gesamtbreite maximal 630 Pixel).

Hinweis:
Einfacher geht es über Quelltext "<>" im Menü bei Bilder aus Google-Alben:

Die original Bildbreite und Höhe ist im Quelltext wie folgt dargestellt:
=w1374-h915-no. w steht für Weite (Breite) h für Höhe.

Mit f3 -no suchen und breite (w) beispielsweise auf 295 verkleinern:
=w1374-h915-no wird =w295-no.
Bei ungleichen Höhen der Bilder auf Höhe ausrichten:
=w1374-h915-no wird =h198-no.

Höhe oder Breite allein reicht für die Bildgröße.

Beste Bildqualität bei allen Bildgrößen ergeben unveränderte Werte =w und =h! 

Anstelle des Werteänderns werden die Instruktionen width="nnn" oder height="nnn" in beliebiger Größe in die IMG-Instruktion verwendet. 

Beispielsweise vor dem Abschluss />.

Wenn die Bilder ungleiche Seitenbreiten haben oder Hoch- und Querformat nebeneinander stehen sollen, dann die Bilder nach Bildhöhe ausrichten.

5. Schritt:
nächstes Bild aus Quelle wie 2. bis 4. Schritt.

6. Schritt:
bei drei (190 pixel) oder mehr Bilder neben einander zum 2. Schritt.

Hinweis:
1
Über den Quelltext kann neben dem Bild oder den Bildern Text angezeigt werden.
Im Menü Quelltext "<>" wählen und nach dem letzten "</p>" den Text einfügen.
2
Wer das Bild mit am oberen Rand mit dem Text anzeigen will, ändert das erste
"<p>" auf "<div>" und das letzte "</p>" auf "</div>".

Sichern in photos.google.com/albums 

Wer Google Foto aufruft, erhält gut beschrieben die erforderlichen Möglichkeiten seine Alben zu erstellen. Es hat sich bewährt, die Bilder vorher auf eine maximale Größe von 2.048 Pixeln Seitenbreite zu bringen. Denn bis zu dieser Größe ist das Speichern der Bilder kostenfrei.

Darüber hinaus wird, abhängig von weiteren benutzten Google-Diensten, kostenfreier Speicherplatz zur Verfügung gestellt. Wer beispielsweise auch bei Google+ registriert ist, hat 15 Gigabytes Speicher frei. So verwende ich bei detailreichen Bildern (Landkarten) auch schon mal 4.000 Pixel Seitenlänge.

Bildqualität verbessern und einbinden in Artikeln und Webseiten primapage

Google bietet beim Hochladen die Möglichkeit die Bildgröße auf maximal 2048 Pixel zu reduzieren. Ich verwende zum Ändern der Größe auf 2048 Pixel das freie Programm Irfan.

Zur Sicherheit sollten die verkleinerten Bilder in einen neuen Ordner ausgegeben werden.

Dann wird photos.google.com/albums im Internet aufgerufen und "hochladen" gewählt. Werden die Fenster des Ordners mit den Bildern und photos.google.com/albums halbiert (siehe Bild ), können die Bilder direkt auf das Verzeichnis photos.google.com/albums gezogen werden. Das Hochladen erlaubt bei langsamen Internet eine Kaffeepause. Das zweite Bild wurde mit 400 pixel eingebunden. Im Editor kann das Bild angeklickt und in der Leiste rechtsbündig verschoben werden. in Die Erklärung folgt im nächsten Kapitel.

Variables Textgestalten zweier Bilder gleicher Größe, Beispiel Pagewizz

Bildqualität verbessern und einbinden in Artikeln und Webseiten primapageBildqualität verbessern und einbinden in Artikeln und Webseiten primapage

Hier werden zwei Bilder nebeneinander im Textbaustein eingebunden. Der Vorteil: Jedes Bild kann geklickt bis zur voller Bildschirmgröße betrachtet werden. Zusätzlich kann der Betrachter Bildausschnitte für Detailansichten wählen. Als Bildgröße wurde für das Einbinden - aus der Auswahl 144, 288, 400, 640, und 800 Pixel - 288 Pixel für die Textgröße (für größte Seite) gewählt.

Klicke die linke Abbildung zur besseren Anzeige. Die wichtigen Einträge habe ich rot hinterlegt:

  • Bildgröße zwischen 144 und 800 pixel wählen (meist 288)
  • Häkchen in Albumlink ausblenden
  • Kode unter Bild einbinden und kopieren (klick und strg c).
  • Textbaustein wählen und klicken im pagewizz Editor oben links HTML
  • Kode mit strg v übertragen.

Der Kode zum Einbinden in HTML für das erste Bild so aus:

<a href="https://picasaweb.google.com/lh/photo/xIzOC1P9nyI1W_ Vm-umbaNMTjNZETYmyPJy0liipFm0?feat=embedwebsite" target="_blank"> <img alt="Bildqualität verbessern und einbinden in Artikeln und Webseiten primapage" height="180" src="https://lh4.googleusercontent.com/-gManiEFNIdo/Uh82v_ VRzQI/AAAAAAAAUU4/aOjGb3OZ1UM/s288/P119-schrecksee-130823_172B.JPG" width="288" />

Keine Bange! Soll die Größe des Bildes dem Text angepasst werden oder die Anzeigequalität geändert werden, sind nur die hier fettgedruckten Zahlen zu ändern. Im Beispiel dieses Kapitels braucht es keine Änderung: Zwei Bilder haben mit 288 Pixel nebeneinander Platz. Die bessere Anzeigequalität des Bildes (höhere Auflösung) wird durch das Ändern der picasa-Bildart - beispielsweise von s288 (klein) auf s640 erhöht, falls nicht schon bei der picasa-Bildauswahl das höher auflösende Bild (mittel) gewählt wurde.

Hilfreicher Hinweis

Wenn zwei oder mehrer Bilder nebeneinander stehen sollen, beachte jeden Code für jedes weitere Bild vor dem Abschnittsende </p> zu setzen. Der Editor liebt es, für jedes neue eingefügte Bild <p> und </p> zu generieren. Das bringt unschöne Leerzeilen, die stören können.

Schema: (wahlweise Text) <p><a>_bild 1_</a> <a>_bild 2_</a>text </p> (text = wahlweiseText )

1_ Ausrichten Bild links oder rechts

  • Im Pagewizz-Editor auf "bearbeiten" und auf das eingebundenes Bild klicken.
  • Im Menü "Formate" wählen und dann "Bild links" oder "Bild rechts" klicken.

Das schiebt das Bild enger an den entsprechenden Rand und bringt so mehr Platz für den Text oder das Bild. Dies empfiehlt sich auch für das Ausrichten großer Bilder (s640 = Bildgröße 600-622).

Klick auf "Bild links" fügt die Instruktion style="float: left; margin: 5px 15px 5px 0px;" nach "img" ein. Bei "Bild rechts" wird entsprechend "...float: right..." generiert. Außerdem werden mit dem Ausrichten die fehlenden Größenangaben "height" und "width" wieder hergestellt.

Tipp: Der Abstand (Rand) des Bildes in margin 5px 15px 5px 0px kann beliebig geändert werden. Der erste Wert beginnt mit Abstand oben (5px) und geht im Uhrzeigersinn weiter. So mindert beispielsweise der zweite Wert 10px anstelle 15px den Abstand im Bild oben zum rechten Text.

Beispiel: Gleiches Bild oben ohne Ausrichtung, unten mit Ausrichtung.

Bildqualität verbessern und einbinden in Artikeln und Webseiten primapage

2_ Einfaches Anpassen der Bildgröße ohne HTML-Code

Beim Klicken im Editor auf das eingebundene Bild wird ein Rahmen mit acht Punkten angezeigt. Die Punkte (beispielsweise Eckpunkt) können mit der Maus verschoben werden: Nach innen schieben verkleinert, nach außen vergrößert das Bild.

Bildqualität verbessern und einbinden in Artikeln und Webseiten primapage

Beim Verschieben eines Punktes wird die jeweilige Bildlänge (width) und Höhe (height) Beispiel Bild rechts "292 x 195" Bild oben "200 x 125" angezeigt.

So wird sehr bequem das Bild der Textlänge angepasst.

3_ Einfacher mehrere Bilder nebeneinander angleichen

In oben beschriebener Weise können auch Bilder jeder Größe nebeneinander angepasst werden. Damit entfällt das Berechnen der Durchschnittshöhe!

Hier nach dem groben Anpassen der Bildgröße ist die Feineinstellung im HTML-Code unter "height" oder "width" hilfreich. Dabei sollte aber nicht vergessen werden, die nicht veränderte Größenangabe zu löschen. Damit bleibt die ursprüngliche Proportion des Bildes erhalten.

Zwei Bilder ungleicher Größe nebeneinander

Typisches Beispiel ist das Setzen eines Bildes in Hoch- und eines in Querformat. Es sieht besser aus, wenn dabei keine leere Fläche beim quer formatigen Bild entsteht. Die Beispielbilder wurden mit Größe 400 Pixel ausgewählt: Je höher die Pixelzahl, desto schärfer ist die Abbildung des Bildes im Artikel. Die Breite oder Höhe ist unabhängig der Bildqualität (zwischen s144 bis s800) änderbar.

Jetzt wird, um die Bildformate anzugleichen, für jedes Bild die gleiche Höhe verwendet. Deshalb wird die Breite width="300" und width="400" der Bilder aus dem Kode entfernt. Damit errechnet sich die Bildbreite - da nicht mehr vorhanden - von selbst über die Pixelgröße s400. Werden die Breiten nicht gelöscht, würde das Bild nicht mehr proportional angezeigt, es wäre verzerrt.

1. Schritt berechnen der Durchschnittshöhe der Bilder (Beispiel)

  • Ein Bild hat die Höhe 400, das andere die Höhe 250. Ergibt zusammen 650.
  • Also ist die mittlere Bildhöhe 325 (650 / 2).

2. Schritt berechnen Größe je Bild für die vorhandene Breite Textbaustein oder Webseite.

Hinweis: Dieser Schritt ist nur erforderlich, wenn
die Seitenbreite nicht gleich der Bildbreite ist.

Zwei Bilder erfordern bei der Bildgröße s400 (400 Pixel) 800 Pixel Breite. Bei Pagewizz stehen etwa 600 Pixel Breite zur Verfügung. Da die Bilder nebeneinander gleich hoch sein sollen (schaut besser aus), wird die mittlere Bildhöhe berechnet: Dividiert durch die Gesamtbildbreite (hier 800 Pixel) und multipliziert mit der Seitenbreite (hier 600 Pixel). Das ergibt die an die Seite angepasste Bildgröße in diesem Beispiel von 244 gerundet.

Die Bausteinbreite beim Pagewizz Textbaustein ist etwa 620 Pixel. Bei zwei Bildern sind es etwa 580 Pixel (da Bild-Zwischenräume generiert werden). Somit werden die Bilder der gewählten Größe S288 auf 576 Pixel im ersten Beispiel gut nebeneinander untergebracht.

<a href=...<img ... height="400" src="https://lh4.googleusercontent.com/...167B.JPG" width="300" /></a>

<a href=...<img ... height="250" src="https://lh3.googleusercontent.com/...175B.JPG" width="400" /></a>

Einfaches Finden der Länge, Breite und Bildgröße

Wer mit HTML nicht vertraut ist, der tippt nach Aufruf des HTML via F3 (Funktionstaste suchen) den zu ändernden Begriff height, width, s144, s288, s400, s640 ein. So steht der Cursor zum Ändern der Werte an der richtigen Stelle. Anschließend mit aktualisieren HTML abschließen.

Bildqualität 640 Pixel (s640) mit Berechnung

Bildqualität verbessern in Artikeln und Webseiten primapage Bildqualität verbessern in Artikel und Webseiten primapage

Qualität Bildgröße 288 Pixel (s288) ohne Berechnung

Bildqualität verbessern in Artikeln und Webseiten primapage Bildqualität verbessern und einbinden in Artikeln und Webseiten primapage

Hier wurde die Durchschnittshöhe von 234 geändert auf die 256 Pixel der s400 Bilder: Gleiche Größe für den Qualitätsvergleich.

Sobald der Betrachter auf das Bild klickt, gibt es naturgemäß keinen Unterschied der Qualität. Wer weiß, dass viele nicht den Komfort der Vollbildansicht aufrufen, erhält mit s400 bis s640 Auswahl der Albenbilder eine gute Bildqualität im Artikel.

Wird ein Bild über die ganze Breite des Textbausteines eingebunden, dann sollte die Pixelgröße der Breite von 640 auf 600 bis 615 reduziert werden, um ein Abschneiden des Bildes zu verhindern. Auch bei Breiten über 400 Pixel lohnt der Qualität wegen s640 auszuwählen und die Breite entsprechend zu verringern.

Das Entfernen der nicht veränderten Größenangabe "height" oder "width" nicht vergessen. Dann bleibt das ursprüngliche Proportion erhalten!

Hinweis: Ändern der Bildgröße im Text

Jederzeit kann die vorgewählte Bildgröße bei Picasa, Pagewizz und anderen Bildquellen von s144, s288, s400, s640 und s800 auf eine der hier aufgeführten Bezeichner nachträglich im Textbaustein via HTML geändert werden. Das erspart das neuerliche Einbinden. Die Praxis zeigt, dass die vorgewählte Größe s400 (mittel) für beinahe alle Bilder bis zu einer Breite von 300 Pixel vorteilhaft ist. Die beste Qualität für alle Größen bringt jedoch s640!

 

primapage, am 29.08.2013
8 Kommentare Melde Dich an, um einen Kommentar zu schreiben.


Laden ...
Fehler!