Bilder pixelig

[manuwild03]

Guten Abend,
ich bin noch Recht neu und brauche daher etwas Unterstützung. Ich habe auf meiner lokalen Webseite die ich gerade ein bisschen baue einige Bilder eingefügt. Die Bilder sollen auf der Webseite eine Größe von 250x200 Pixel haben.
Mein Problem ist, dass die Bilder Schrift beinhalten und diese aber sehr schlecht anzeigt wird und pixelig ist, da 200 px jetzt ja wirklich nicht viel ist.

Mein Code dazu sieht aktuell so aus:
<a href="sommerlimonade/SeiteSommerlimonade.html" /a>
<img src="bilder/Design ohne Titel.png" alt="Sommercocktail"
height="250px", width="200px">


Hier ein aktuelles Bild wie pixelig die Schrift dargestellt wird.

Nun frage ich mich ob es eine Art Möglichkeit gibt das Bild hochauflösender bspw. mit 1000x1250px abzuspeichern und es dann über HTML oder CSS so zu skalieren, dass es mit der Größe von 200x250 angezeigt wird aber die Qualität von 1000x1250px hat.


Danke schonmal für die Hilfe!

Grüße ausm Schwabenländle
Manuel

 

[scatello]

Das Originalbild hat eine Größe von 325x439 Pixeln. D.h. das Bild muss runter skaliert werden, was bei Schriften in Bildern meist schon nicht schön ist, Allerdings kommt dann noch dazu, dass du per HTML nicht proportional verkleinerst, was ebenfalls bei Schriften Probleme macht. Daher solltest du die Grafik direkt in der Größe von 200x250 Pixel erstellen und nicht mit HTML skalieren.

 

[manuwild03]

Wie ist

Das Originalbild hat eine Größe von 325x439 Pixeln.

Wie ist es dir denn ersichtlich, dass das Bild 325x439 px hat?
Ich habe es mittels Canva mit 200x250 erstellt. Kann es sich dennoch geändert haben?

 

[scatello]

Wie ist es dir denn ersichtlich, dass das Bild 325x439 px hat?

Ich habe auf das Bild geklickt und dann das Bild kopiert, in ein Grafikprogramm rein kopiert und die Ausmaße ausgelesen.

Ich habe es mittels Canva mit 200x250 erstellt.

Canva kenne ich nicht, ich benutze vernünftige Grafikprogramme

 

[Sempervivum]

Ich hätte nicht ausgeschlossen, dass die Größe bei der Verarbeitung durch die Forensoftware oder die Anzeige mit Fancybox skaliert wird aber eine Test mit diesem Bild bestätigt das nicht: Die Größe ist die selbe wie bei mir lokal.

Aber um sicher zu gehen, lade doch das Bild mal in einer ZIP-Datei hoch.

Die Größe kann man mit dem HTML-Inspektor des Browser anzeigen lassen. Siehe hier:
https://wiki.selfhtml.org/wiki/Grundlagen/Webprojekte/testen#Arbeiten_mit_dem_Seiteninspektor

Außerdem ist dein HTML fehlerhaft: Das "/a>" muss in ein getrenntes Ende-Tag:

<a href="sommerlimonade/SeiteSommerlimonade.html">
    <img src="bilder/Design ohne Titel.png" alt="Sommercocktail" height="250px", width="200px">
</a>

Am besten kannst Du solchen Problemen aus dem Wege gehen indem Du Schriften nicht in einem Bild sondern als Text speicherst. Deine Schriftart sieht ein wenig individuell aus aber wenn Du das Bild selbst gemacht hast, hast Du sicher ein Fontfile davon.

 

[AndreasB]

Wenn du die Schrift nicht einbinden möchtest, könntest du auch SVG Text nehmen, dadurch wäre skalieren kein Problem.

 

[Sempervivum]

Ich habe mich noch ein wenig über Canva informiert und dies gefunden:
https://sammytravis.com/export-canva-logo-as-vector-file/
D. h. in der Pro-Version kann man die Grafiken als SVG exportieren, dann hättest Du keine Probleme mehr mit der Skalierung.