Wir möchten Ihnen hier einige Tipps geben, wie Sie Ihre Homepage selbst pflegen können und worauf Sie dabei besonders achten sollten. Unter Homepagepflege haben wir schon einige Punkte aufgelistet, die ein Homepage-Pflege-Vertrag mit uns beinhaltet. Damit die Inhalte optimal von Suchmaschinen gefunden werden und eine hohe Qualität erhalten, muss der neue Inhalt die Richtlinie zur Erstellung einer Homepage erfüllen. Diese Regeln werden hauptsächlich über W3C (World Wide Web Consortium) festgelegt.
Das Einfügen von Bildern erfolgt über das HTML-Tag img. Über src innerhalb des HTML-Tag img referenziert die Adresse der Grafik. Dies kann direkt und relativ erfolgen. Über das Tag alt wird eine Bildbeschreibung hinterlegt. Dieser Tag wird angezeigt, wenn die Grafik nicht gefunden wird, wenn der Besucher mit der Maus über die Grafik fährt und des Weiteren bei Menschen mit Behinderung von unterstützenden Browserplugins (Screen Readern) gelesen. Stichpunkt Barrierefreiheit. Aus Sicht der Suchmaschinenoptimierung ist der alt-Tag sehr wichtig und sollte daher sinnvoll hinterlegt werden. Es gibt außerdem noch width und height, die die Größe der Grafik beschreiben. Seit Webseiten von sehr unterschiedlichen Geräten abrufbar sein sollen (mobile friendly), sollten diese beiden Tags nicht mehr innerhalb des img-Tag hinterlegt werden. Denn wenn Sie dort eine width von zum Beispiel, 500px hinterlegen, kann Ihre Website nicht mehr responsive sein, denn ein mobiles Gerät hat eventuell eine viel kleinern Bildschirm als 500px und würde im diesem Fall das Bild zwar anzeigen, aber der Besucher muss scrollen. Besser ist es, die Bildgrösse über css, bzw. über das Elternobjekt zu steuern. Als Elternobjekt bezeichnet man das HTML-Tag, in dem die Grafik eingebunden wird. Dies ist in der Regel ein div-Container. Im css geben Sie dann für alle Grafiken folgendes an.
img{ width: 100%; height: auto; }
Somit ist sichergestellt, dass die Grafik auf gar keinen Fall über die Breite (width) der Website hinausgeht. Das Ganze funktioniert natürlich nur, wenn Ihre Website im Responsive Design entwickelt wurde. Unter folgenden Link können Sie die Ausgabe Ihrer Website auf unterschiedlichen Endgeräten prüfen und sehen so schnell, ob Ihre Webssite responsive ist.
responsive / mobile friendly Test: Am I Responsive
Wenn Sie schon mehr Erfahrung mit HTML haben, empfehlen wir folgende Attribute für das Einbinden von Grafiken (Retina):
<figure><img src="pflegehinweis.jpg" srcset="pflegehinweis.jpg 2x, pflegehinweis.jpg 3x, pflegehinweis.jpg 4x"></figure>