mirror of
https://github.com/TheTaz25/denis.ergin.git
synced 2025-07-07 22:08:50 +00:00
feat(slides): Add Slides for images in HTML
This commit is contained in:
Denis Ergin
parent
009bd0d88f
commit
af9f946b82
8 changed files with 269 additions and 0 deletions
BIN
public/images/cat-w250.png
Normal file
BIN
public/images/cat-w250.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
BIN
public/images/cat-w600.png
Normal file
BIN
public/images/cat-w600.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 817 KiB |
BIN
public/images/cat.png
Normal file
BIN
public/images/cat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 624 KiB |
142
src/components/slides/html-images/basics.astro
Normal file
142
src/components/slides/html-images/basics.astro
Normal file
|
|
@ -0,0 +1,142 @@
|
||||||
|
<section>
|
||||||
|
<section>
|
||||||
|
<h2>Das <code>img</code>-Tag</h2>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h3>Einbinden einer Grafik</h3>
|
||||||
|
<p>Mithilfe des <code><img /></code> Tag können Bilder in die Website eingebunden werden:</p>
|
||||||
|
<figure>
|
||||||
|
<img src="/images/cat.png" height="300"/>
|
||||||
|
<figcaption>Eine Katze. Ein Bild von <a href="https://cataas.com">Cat-As-A-Service</a>.</figcaption>
|
||||||
|
</figure>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>Die Einbindung des Bilder erfolgt mit dem <code>src</code>-Attribut:</p>
|
||||||
|
<pre class="html"><code data-trim data-line-numbers>
|
||||||
|
<img src="/images/cat.png" />
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>Das Bild wird im Web-Server abgelegt und mit dem Pfad aufgerufen.</p>
|
||||||
|
<p>Es können natürlich auch Bilder aus anderen Webseiten verwendet werden, aber dies ist nicht beliebt.</p>
|
||||||
|
<p>Datenhaltung und Bandbreite werden mit auf den Host des Bildes "abgeschoben".</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h3>Aber h<code>"alt"</code></h3>
|
||||||
|
<p>Mit dem alt-Attribut kann das Bild beschrieben werden, dass angezeigt wird. Der Text ist so nicht einsehbar, technische Hilfsmittel wie Screen-Reader verwenden aber solche Informationen.</p>
|
||||||
|
<pre class="html"><code data-trim data-line-numbers>
|
||||||
|
<img
|
||||||
|
src="/images/cat.png"
|
||||||
|
alt="Eine schwarz-weiß farbene Katze sitzt
|
||||||
|
und schaut interessiert nach oben"
|
||||||
|
/>
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>(Weitere) Gründe das alt-Attribut zu verwenden</p>
|
||||||
|
<ul>
|
||||||
|
<li>Screen-Reader</li>
|
||||||
|
<li>Bild kann nicht oder wird nicht geladen: Browser zeigt alt-Text an</li>
|
||||||
|
<li>Google nutzt alt-Text für Bilder-Suche</li>
|
||||||
|
<li>Text-Browser</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<pre class="html"><code data-trim data-line-numbers>
|
||||||
|
<img
|
||||||
|
src="/non-existent.png"
|
||||||
|
alt="Das Bild hier fehlt"
|
||||||
|
/>
|
||||||
|
</code></pre>
|
||||||
|
<img src="non-existent.png" alt="Das Bild hier fehlt" />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h3>Breite & Höhe vordefinieren</h3>
|
||||||
|
<p>Es ist mit den Attributen <code>height</code> und <code>width</code> möglich, dem Browser mitzuteilen welche Breite und Höhe das geladene Bild einnehmen soll.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<pre class="html"><code data-trim data-line-numbers>
|
||||||
|
<img
|
||||||
|
src="/images/cat.png"
|
||||||
|
alt="Das Bild einer Katze"
|
||||||
|
height="50"
|
||||||
|
/>
|
||||||
|
</code></pre>
|
||||||
|
<img src="/images/cat.png" alt="Das Bild einer schwarz-weißen Katze" height="50"/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<pre class="html"><code data-trim data-line-numbers>
|
||||||
|
<img
|
||||||
|
src="/images/cat.png"
|
||||||
|
alt="Das Bild einer Katze"
|
||||||
|
height="250"
|
||||||
|
/>
|
||||||
|
</code></pre>
|
||||||
|
<img src="/images/cat.png" alt="Das Bild einer schwarz-weißen Katze" height="250" />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>Tipp: Wenn das Bild flexibel geladen wird, immer nur ein Attribut verwenden. Der Browser behält das Seitenverhältniss ansonsten nicht:</p>
|
||||||
|
<pre class="html"><code data-trim data-line-numbers>
|
||||||
|
<img
|
||||||
|
src="/images/cat.png"
|
||||||
|
alt="Das Bild einer Katze"
|
||||||
|
height="250"
|
||||||
|
width="100"
|
||||||
|
/>
|
||||||
|
</code></pre>
|
||||||
|
<img src="/images/cat.png" alt="Das Bild einer schwarz-weißen Katze" height="250" width="100" />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p><strong>Aber Wieso Dimensionen angeben?</strong></p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>Der Browser lädt zuerst HTML, liest dann das HTML und lädt Inhalte nach sobald er welche findet.</p>
|
||||||
|
<p>Das Bedeutet, dass ein Bild womöglich während der ersten Sekunden nicht zu sehen ist und dann klassisch rein "ploppt".</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>Inhalt der nach dem Bild angezeigt wird, wird daraufhin verschoben -> Schlechte User-Experience.</p>
|
||||||
|
<p>Das gesamte Konzept (Inhalt wird nachgeladen) ist auch unter dem Begriff "Cumulative Layout Shift" bekannt.</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<p>Wird eine Höhe vorgegeben, so "reserviert" der Browser den Platz, bis das Bild vollständig geladen wurde.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h3>Datei-Typen</h3>
|
||||||
|
<p>Bilder-Formate gibt es heutzutage wie Sand am Meer.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>Klassische Formate</p>
|
||||||
|
<ul>
|
||||||
|
<li>.png - Bietet Transparenz</li>
|
||||||
|
<li>.jpeg - Bietet kleinere Dateien (für den Verlust von Qualität)</li>
|
||||||
|
<li>.gif - Wenn das Bild klein und ggf. animiert sein soll</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>Modernere Formate bieten normalerweise "gleichbleibende" Qualität bei drastisch kleineren Dateigrößen</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<ul>
|
||||||
|
<li>.svg - Vektorgrafiken, beliebt bei z.B. Icons</li>
|
||||||
|
<li>.webp - Eine Alternative für .gif-Dateien, aber auch Stillstehende Bilder (durch besseren Farb-Raum)</li>
|
||||||
|
<li>.avif - Sehr gute Komprimierung, Adoption war lange schlecht, mittlerweile aber sehr verbreitet</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
11
src/components/slides/html-images/index.astro
Normal file
11
src/components/slides/html-images/index.astro
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
---
|
||||||
|
import TitleSlide from './title.astro'
|
||||||
|
import Basics from './basics.astro'
|
||||||
|
import Responsiveness from './responsive.astro'
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="slides">
|
||||||
|
<TitleSlide />
|
||||||
|
<Basics />
|
||||||
|
<Responsiveness />
|
||||||
|
</div>
|
||||||
105
src/components/slides/html-images/responsive.astro
Normal file
105
src/components/slides/html-images/responsive.astro
Normal file
|
|
@ -0,0 +1,105 @@
|
||||||
|
<section>
|
||||||
|
<section>
|
||||||
|
<h2>Responsive Bilder</h2>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>Seit dem Smartphone gibt es das Problem der Bildschirmbreiten und der Support derer.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<ul>
|
||||||
|
<li>Große Bilder können schlechter auf mobilen Geräten angezeigt werden</li>
|
||||||
|
<li>Große Dateien brauchen länger zum herunter laden</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h3><code>srcset</code> und <code>sizes</code></h3>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>Mithilfe der Attribute <code>srcset</code> und <code>sizes</code> kann der Browser anhand der Informationen vom Entwickler und des Gerätes verschiedene Bilder laden.</p>
|
||||||
|
<p>Zwischen verschiedenen Browser erlebt man aber verschiedene Erfahrungen...</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>Beispiel</p>
|
||||||
|
<pre class="html"><code data-trim data-line-numbers="2-5|7-8|10">
|
||||||
|
<img
|
||||||
|
srcset="
|
||||||
|
/images/cat-w250.png 250w, // Erstes Bild - 250px
|
||||||
|
/images/cat-w600.png 600w, // Zweites Bild - 600px
|
||||||
|
"
|
||||||
|
sizes="
|
||||||
|
(max-width: 800px) 250px, // Bildschirme <= 800px
|
||||||
|
600px // Bildschirme > 800px
|
||||||
|
"
|
||||||
|
src="/images/cat-w250.png" // Fallback
|
||||||
|
alt="Eine Katze"
|
||||||
|
/>
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<img
|
||||||
|
height="500"
|
||||||
|
srcset="
|
||||||
|
/images/cat-w250.png 250w,
|
||||||
|
/images/cat-w600.png 600w
|
||||||
|
"
|
||||||
|
sizes="
|
||||||
|
(max-width: 800px) 250px,
|
||||||
|
600px
|
||||||
|
"
|
||||||
|
src="/images/cat-w250.png"
|
||||||
|
alt="Eine Katze"
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h3><code><picture></code> - Die Alternative</h3>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>Bietet die gleichen Features, lässt das alles aber ein bisschen besser aussehen</p>
|
||||||
|
<p>Kann aber auch ein bisschen mehr!</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<pre class="html"><code data-trim data-line-numbers="1,5|2,3|4">
|
||||||
|
<picuture>
|
||||||
|
<source /> <!-- Ein oder mehrere source-tags -->
|
||||||
|
<source />
|
||||||
|
<img /> <!-- Notwendig zum Anzeigen -->
|
||||||
|
</picture>
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<pre class="html"><code data-trim data-line-numbers="2-6|7-11|12-14">
|
||||||
|
<picuture>
|
||||||
|
<!-- Das kleine Bild definieren, zeige bis 799px an -->
|
||||||
|
<source
|
||||||
|
media="(max-width: 799px)"
|
||||||
|
srcset="/images/cat-w250.png"
|
||||||
|
/>
|
||||||
|
<!-- Das große Bild definieren, zeige ab 800px an -->
|
||||||
|
<source
|
||||||
|
media="(min-width: 800px)"
|
||||||
|
srcset="/images/cat-w600.png"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src="/images/cat-w600.png" alt="Eine Katze"
|
||||||
|
/>
|
||||||
|
</picture>
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<picture>
|
||||||
|
<source srcset="/images/cat-w250.png" media="(max-width: 799px)">
|
||||||
|
<source srcset="/images/cat-w600.png" media="(min-width: 800px)">
|
||||||
|
<img src="/images/cat-w600.png" alt="Eine Katze" height="500"/>
|
||||||
|
</picture>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
3
src/components/slides/html-images/title.astro
Normal file
3
src/components/slides/html-images/title.astro
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<section>
|
||||||
|
<h1>Bilder in HTML</h1>
|
||||||
|
</section>
|
||||||
8
src/pages/slides/images.astro
Normal file
8
src/pages/slides/images.astro
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
---
|
||||||
|
import Reveal from '../../layouts/Reveal.astro';
|
||||||
|
import Slides from '../../components/slides/html-images/index.astro'
|
||||||
|
---
|
||||||
|
|
||||||
|
<Reveal title="Bilder in HTML">
|
||||||
|
<Slides />
|
||||||
|
</Reveal>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue