Skip to content

Commit

Permalink
The Big Switch: JPG => WEBP
Browse files Browse the repository at this point in the history
  • Loading branch information
@youngbrioche
youngbrioche committed Sep 6, 2022
1 parent 5497aa0 commit d30fe0f
Show file tree
Hide file tree
Showing 97 changed files with 327 additions and 110 deletions.
1 change: 1 addition & 0 deletions .gitattributes
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@
*.png filter=lfs diff=lfs merge=lfs -text
*.mp4 filter=lfs diff=lfs merge=lfs -text
*.webm filter=lfs diff=lfs merge=lfs -text
*.webp filter=lfs diff=lfs merge=lfs -text
6 changes: 3 additions & 3 deletions components/01-pages/article-page-default/article-page-default.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<header class="standard-header" style="background-image: url({{ path '/assets/bg-images/general/visual-trainings-01.jpg' }}); background-color: var(--overlay-standard-color);">
<header class="standard-header" style="background-image: url({{ path '/assets/bg-images/general/visual-trainings-01.webp' }}); background-color: var(--overlay-standard-color);">
<h3 class="standard-header__type">Content Type</h3>
<h1 class="standard-header__title">Titel</h1>
<h2 class="standard-header__subtitle">Subtitle</h2>
Expand Down Expand Up @@ -97,7 +97,7 @@ <h3>{{headline}}</h3>
<p>{{text}}</p>

<figure>
<img src="{{ path '/assets/bg-images/edition-02/edition02-canyon-01.jpg'}}" alt="Bild Groß" />
<img src="{{ path '/assets/bg-images/edition-02/edition02-canyon-01.webp'}}" alt="Bild Groß" />
<figcaption>
{{quote}}
</figcaption>
Expand Down Expand Up @@ -162,7 +162,7 @@ <h3>{{headline}}</h3>

<div class="centered-content-75">
<figure>
<img src="{{ path '/assets/bg-images/edition-02/edition02-canyon-01.jpg'}}" alt="Bild Groß" />
<img src="{{ path '/assets/bg-images/edition-02/edition02-canyon-01.webp'}}" alt="Bild Groß" />
<figcaption>
{{quote}}
</figcaption>
Expand Down
4 changes: 2 additions & 2 deletions components/01-pages/artist-collabo-page/artist-collabo-page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ <h3>Wir glauben an die bewusste Reflektion zwischen Technik und Gesellschaft.</h
<h3 class="image-list-teaser__title image-list-teaser__title--01">Vertigo in the Face of the Infinite</h3>
<p class="image-list-teaser__subtitle">Matthew Plummer-Fernandez</p>
<figure>
<img src="{{ path '/assets/bg-images/edition-01/visual-header-heads.jpg' }}" alt="Tower" />
<img src="{{ path '/assets/bg-images/edition-01/visual-header-heads.webp' }}" alt="Tower" />
<figcaption>
Erste INNOQ-Medienkunst-Edition
</figcaption>
Expand All @@ -49,7 +49,7 @@ <h3 class="image-list-teaser__title image-list-teaser__title--01">Vertigo in the
<h3 class="image-list-teaser__title image-list-teaser__title--02">Neuroevolutionary Trails</h3>
<p class="image-list-teaser__subtitle">Studio Waltz Binaire</p>
<figure>
<img src="{{ path '/assets/bg-images/edition-02/edition02-canyon-01.jpg' }}" alt="Neuroevolutionary Trails" />
<img src="{{ path '/assets/bg-images/edition-02/edition02-canyon-01.webp' }}" alt="Neuroevolutionary Trails" />
<figcaption>
Zweite INNOQ-Medienkunst-Edition
</figcaption>
Expand Down
4 changes: 2 additions & 2 deletions components/01-pages/case-study-pages/case-study-page/case-study-page.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<header class="standard-header" style="background-image: url({{ path '/assets/bg-images/general/visual-trainings-01.jpg' }}); background-color: var(--overlay-standard-color);">
<header class="standard-header" style="background-image: url({{ path '/assets/bg-images/general/visual-trainings-01.webp' }}); background-color: var(--overlay-standard-color);">
<h1 class="standard-header__title">Hey ho, let's go</h1>
<h2 class="standard-header__subtitle">...</h2>
<div class="standard-header__intro">
Expand Down Expand Up @@ -41,7 +41,7 @@ <h3>{{headline}}</h3>
<p>{{text}}</p>

