Antworten auf deine Fragen:
Neues Thema erstellen

Komprimierung für Internet

E

elliz

Noch nicht viel geschrieben

Früher konnte man ein und daselbe Bild fürs Internet mit unterschiedlichen Qualitätsstufen komprimieren. Das eigentliche Bild wurde z.B. stärker als darin enthaltene Schrift komprimiert. Das war zwar nicht ganz so effektiv - hatte aber den Vorteil, das Schriften besser lesbar blieben.

Hm, diese Funktion finde ich nicht mehr. Gibt es sie überhaupt noch? Wer kann helfen?
 

Photoshop

D

digidoc

RAW-ling

AW: Komprimierung für Internet

Falls du in Photoshop arbeitest: Datei - Für Web speichern...
Da tut sich ein großes Dialog-Fenster auf, in denen du alle erdenklichen Qualitätseinstellungen vornehmen kannst.
 
E

elliz

Noch nicht viel geschrieben

AW: Komprimierung für Internet

Danke. Ja genau, um PS und die Funktion "für Web speichern" geht es.
Dort hat sich etwas getan. Früher konnte man über diesen Weg z.B. keine Metadaten einbinden - heute geht das nach drei verschiedenen Optionen. Meine Frage ist, wie ich den alten Standard mit den verschiedenen Komprimierungsstufen wieder herstellen kann. Möglicherweise wurde er (wie so einige andere Funktionen) deaktiviert und muss nur wieder hergestellt werden.
Dummerweise habe ich meine alte Literatur zum Thema "Webdesign mit PS" schon entsorgt, so dass ich nicht mehr nachschauen kann
 
10dency

10dency

Olaf Giermann

Kreativ-Flatrate-User
elliz schrieb:
Früher konnte man ein und daselbe Bild fürs Internet mit unterschiedlichen Qualitätsstufen komprimieren. Das eigentliche Bild wurde z.B. stärker als darin enthaltene Schrift komprimiert. Das war zwar nicht ganz so effektiv - hatte aber den Vorteil, das Schriften besser lesbar blieben.

Hm, diese Funktion finde ich nicht mehr. Gibt es sie überhaupt noch? Wer kann helfen?
Zum Vergrößern anklicken....

Gibt es meines Wissens nicht mehr. Kann mich nur noch dunkel an die ImageReady-Zeit und kurz danach erinnern. Doc wird dir noch auf deine Mail Antworten, denke ich. Der kannte das alles noch.

Wirklich sinnvoll finde ich persönlich die 0,5 KB-Optimierungen heutzutage selbst für Mobilanwendungen aber nicht mehr.


- gesendet von unterwegs mit Tapatalk -
 
E

elliz

Noch nicht viel geschrieben

AW: Komprimierung für Internet

Andre_S schrieb:
Schätze mal du redest von Slizen. Das Werkzeug befindet sich unter der Hand.
Zum Vergrößern anklicken....
Nö, das meine ich nicht. Das von Olaf erwähnte ImmageReady ist der (mögliche) Lösungsansatz.

10dency schrieb:
Doc wird dir noch auf deine Mail Antworten, denke ich. Der kannte das alles noch.
Zum Vergrößern anklicken....
Jetzt musste ich drei mal lesen, bevor ich begriffen habe, welcher Olaf mit welcher Info mir hier antwortet. :D

10dency schrieb:
Wirklich sinnvoll finde ich persönlich die 0,5 KB-Optimierungen heutzutage selbst für Mobilanwendungen aber nicht mehr.
Zum Vergrößern anklicken....
Es geht gar nicht mal um die Dateigröße, sondern darum, das die Schrift im Bild besser lesbar ist. Hier mal ein Beispiel:
a>


Auf einer Web-Site soll links ein Beispielbild sein, rechts soll erläutert werden, was gemacht wurde oder werden soll. Da das ganze in einem für die gesamte Web-Site der Größe nach definiertem div (800 x 271 px) stattfindet, das eigentliche Bild aber nur 400 x 271 px groß ist, wollte ich das Problem mit einem png-Bild (links mit eigentlichem Bild und rechts Schrift mit Tranparenz) lösen. Hm, das Bild kommt ausreichend gut, die Schrift nicht.

Möglicherweise habe ich mich verrannt. Welche andere Lösung gebe es?
Danke. :)

a>
 
Zuletzt bearbeitet:
Andre_S

Andre_S

unverblümt

AW: Komprimierung für Internet

