{"id":889,"date":"2020-05-20T21:25:31","date_gmt":"2020-05-20T19:25:31","guid":{"rendered":"https:\/\/ekiwi.de\/?p=889"},"modified":"2020-05-20T21:25:31","modified_gmt":"2020-05-20T19:25:31","slug":"runde-bilder-fuer-webseite","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/889\/runde-bilder-fuer-webseite\/","title":{"rendered":"Runde Bilder f\u00fcr Webseite"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ekiwi.de\/index.php\/889\/runde-bilder-fuer-webseite\/#Kreisrunde_Bilder_mit_Grafiksoftware_erstellen\" >Kreisrunde Bilder mit Grafiksoftware erstellen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ekiwi.de\/index.php\/889\/runde-bilder-fuer-webseite\/#Bilder_mit_CSS_kreisfoermig_maskieren\" >Bilder mit CSS kreisf\u00f6rmig maskieren<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ekiwi.de\/index.php\/889\/runde-bilder-fuer-webseite\/#CSS_mit_radialem_Verlauf_maskieren\" >CSS mit radialem Verlauf maskieren<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ekiwi.de\/index.php\/889\/runde-bilder-fuer-webseite\/#CSS_mit_PNG-Bild_oder_SVG-Bild_maskieren\" >CSS mit PNG-Bild oder SVG-Bild maskieren<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ekiwi.de\/index.php\/889\/runde-bilder-fuer-webseite\/#CSS-Code_zum_Maskieren_mit_SVG-Bildern\" >CSS-Code zum Maskieren mit SVG-Bildern<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/ekiwi.de\/index.php\/889\/runde-bilder-fuer-webseite\/#Browser-Kompatibilitaet_von_mask\" >Browser-Kompatibilit\u00e4t von mask<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/ekiwi.de\/index.php\/889\/runde-bilder-fuer-webseite\/#Rundes_Bild_mit_SVG-Maske_erstellen\" >Rundes Bild mit SVG-Maske erstellen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/ekiwi.de\/index.php\/889\/runde-bilder-fuer-webseite\/#Bild_als_Raute_fuer_Webseite_darstellen\" >Bild als Raute f\u00fcr Webseite darstellen<\/a><\/li><\/ul><\/nav><\/div>\n<p>H\u00e4ufig sieht man auf Webseiten runde Bilder und Fotos, obwohl jeder wei\u00df, dass das normale Bildformat rechteckig ist. Diese kreisf\u00f6rmigen Bilder sind auf Homepages insbesondere sehr beliebt bei Profilbildern. Ganz h\u00e4ufig ist dies auch anzutreffen bei den Profilbildern in Foren oder den Kommentaren eines Blogs.<\/p>\n<figure id=\"attachment_890\" aria-describedby=\"caption-attachment-890\" style=\"width: 200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-890 size-full\" title=\"kreisrundes Profilbild mit Blur-Effekt\" src=\"\/wp-content\/uploads\/2020\/05\/rundes-bild-f\u00fcr-webseite-2.png\" alt=\"rundes Profilbild f\u00fcr die Webseite\" width=\"200\" height=\"201\" srcset=\"\/wp-content\/uploads\/2020\/05\/rundes-bild-f\u00fcr-webseite-2.png 200w, \/wp-content\/uploads\/2020\/05\/rundes-bild-f\u00fcr-webseite-2-150x150.png 150w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><figcaption id=\"caption-attachment-890\" class=\"wp-caption-text\">Beispiel eines runden Profilbildes<\/figcaption><\/figure>\n<p>Das kreisf\u00f6rmig erscheinende Bild ist auch rechteckig. Man nutzt in diesem Fall nur Transparenz- und Verlaufsfunktionen, um diesen Effekt zu erzielen. Deswegen sollten man Bildformate wie <em>*.PNG<\/em> verwenden. Mit <em>*.JPG<\/em>-Dateien kann man es auch hinbekommen, dann muss aber der Hintergrund der Bilddatei derselbe sein, wie auf der Webseite. Der Nachteil liegt auf der Hand, wenn man den Hintergrund der Webseite irgendwann mal \u00e4ndert.<\/p>\n<p>Das Zauberwort, um solche runden Bilder zu erstellen hei\u00dft \u201e<strong>Maskieren<\/strong>\u201c. Damit lassen sich auch alle anderen denkbaren Formen, wie Profilbilder als Raute erstellen. Das besondere am Maskieren ist, dass Verl\u00e4ufe dargestellt werden k\u00f6nnen, zum Beispiel am Rand. Ist das nicht erforderlich und eine scharfe Kontur gew\u00fcnscht, nennt man das <strong>Clipping<\/strong>.<\/p>\n<figure id=\"attachment_888\" aria-describedby=\"caption-attachment-888\" style=\"width: 567px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-888 size-full\" title=\"Maskieren von Bildern\" src=\"\/wp-content\/uploads\/2020\/05\/bild-maskieren.png\" alt=\"Darstellung der kreisrunden Maskierung eines Bildes f\u00fcr den Transparenzverlauf\" width=\"567\" height=\"150\" srcset=\"\/wp-content\/uploads\/2020\/05\/bild-maskieren.png 567w, \/wp-content\/uploads\/2020\/05\/bild-maskieren-300x79.png 300w\" sizes=\"auto, (max-width: 567px) 100vw, 567px\" \/><figcaption id=\"caption-attachment-888\" class=\"wp-caption-text\">Bild Maskieren mittels CSS oder Grafiksoftware<\/figcaption><\/figure>\n<h2><span class=\"ez-toc-section\" id=\"Kreisrunde_Bilder_mit_Grafiksoftware_erstellen\"><\/span>Kreisrunde Bilder mit Grafiksoftware erstellen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Eine M\u00f6glichkeit ist ein solches kreisrundes Bild mit einer passenden Grafiksoftware, wie Photoshop, zu erstellen. Aber vorweggenommen: ich halte dies nicht f\u00fcr die optimale L\u00f6sung, da es ein wenig an Flexibilit\u00e4t nimmt und man auf seiner Webseite dann nur langfristig die runden Bilder verwenden kann. Will man kurzfristig etwas am Design \u00e4ndern, und ein solches Profilbild zum Beispiel als Raute darstellen, dann muss die Grafikbearbeitung f\u00fcr alle Bilder manuell nachholen.<\/p>\n<p>In Photoshop nimmt man zum Beispiel das Auswahlwerkzeug f\u00fcr die Ellipse. Bei <strong>gehaltener Shift-Taste <\/strong>zieht man einen Auswahlkreis \u00fcber den betreffenden Bereich, den man rund darstellen m\u00f6chte. Danach w\u00e4hlt man im <em>Men\u00fc<\/em> <strong>Auswahl =&gt; Auswahl umkehren<\/strong>. Nun noch <strong>Strg+X<\/strong> dr\u00fccken oder <strong>Bearbeiten =&gt; Ausschneiden<\/strong>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Bilder_mit_CSS_kreisfoermig_maskieren\"><\/span>Bilder mit CSS kreisf\u00f6rmig maskieren<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Mehr Flexibilit\u00e4t bietet die Verwendung von CSS. Hier kann man das Originalbild auf dem Server verwenden. \u00dcber CSS und\/oder entsprechenden SVG-Masken, gibt man dann die Form vor, wie das Bild erscheinen soll. Die Berechnung bzw. Darstellung erfolgt dann Browser-seitig. M\u00f6chte man eine andere Form vorgeben, dann kann man einfach die Maskierung anpassen. Dies ist dann nur eine entsprechende Anpassung in der CSS-Klasse.<\/p>\n<p>Seitens Webkit; dabei handelt es sich um eine freie Webbrowser-Engine, welche in vielen Browsern zum Einsatz kommt; wurde das <a href=\"https:\/\/webkit.org\/blog\/181\/css-masks\/\" target=\"_blank\" rel=\"noopener noreferrer\">Maskieren mittels CSS<\/a> bereits 2008 eingef\u00fchrt. Trotzdem oder leider ist oftmals immer noch die erste Wahl <em>*PNG<\/em>-Dateien direkt zu bearbeiten vor der Ver\u00f6ffentlichung im Web.<\/p>\n<p>CSS kann man bekannterma\u00dfen in zwei Varianten verwenden. Einmal als Klasse und einmal im Syle-Attribut des jeweiligen HTML-Tags. CSS-Klassen bieten sich immer dann an, wenn man die jeweilige Eigenschaft \u00f6fters ben\u00f6tigt.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"CSS_mit_radialem_Verlauf_maskieren\"><\/span>CSS mit radialem Verlauf maskieren<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<blockquote><p><code>&lt;img style=\"mask: radial-gradient( black 70%, transparent 70%);\" src=\"frau-katze.jpg\"&gt;<\/code><\/p><\/blockquote>\n<p>Mit diesem CSS-Code erzeugt man ganz einfach ein kreisrundes Bild mit einem Verlauf am Rand. Mit den Prozentwerten kann man noch die Ausschnittsgr\u00f6\u00dfe und den Transparenzverlauf anpassen.<\/p>\n<p>Leider funktioniert dieser Code nicht mit allen Browsern zuverl\u00e4ssig (Stand Mai 2020).<\/p>\n<h3><span class=\"ez-toc-section\" id=\"CSS_mit_PNG-Bild_oder_SVG-Bild_maskieren\"><\/span>CSS mit PNG-Bild oder SVG-Bild maskieren<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Hierzu erstellt man sich eine runde Maskierung als PNG-Bild. Das Maskenbild kann dabei deutlich kleiner sein als die Originalbilder. Dies wird sogar empfohlen, um Speicherplatz und Traffic zu sparen.<\/p>\n<p>Dies gelingt mit folgendem Code:<\/p>\n<blockquote><p><code>&lt;style type=\"text\/css\"&gt;<\/code><\/p>\n<p>.maskradial {<\/p>\n<p>mask: url(&#8218;maske.png&#8216;);<\/p>\n<p>mask-size: 100%;<\/p>\n<p>-webkit-mask: url(&#8222;maske.png&#8220;);<\/p>\n<p>-webkit-mask-size: 100%;<\/p>\n<p>}<\/p>\n<p>&lt;\/style&gt;<\/p>\n<p>&lt;img class=&#8220;maskradial&#8220; src=&#8220;frau-katze.png&#8220;&gt;<\/p><\/blockquote>\n<p>Auch dieser Code funktioniert nicht so 100%tig mit allen Browsern.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"CSS-Code_zum_Maskieren_mit_SVG-Bildern\"><\/span>CSS-Code zum Maskieren mit SVG-Bildern<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Um noch mehr Speicherplatz und Traffic zu sparen, empfiehlt es sich bei einfachen Formen, wie unserem Kreis, ein SVG-Bild als Maske zu verwenden, da SVG-Dateien reine <a title=\"Was ist eine Vektorgrafik\" href=\"https:\/\/www.prinux.com\/was-ist-eine-vektorgrafik-und-warum-ist-diese-fuer-den-druck-so-wichtig\/\" target=\"_blank\" rel=\"noopener noreferrer\">Vektorgrafiken<\/a> sind.<\/p>\n<p>Ben\u00f6tigt man ein passendes SVG-Bild, kann man diesen Code verwenden:<\/p>\n<blockquote><p><code>&lt;svg version=\"1.1\" viewBox=\"0 0 300 300\" width=\"100%\" height=\"100%\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;<\/code><\/p>\n<p>&lt;filter id=&#8220;gradientfilter&#8220; &gt;<\/p>\n<p>&lt;feGaussianBlur stdDeviation=&#8220;5&#8243;\/&gt;<\/p>\n<p>&lt;\/filter&gt;<\/p>\n<p>&lt;circle cx=&#8220;100&#8243; cy=&#8220;100&#8243; r=&#8220;50&#8243; fill=&#8220;black&#8220; filter=&#8220;url(#gradientfilter)&#8220; \/&gt;<\/p>\n<p>&lt;\/svg&gt;<\/p><\/blockquote>\n<p>Alle m\u00f6glichen verwendbaren Eigenschaften von <a title=\"Eigenschaften und Attribute von mask\" href=\"https:\/\/developer.mozilla.org\/de\/docs\/Web\/CSS\/mask\" target=\"_blank\" rel=\"noopener noreferrer\"><em>mask<\/em><\/a> findet man auch auf der Developer-Seite von Mozilla.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Browser-Kompatibilitaet_von_mask\"><\/span>Browser-Kompatibilit\u00e4t von mask<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Die geringe <a title=\"Welcher Browser ist mit mask kompatibel?\" href=\"https:\/\/caniuse.com\/#feat=css-masks\" target=\"_blank\" rel=\"noopener noreferrer\">Browser-Kompatibilit\u00e4t von <em>mask<\/em><\/a> ist hier sehr nervig. Einige Browser ben\u00f6tigen den Pr\u00e4fix <em>-webkit<\/em> damit es funktioniert. Andere Browser ben\u00f6tigen die Eigenschaft <em>mask-image<\/em> oder <em>mask-box-image<\/em>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Rundes_Bild_mit_SVG-Maske_erstellen\"><\/span>Rundes Bild mit SVG-Maske erstellen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Die beste Browser-Kompatibilit\u00e4t erh\u00e4lt man, wenn man auf CSS verzichtet und eine SVG-Maske erstellt. Der Code daf\u00fcr sieht so aus:<\/p>\n<blockquote><p><code>&lt;svg version=\"1.1\" width=\"854\" height=\"854\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;<\/code><\/p>\n<p>&lt;filter id=&#8220;gradientfilter&#8220; &gt;<\/p>\n<p>&lt;feGaussianBlur stdDeviation=&#8220;7&#8243;\/&gt;<\/p>\n<p>&lt;\/filter&gt;<\/p>\n<p>&lt;mask id=&#8220;circlemask&#8220;&gt;<\/p>\n<p>&lt;circle cx=&#8220;425&#8243; cy=&#8220;425&#8243; r=&#8220;400&#8243; fill=&#8220;#fff&#8220; filter=&#8220;url(#gradientfilter)&#8220; \/&gt;<\/p>\n<p>&lt;\/mask&gt;<\/p>\n<p>&lt;image width=&#8220;854&#8243; height=&#8220;854&#8243; mask=&#8220;url(#circlemask)&#8220; xlink:href=&#8220;frau-katze.jpg&#8220; \/&gt;<\/p>\n<p>&lt;\/svg&gt;<\/p><\/blockquote>\n<h2><span class=\"ez-toc-section\" id=\"Bild_als_Raute_fuer_Webseite_darstellen\"><\/span>Bild als Raute f\u00fcr Webseite darstellen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Hier noch ein Beispiel f\u00fcr eine andere Form und Maskierung, wenn man das Bild zum Beispiel als Raute darstellen m\u00f6chte.<\/p>\n<div align=\"center\">\n<svg version=\"1.1\" width=\"300\" height=\"300\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n    <filter id=\"gradientfilter4\" >\n        <feGaussianBlur stdDeviation=\"7\"\/>\n    <\/filter>\n    <rect x=\"50\" y=\"50\" width=\"200\" height=\"200\" rx=\"20\" ry=\"20\" fill=\"#000\" transform=\"rotate(45 150,150)\" filter=\"url(#gradientfilter4)\"\/>\n<\/svg><br \/>\n<svg version=\"1.1\" width=\"300\" height=\"300\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n    <filter id=\"gradientfilter2\" >\n        <feGaussianBlur stdDeviation=\"7\"\/>\n    <\/filter>\n    <mask id=\"raute\">\n    \t<rect x=\"50\" y=\"50\" width=\"200\" height=\"200\" rx=\"20\" ry=\"20\" fill=\"#fff\" transform=\"rotate(45 150,150)\" filter=\"url(#gradientfilter2)\"\/>\n    <\/mask>\n    <image width=\"300\" height=\"300\" mask=\"url(#raute)\" xlink:href=\"https:\/\/ekiwi.de\/wp-content\/uploads\/2020\/05\/frau-katze-300.jpg\" \/>\n<\/svg>\n<\/div>\n<p>Es sind beliebige weitere Formen denkbar.<\/p>","protected":false},"excerpt":{"rendered":"<p>Dieser Artikel erl\u00e4utert, wie man auch ohne Bildbearbeitungssoftware kreisrunde Bilder auf einer Webseite darstellen kann.<\/p>\n","protected":false},"author":2,"featured_media":886,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[8,5],"tags":[22,19,61,76,4,164,165],"class_list":["post-889","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-grafik","category-hmtl","tag-css","tag-grafik","tag-grafikbearbeitung","tag-grafiken","tag-html","tag-image","tag-svg"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/889","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=889"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/889\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/886"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=889"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=889"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}