<figure>
<img src="{{ path '/assets/bg-images/edition-02/edition02-canyon-01.jpg'}}" alt="Bild Groß" />
<img src="{{ path '/assets/bg-images/edition-02/edition02-canyon-01.webp'}}" alt="Bild Groß" />
<figcaption>
{{quote}}
</figcaption>
Expand Down
2 changes: 1 addition & 1 deletion components/01-pages/culture-pages/culture-page-default/culture-page-default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ <h1 class="claim-header__title">
Unsere Unternehmenskultur ist aus dem Anspruch entstanden, Dinge anders und besser zu machen. An erster Stelle: Vertrauen in unsere Mitarbeiterinnen und Mitarbeiter und ein respektvoller Umgang untereinander. Jede und jeder Einzelne verfügt über weitreichende Freiheit und trägt ein hohes Maß an Verantwortung.
</p>
</div>
<img class="image-divider-right-image" itemprop="photo" src="{{ path '/assets/bg-images/general/visual-culture-02.jpg'}}" alt="INNOQ Mitarbeitende" />
<img class="image-divider-right-image" itemprop="photo" src="{{ path '/assets/bg-images/general/visual-culture-02.webp'}}" alt="INNOQ Mitarbeitende" />
</div>
</div>

Expand Down
6 changes: 3 additions & 3 deletions components/01-pages/culture-pages/work-page/work-page.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="stripe stripe--primary">
<header
class="standard-header"
style="background-image: url({{ path '/assets/bg-images/general/visual-culture-06.jpg' }}); background-color: var(--overlay-standard-color);"
style="background-image: url({{ path '/assets/bg-images/general/visual-culture-06.webp' }}); background-color: var(--overlay-standard-color);"
>
<h1 class="standard-header__title">Arbeiten bei INNOQ</h1>
<div class="standard-header__intro">
Expand Down Expand Up @@ -32,7 +32,7 @@ <h3>Wenn Vertrauen die Regel ist, braucht es keine Regeln.</h3>
<div class="container-xl container-vertical-spacing-lg">
<img
itemprop="photo"
src="{{path '/assets/bg-images/general/visual-culture-07.jpg'}}"
src="{{path '/assets/bg-images/general/visual-culture-07.webp'}}"
alt="INNOQ Mitarbeiter:innen"
/>
<div class="image-divider-right">
Expand All @@ -50,7 +50,7 @@ <h3>Wenn Vertrauen die Regel ist, braucht es keine Regeln.</h3>
<img
class="image-divider-right-image"
itemprop="photo"
src="{{path '/assets/bg-images/general/visual-culture-12.jpg'}}"
src="{{path '/assets/bg-images/general/visual-culture-12.webp'}}"
alt="INNOQ Mitarbeiter:innen"
/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/01-pages/landing-page/landing-page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@

<header class="landing-page-header">
<video class="bg-video" playsinline autoplay muted loop wf-ignore
poster="{{ path '/assets/bg-images/edition-02/edition02-human-02.jpg'}}">
poster="{{ path '/assets/bg-images/edition-02/edition02-human-02.webp'}}">
<source src=" {{ path '/assets/bg-videos/neuroevolutionary-trails.mp4'}}" type="video/mp4" />
</video>
<div class="landing-page-header__body">
Expand Down
10 changes: 5 additions & 5 deletions components/01-pages/product-microsite-page/product-microsite-page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ <h2 class="teaser-section-heading">So haben wir anderen Kunden geholfen</h2>
<div class="tile-grid-md">
<div class="card">
<div class="card__image-header">
<img class="card__image" src="{{ path '/assets/bg-images/general/visual-workshop-12.jpg'}}" />
<img class="card__image" src="{{ path '/assets/bg-images/general/visual-workshop-12.webp'}}" />
<ul class="card__tags">
<li class="card__tag">Startup</li>
<li class="card__tag">Mobility</li>
Expand Down Expand Up @@ -49,7 +49,7 @@ <h3 class="upcase-heading">Outcome</h3>