Sowas löst man auch nicht im Bild sondern im Web-Editor mit normalem Text.
Ansonsten wie schon gesagt Bild slicen (in "für Web speichern"), das geht nach wie vor. Hier könntest du am besten die linke Hälfte als Jpeg und die Rechte als Gif abspeichern was die Textqualität erhöhen und zugleich die Datenmenge verkleinern würde.
 
E

elliz

Noch nicht viel geschrieben

AW: Komprimierung für Internet

Danke Andre.
Web-Editor wäre das normalste der Welt und würde ich gerne verwenden. Nur... Im Web-Projekt läuft auf mehreren Seiten in dem erwähnten div ein Bilderwechsel. Alle Bilder haben die Größe von 800 x 271 px. Auf einer einzigen Seite sind die Bilder nur 400 px breitund daneben soll die Erläuterung kommen.
Mein erster Ansatz war, einen neuen div zu definieren und über float die Erläuterung rechts daneben zu setzen. Der Bilderwechsel erfordert aber einen code über 161 Zeilen mit nur 10380 Zeichen! (-webkit-animation... -moz-animation... -ms-animation... -o-animation... animation...) Das wollte ich abkürzen und dafür ein Bild einsetzen.
Keine gute Idee?!?
 
E

elliz

Noch nicht viel geschrieben

AW: Komprimierung für Internet

Slider? Was ist das? Beschreiben kann ich es nicht. Wenn Du Dir aber den code antun möchtest...
Code: 
#bilder img {
   position:absolute;
   z-index: 1;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration:30s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration:30s;
    -ms-animation-timing-function: ease-in-out;
    -ms-animation-iteration-count: infinite;
    -ms-animation-duration:30s;
    -o-animation-timing-function: ease-in-out;
    -o-animation-iteration-count: infinite;
    -o-animation-duration:30s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration:30s;
}
#bilder img:nth-of-type(1) {
    -webkit-animation-name: fadingAnimation01;
    -moz-animation-name: fadingAnimation01;
    -ms-animation-name: fadingAnimation01;
    -o-animation-name: fadingAnimation01;
    animation-name: fadingAnimation01;
}
#bilder img:nth-of-type(2) {
    -webkit-animation-name: fadingAnimation02;
    -moz-animation-name: fadingAnimation02;
    -ms-animation-name: fadingAnimation02;
    -o-animation-name: fadingAnimation02;
    animation-name: fadingAnimation02;
}
#bilder img:nth-of-type(3) {
    -webkit-animation-name: fadingAnimation03;
    -moz-animation-name: fadingAnimation03;
    -ms-animation-name: fadingAnimation03;
    -o-animation-name: fadingAnimation03;
    animation-name: fadingAnimation03;
}
#bilder img:nth-of-type(4) {
    -webkit-animation-name: fadingAnimation04;
    -moz-animation-name: fadingAnimation04;
    -ms-animation-name: fadingAnimation04;
    -o-animation-name: fadingAnimation04;
    animation-name: fadingAnimation04;
}
#bilder img:nth-of-type(5) {
    -webkit-animation-name: fadingAnimation05;
    -moz-animation-name: fadingAnimation05;
    -ms-animation-name: fadingAnimation05;
    -o-animation-name: fadingAnimation05;
    animation-name: fadingAnimation05;
}
#bilder img:nth-of-type(6) {
    -webkit-animation-name: fadingAnimation06;
    -moz-animation-name: fadingAnimation06;
    -ms-animation-name: fadingAnimation06;
    -o-animation-name: fadingAnimation06;
    animation-name: fadingAnimation06;
}

@-webkit-keyframes fadingAnimation01 {
    0% { opacity:1;} 8% { opacity:1; } 16% { opacity:0; } 24% { opacity:0; } 33% { opacity:0; } 42% { opacity:0; } 50% { opacity:0;} 59% { opacity:0; } 67% { opacity:0;} 76% { opacity:0; } 84% { opacity:0;} 92% { opacity:0; } 100% { opacity:1;}
}
@-webkit-keyframes fadingAnimation02 {
    0% { opacity:0;} 8% { opacity:0; } 16% { opacity:1; } 24% { opacity:1; } 33% { opacity:0; } 42% { opacity:0; } 50% { opacity:0;} 59% { opacity:0; } 67% { opacity:0;} 76% { opacity:0; } 84% { opacity:0;} 92% { opacity:0; } 100% { opacity:0;}
}
@-webkit-keyframes fadingAnimation03 {
    0% { opacity:0;} 8% { opacity:0; } 16% { opacity:0; } 24% { opacity:0; } 33% { opacity:1; } 42% { opacity:1; } 50% { opacity:0;} 59% { opacity:0; } 67% { opacity:0;} 76% { opacity:0; } 84% { opacity:0;} 92% { opacity:0; } 100% { opacity:0;}
}
@-webkit-keyframes fadingAnimation04 {
    0% { opacity:0;} 8% { opacity:0; } 16% { opacity:0; } 24% { opacity:0; } 33% { opacity:0; } 42% { opacity:0; } 50% { opacity:1;} 59% { opacity:1; } 67% { opacity:0;} 76% { opacity:0; } 84% { opacity:0;} 92% { opacity:0; } 100% { opacity:0;}
}
@-webkit-keyframes fadingAnimation05 {
    0% { opacity:0;} 8% { opacity:0; } 16% { opacity:0; } 24% { opacity:0; } 33% { opacity:0; } 42% { opacity:0; } 50% { opacity:0;} 59% { opacity:0; } 67% { opacity:1;} 76% { opacity:1; } 84% { opacity:0;} 92% { opacity:0; } 100% { opacity:0;}
}
@-webkit-keyframes fadingAnimation06 {
    0% { opacity:0;} 8% { opacity:0; } 16% { opacity:0; } 24% { opacity:0; } 33% { opacity:0; } 42% { opacity:0; } 50% { opacity:0;} 59% { opacity:0; } 67% { opacity:0;} 76% { opacity:0; } 84% { opacity:1;} 92% { opacity:1; } 100% { opacity:0;}
}

@-moz-keyframes fadingAnimation01 {
    0% { opacity:1;} 8% { opacity:1; } 16% { opacity:0; } 24% { opacity:0; } 33% { opacity:0; } 42% { opacity:0; } 50% { opacity:0;} 59% { opacity:0; } 67% { opacity:0;} 76% { opacity:0; } 84% { opacity:0;} 92% { opacity:0; } 100% { opacity:1;}
}
@-moz-keyframes fadingAnimation02 {
    0% { opacity:0;} 8% { opacity:0; } 16% { opacity:1; } 24% { opacity:1; } 33% { opacity:0; } 42% { opacity:0; } 50% { opacity:0;} 59% { opacity:0; } 67% { opacity:0;} 76% { opacity:0; } 84% { opacity:0;} 92% { opacity:0; } 100% { opacity:0;}
}
@-moz-keyframes fadingAnimation03 {
    0% { opacity:0;} 8% { opacity:0; } 16% { opacity:0; } 24% { opacity:0; } 33% { opacity:1; } 42% { opacity:1; } 50% { opacity:0;} 59% { opacity:0; } 67% { opacity:0;} 76% { opacity:0; } 84% { opacity:0;} 92% { opacity:0; } 100% { opacity:0;}
}
@-moz-keyframes fadingAnimation04 {
    0% { opacity:0;} 8% { opacity:0; } 16% { opacity:0; } 24% { opacity:0; } 33% { opacity:0; } 42% { opacity:0; } 50% { opacity:1;} 59% { opacity:1; } 67% { opacity:0;} 76% { opacity:0; } 84% { opacity:0;} 92% { opacity:0; } 100% { opacity:0;}
}
@-moz-keyframes fadingAnimation05 {
    0% { opacity:0;} 8% { opacity:0; } 16% { opacity:0; } 24% { opacity:0; } 33% { opacity:0; } 42% { opacity:0; } 50% { opacity:0;} 59% { opacity:0; } 67% { opacity:1;} 76% { opacity:1; } 84% { opacity:0;} 92% { opacity:0; } 100% { opacity:0;}
}
@-moz-keyframes fadingAnimation06 {
    0% { opacity:0;} 8% { opacity:0; } 16% { opacity:0; } 24% { opacity:0; } 33% { opacity:0; } 42% { opacity:0; } 50% { opacity:0;} 59% { opacity:0; } 67% { opacity:0;} 76% { opacity:0; } 84% { opacity:1;} 92% { opacity:1; } 100% { opacity:0;}
}