<div class="card">
<div class="card__image-header">
<img class="card__image" src="{{ path '/assets/bg-images/general/visual-workshop-05.jpg'}}" />
<img class="card__image" src="{{ path '/assets/bg-images/general/visual-workshop-05.webp'}}" />
<ul class="card__tags">
<li class="card__tag">Startup</li>
<li class="card__tag">Fintech</li>
Expand Down Expand Up @@ -89,10 +89,10 @@ <h2 class="teaser-section-heading">So arbeiten wir mit Ihnen zusammen</h2>

<section class="two-column-image-divider">
<figure class="two-column-image-divider__left-image">
<img src="{{ path '/assets/bg-images/general/visual-workshop-12.jpg'}}" />
<img src="{{ path '/assets/bg-images/general/visual-workshop-12.webp'}}" />
</figure>
<figure class="two-column-image-divider__right-image">
<img src="{{ path '/assets/bg-images/general/visual-workshop-16.jpg'}}"/>
<img src="{{ path '/assets/bg-images/general/visual-workshop-16.webp'}}"/>
</figure>
</section>

Expand Down Expand Up @@ -177,7 +177,7 @@ <h2 class="product-list-teaser__headline">Design Sprint</h2>
</div>

<figure>
<img src="{{ path '/assets/bg-images/general/visual-workshop-11.jpg'}}"/>
<img src="{{ path '/assets/bg-images/general/visual-workshop-11.webp'}}"/>
</figure>

<div class="icon-divider icon-divider--transparent">
Expand Down
6 changes: 3 additions & 3 deletions components/01-pages/story-pages/story-detail-page/story-detail-page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ <h3 class="gradient-header__author">Mika Majoran</h3>
<h1 class="gradient-header__title">{{headline}}</h1>
<img
class="gradient-header__img"
src="{{ path '/assets/bg-images/edition-02/edition02-canyon-01.jpg'}}"
src="{{ path '/assets/bg-images/edition-02/edition02-canyon-01.webp'}}"
alt="Bild mit Umrandung"
/>
</div>
Expand Down Expand Up @@ -52,7 +52,7 @@ <h3 class="info-note__title">Mika Majoran</h3>
</super-quote>

<figure>
<img src="{{ path '/assets/bg-images/edition-02/edition02-canyon-01.jpg'}}" alt="Bild Groß" />
<img src="{{ path '/assets/bg-images/edition-02/edition02-canyon-01.webp'}}" alt="Bild Groß" />
</figure>

<p>{{text}}</p>
Expand Down Expand Up @@ -81,7 +81,7 @@ <h3>{{headline}}</h3>
<p>{{text}}</p>

<figure>
<img src="{{ path '/assets/bg-images/edition-02/edition02-canyon-01.jpg'}}" alt="Bild Groß" />
<img src="{{ path '/assets/bg-images/edition-02/edition02-canyon-01.webp'}}" alt="Bild Groß" />
</figure>

<h3>{{headline}}</h3>
Expand Down
8 changes: 4 additions & 4 deletions components/01-pages/training-pages/training-detail-page/training-detail-page.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<header class="standard-header" style="background-image: url({{ path '/assets/bg-images/general/visual-trainings-08.jpg' }}); background-color: var(--overlay-standard-color);">
<header class="standard-header" style="background-image: url({{ path '/assets/bg-images/general/visual-trainings-08.webp' }}); background-color: var(--overlay-standard-color);">
<h3 class="standard-header__type">Training</h3>
<h1 class="standard-header__title">Cloud Migration</h1>
<h2 class="standard-header__subtitle">Von Legacy zu Cloud Native</h2>
Expand All @@ -20,10 +20,10 @@ <h2 class="standard-header__subtitle">Von Legacy zu Cloud Native</h2>