@-ms-keyframes fadingAnimation01 {
    0% { opacity:1;} 8% { opacity:1; } 16% { opacity:0; } 24% { opacity:0; } 33% { opacity:0; } 42% { opacity:0; } 50% { opacity:0;} 59% { opacity:0; } 67% { opacity:0;} 76% { opacity:0; } 84% { opacity:0;} 92% { opacity:0; } 100% { opacity:1;}
}
@-ms-keyframes fadingAnimation02 {
    0% { opacity:0;} 8% { opacity:0; } 16% { opacity:1; } 24% { opacity:1; } 33% { opacity:0; } 42% { opacity:0; } 50% { opacity:0;} 59% { opacity:0; } 67% { opacity:0;} 76% { opacity:0; } 84% { opacity:0;} 92% { opacity:0; } 100% { opacity:0;}
}
@-ms-keyframes fadingAnimation03 {
    0% { opacity:0;} 8% { opacity:0; } 16% { opacity:0; } 24% { opacity:0; } 33% { opacity:1; } 42% { opacity:1; } 50% { opacity:0;} 59% { opacity:0; } 67% { opacity:0;} 76% { opacity:0; } 84% { opacity:0;} 92% { opacity:0; } 100% { opacity:0;}
}
@-ms-keyframes fadingAnimation04 {
    0% { opacity:0;} 8% { opacity:0; } 16% { opacity:0; } 24% { opacity:0; } 33% { opacity:0; } 42% { opacity:0; } 50% { opacity:1;} 59% { opacity:1; } 67% { opacity:0;} 76% { opacity:0; } 84% { opacity:0;} 92% { opacity:0; } 100% { opacity:0;}
}
@-ms-keyframes fadingAnimation05 {
    0% { opacity:0;} 8% { opacity:0; } 16% { opacity:0; } 24% { opacity:0; } 33% { opacity:0; } 42% { opacity:0; } 50% { opacity:0;} 59% { opacity:0; } 67% { opacity:1;} 76% { opacity:1; } 84% { opacity:0;} 92% { opacity:0; } 100% { opacity:0;}
}
@-ms-keyframes fadingAnimation06 {
    0% { opacity:0;} 8% { opacity:0; } 16% { opacity:0; } 24% { opacity:0; } 33% { opacity:0; } 42% { opacity:0; } 50% { opacity:0;} 59% { opacity:0; } 67% { opacity:0;} 76% { opacity:0; } 84% { opacity:1;} 92% { opacity:1; } 100% { opacity:0;}
}

@-o-keyframes fadingAnimation01 {
    0% { opacity:1;} 8% { opacity:1; } 16% { opacity:0; } 24% { opacity:0; } 33% { opacity:0; } 42% { opacity:0; } 50% { opacity:0;} 59% { opacity:0; } 67% { opacity:0;} 76% { opacity:0; } 84% { opacity:0;} 92% { opacity:0; } 100% { opacity:1;}
}
@-o-keyframes fadingAnimation02 {
    0% { opacity:0;} 8% { opacity:0; } 16% { opacity:1; } 24% { opacity:1; } 33% { opacity:0; } 42% { opacity:0; } 50% { opacity:0;} 59% { opacity:0; } 67% { opacity:0;} 76% { opacity:0; } 84% { opacity:0;} 92% { opacity:0; } 100% { opacity:0;}
}
@-o-keyframes fadingAnimation03 {
    0% { opacity:0;} 8% { opacity:0; } 16% { opacity:0; } 24% { opacity:0; } 33% { opacity:1; } 42% { opacity:1; } 50% { opacity:0;} 59% { opacity:0; } 67% { opacity:0;} 76% { opacity:0; } 84% { opacity:0;} 92% { opacity:0; } 100% { opacity:0;}
}
@-o-keyframes fadingAnimation04 {
    0% { opacity:0;} 8% { opacity:0; } 16% { opacity:0; } 24% { opacity:0; } 33% { opacity:0; } 42% { opacity:0; } 50% { opacity:1;} 59% { opacity:1; } 67% { opacity:0;} 76% { opacity:0; } 84% { opacity:0;} 92% { opacity:0; } 100% { opacity:0;}
}
@-o-keyframes fadingAnimation05 {
    0% { opacity:0;} 8% { opacity:0; } 16% { opacity:0; } 24% { opacity:0; } 33% { opacity:0; } 42% { opacity:0; } 50% { opacity:0;} 59% { opacity:0; } 67% { opacity:1;} 76% { opacity:1; } 84% { opacity:0;} 92% { opacity:0; } 100% { opacity:0;}
}
@-o-keyframes fadingAnimation06 {
    0% { opacity:0;} 8% { opacity:0; } 16% { opacity:0; } 24% { opacity:0; } 33% { opacity:0; } 42% { opacity:0; } 50% { opacity:0;} 59% { opacity:0; } 67% { opacity:0;} 76% { opacity:0; } 84% { opacity:1;} 92% { opacity:1; } 100% { opacity:0;}
}