<section class="two-column-image-divider-asymmetric">
<figure>
<img class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__left-image--quer" src="{{ path '/assets/bg-images/general/visual-workshop-12.jpg' }}" alt="Bild mit Umrandung" />
<img class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__left-image--quer" src="{{ path '/assets/bg-images/general/visual-workshop-12.webp' }}" alt="Bild mit Umrandung" />
</figure>
<figure>
<img class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__right-image--quer" src="{{ path '/assets/bg-images/general/visual-trainings-08.jpg' }}" alt="Bild mit Umrandung" />
<img class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__right-image--quer" src="{{ path '/assets/bg-images/general/visual-trainings-08.webp' }}" alt="Bild mit Umrandung" />
</figure>
</section>

Expand All @@ -42,7 +42,7 @@ <h3>Ihr Nutzen</h3>
</ul>

<figure>
<img src="{{ path '/assets/bg-images/general/visual-trainings-09.jpg'}}" alt="Bild Groß" />
<img src="{{ path '/assets/bg-images/general/visual-trainings-09.webp'}}" alt="Bild Groß" />
<figcaption>Teilnehmerinnen eines Trainings an unserem Standort Zürich</figcaption>
</figure>

Expand Down
2 changes: 1 addition & 1 deletion components/01-pages/training-pages/trainings-overview-page/trainings-overview-page.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<main role="main">
<header class="standard-header" style="background-image: url({{ path '/assets/bg-images/general/visual-trainings-01.jpg' }}); background-color: var(--overlay-standard-color);">
<header class="standard-header" style="background-image: url({{ path '/assets/bg-images/general/visual-trainings-01.webp' }}); background-color: var(--overlay-standard-color);">
<h1 class="standard-header__title">Unser Schulungsangebot</h1>
<h2 class="standard-header__subtitle">Weil wir Wissen gerne mit Ihnen teilen</h2>
<div class="standard-header__intro">
Expand Down
2 changes: 1 addition & 1 deletion components/03-organisms/header/standard-header/standard-header-default.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@


<header class="standard-header" style="background-image: url({{ path '/assets/bg-images/general/visual-trainings-01.jpg' }}); background-color: var(--overlay-standard-color);">
<header class="standard-header" style="background-image: url({{ path '/assets/bg-images/general/visual-trainings-01.webp' }}); background-color: var(--overlay-standard-color);">
<h3 class="standard-header__type standard-header__type--underlined">Content Type</h3>
<h1 class="standard-header__title">Titel Filet mignon sausage tongue, hamburger porchetta fatback kielbasa</h1>
<h2 class="standard-header__subtitle">Subtitle Filet mignon sausage tongue, hamburger porchetta fatback kielbasa</h2>
Expand Down
2 changes: 1 addition & 1 deletion components/03-organisms/header/standard-header/standard-header-inverted.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<header class="standard-header standard-header--inverted" style="background-image: url({{ path '/assets/bg-images/general/visual-trainings-01.jpg' }}); background-color: var(--overlay-standard-color);">
<header class="standard-header standard-header--inverted" style="background-image: url({{ path '/assets/bg-images/general/visual-trainings-01.webp' }}); background-color: var(--overlay-standard-color);">
<h3 class="standard-header__type">Content Type</h3>
<h1 class="standard-header__title">Title</h1>
<h2 class="standard-header__subtitle">Subtitle</h2>
Expand Down
2 changes: 1 addition & 1 deletion components/03-organisms/header/video-header/video-header.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<header class="landing-page-header">
<video class="bg-video" playsinline autoplay muted poster="{{ path '/assets/bg-images/edition-02/edition02-canyon-01.jpg'}}"">
<video class="bg-video" playsinline autoplay muted poster="{{ path '/assets/bg-images/edition-02/edition02-canyon-01.webp'}}"">
<source src="{{ path '/assets/bg-videos/neuroevolutionary-trails-2.webm'}}" type="video/webm"/>
<source src="{{ path '/assets/bg-videos/neuroevolutionary-trails-2.mp4'}}" type="video/mp4"/>
</video>
Expand Down
2 changes: 1 addition & 1 deletion components/03-organisms/newsletter-optin/_newsletter-optin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
padding: $spacer-lg;
background-blend-mode: multiply;
background-color: $brand-gray-75;
background-image: asset-url("bg-images/edition-02/edition02-data-05.jpg");
background-image: asset-url("bg-images/edition-02/edition02-data-05.webp");
background-size: cover;
color: $newsletter-optin-color;

Expand Down
2 changes: 1 addition & 1 deletion components/04-molecules/visual-elements/card/card.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="card">
<div class="card__image-header">
<img class="card__image" src="{{ path '/assets/bg-images/general/visual-workshop-12.jpg'}}" />
<img class="card__image" src="{{ path '/assets/bg-images/general/visual-workshop-12.webp'}}" />
<ul class="card__tags">
<li class="card__tag">Startup</li>
<li class="card__tag">Mobility</li>
Expand Down
2 changes: 1 addition & 1 deletion .../04-molecules/visual-elements/teaser/list-teaser/image-list-teaser/image-list-teaser.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<h3 class="image-list-teaser__title image-list-teaser__title--01">Vertigo in the Face of the Infinite</h3>
<p class="image-list-teaser__subtitle">Matthew Plummer-Fernandez</p>
<figure>
<img src="{{ path '/assets/bg-images/edition-01/visual-header-heads.jpg'}}" alt="Tower" />
<img src="{{ path '/assets/bg-images/edition-01/visual-header-heads.webp'}}" alt="Tower" />
<figcaption>
Erste INNOQ-Medienkunst-Edition
</figcaption>
Expand Down
4 changes: 2 additions & 2 deletions ...ecules/visual-elements/teaser/list-teaser/training-list-teaser/_training-list-teaser.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ $list-teaser-training-height: ms(32);
&.primary {
background-blend-mode: multiply;
background-color: $list-teaser-training-bg-color-primary;
background-image: asset-url("bg-images/general/visual-trainings-07.jpg");
background-image: asset-url("bg-images/general/visual-trainings-07.webp");
background-position: top;
background-repeat: no-repeat;
background-size: cover;
Expand All @@ -20,7 +20,7 @@ $list-teaser-training-height: ms(32);
&.secondary {
background-blend-mode: multiply;
background-color: $list-teaser-training-bg-color-secondary;
background-image: asset-url("bg-images/general/visual-trainings-07.jpg");
background-image: asset-url("bg-images/general/visual-trainings-07.webp");
background-position: top;
background-repeat: no-repeat;
background-size: cover;
Expand Down
2 changes: 1 addition & 1 deletion .../04-molecules/visual-elements/visual-divider/image-divider-right/image-divider-right.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,6 @@
Dex beef noodles biochip personality Chiba post-uplink euro-pop sentient.
</p>
</div>
<img class="image-divider-right-image" itemprop="photo" src="{{ path '/assets/bg-images/general/visual-culture-02.jpg'}}" alt="INNOQ Mitarbeitende" />
<img class="image-divider-right-image" itemprop="photo" src="{{ path '/assets/bg-images/general/visual-culture-02.webp'}}" alt="INNOQ Mitarbeitende" />
</div>
</div>
4 changes: 2 additions & 2 deletions ...les/visual-elements/visual-divider/two-column-image-divider/two-column-image-divider.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<div class="two-column-image-divider">
<figure class="two-column-image-divider__left-image">
<img src="{{ path '/assets/bg-images/general/visual-trainings-03.jpg'}}" />
<img src="{{ path '/assets/bg-images/general/visual-trainings-03.webp'}}" />
</figure>
<figure class="two-column-image-divider__right-image">
<img src="{{ path '/assets/bg-images/general/visual-trainings-04.jpg'}}" />
<img src="{{ path '/assets/bg-images/general/visual-trainings-04.webp'}}" />
</figure>
</div>
Loading

0 comments on commit d30fe0f

Please sign in to comment.