@keyframes fadingAnimation01 {
    0% { opacity:1;} 8% { opacity:1; } 16% { opacity:0; } 24% { opacity:0; } 33% { opacity:0; } 42% { opacity:0; } 50% { opacity:0;} 59% { opacity:0; } 67% { opacity:0;} 76% { opacity:0; } 84% { opacity:0;} 92% { opacity:0; } 100% { opacity:1;}
}
@keyframes fadingAnimation02 {
    0% { opacity:0;} 8% { opacity:0; } 16% { opacity:1; } 24% { opacity:1; } 33% { opacity:0; } 42% { opacity:0; } 50% { opacity:0;} 59% { opacity:0; } 67% { opacity:0;} 76% { opacity:0; } 84% { opacity:0;} 92% { opacity:0; } 100% { opacity:0;}
}
@keyframes fadingAnimation03 {
    0% { opacity:0;} 8% { opacity:0; } 16% { opacity:0; } 24% { opacity:0; } 33% { opacity:1; } 42% { opacity:1; } 50% { opacity:0;} 59% { opacity:0; } 67% { opacity:0;} 76% { opacity:0; } 84% { opacity:0;} 92% { opacity:0; } 100% { opacity:0;}
}
@keyframes fadingAnimation04 {
    0% { opacity:0;} 8% { opacity:0; } 16% { opacity:0; } 24% { opacity:0; } 33% { opacity:0; } 42% { opacity:0; } 50% { opacity:1;} 59% { opacity:1; } 67% { opacity:0;} 76% { opacity:0; } 84% { opacity:0;} 92% { opacity:0; } 100% { opacity:0;}
}
@keyframes fadingAnimation05 {
    0% { opacity:0;} 8% { opacity:0; } 16% { opacity:0; } 24% { opacity:0; } 33% { opacity:0; } 42% { opacity:0; } 50% { opacity:0;} 59% { opacity:0; } 67% { opacity:1;} 76% { opacity:1; } 84% { opacity:0;} 92% { opacity:0; } 100% { opacity:0;}
}
@keyframes fadingAnimation06 {
    0% { opacity:0;} 8% { opacity:0; } 16% { opacity:0; } 24% { opacity:0; } 33% { opacity:0; } 42% { opacity:0; } 50% { opacity:0;} 59% { opacity:0; } 67% { opacity:0;} 76% { opacity:0; } 84% { opacity:1;} 92% { opacity:1; } 100% { opacity:0;}
}
Mit freundlichen Grüßen aus Dresden

Bitte in Zukunft Code in das entsprechende Code-Tag setze. Danke. Minaya
 
Zuletzt bearbeitet von einem Moderator:
Andre_S

Andre_S

unverblümt

AW: Komprimierung für Internet

wozu in 6 Typen unterscheiden wenn sowieso das selbe passiert? Der Code ließe sich stark kürzen. Nächste Überlegung - müsste der Text auch "gefadet" werden? Wenn ja, geht das nicht auch über ein Script?
 
E

elliz

Noch nicht viel geschrieben

AW: Komprimierung für Internet

Mit den 6 Typen erreiche ich, das die 6 Bilder zu unterschiedlichen Zeiten sichtbar bzw. unsichtbar sind. Ich mache den Bilderwechsel ohne JS, nur mit HTML5. Da JS nicht erwünscht ist, lässt sich der code – meines Wissens – kaum verkürzen.
Und ja, der Text muss auch gefadet werden, da es sich um eine Erklärung zu den jeweils wechselnden Bildern ist. Erklärung 5 passt nur zu Bild 5...
 
E

elliz

Noch nicht viel geschrieben

AW: Komprimierung für Internet

Problem hat sich verflüchtigt...
nach dem ich die entsprechenden Bilder nochmals (wie vorher auch schon) als png mit Transparenz über "für Web" gespeichert habe. Danach war die Schrift sauber dargestellt, nicht mehr verpixelt und ausgefranzt. Warum jetzt und vorher nicht – keine Ahnung. Jedenfalls klappt das jetzt so, wie ich es mir vorgestellt habe.
Danke an die Helfer.
 
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
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.
Gesamt: 69 (Mitglieder: 0, Gäste: 69)
Robots: 707

Statistik des Forums

Themen
118.565
Beiträge
1.538.067
Mitglieder
67.488
Neuestes Mitglied
Andrew56524
Oben