Kompresja i wstawianie obrazów

Dzisiaj powiem wam trochę o możliwości kompresji i wstawianiu obrazów jako HTML/CSS. Mam nadzieję że będzie przydatne i się spodoba o ile już nie znacie tych możliwości. Zaczynamy.

Trochę historii

Oczywiście nie mogłem sobie darować trochę wstępu historycznego bowiem takie po prostu same się proszą o przyzwanie.

Kompresja grafik

Dzisiaj w czasach kiedy mamy mnóstwo możliwości w tym mikro i makro serwisy a także naszego kochanego node.js, heroku itp.. to jest ogrom możliwości. Dlatego świetnym rozwiązaniem do kompresji naszych grafik i eksportowania ich choćby do nowoczesnego formatu (webp) jest imagemin , który pozwala na naprawdę wiele opcji i obsługę pluginów.

Instalacja:

npm install imagemin
npm install imagemin-webp

Użycie:

//CommonJS
const imagemin = require("imagemin");
const imageminWebp = require("imagemin-webp");

(async() => {
imagemin(["./assets/images/*.{jpg,png}"], {
  destination: "./assets/images/webp/",
  plugins: [
    imageminWebp({
    }),
  ],
}).then(() => {
  console.log("Images Converted Successfully!!!");
});
}

Teraz aby wstawić obraz można użyć tagu picture, zapewni nam to kompatybilność zarówno z nowymi jak i starymi przeglądarkami podając kilka źródeł bo występuje tam też tag img i pozwala to na przełączenie z choćby png/jpg na nowszy format webp aby skrócić czasy ładowania na stronach.

<picture>
    <!-- First Source -->
    <source srcset="/subdir/sourceA.webp"
            type="image/webp">
    <!-- Alternative Source -->
    <source srcset="/subdir/sourceB.png"
            type="image/png">
    <img src="/subdir/sourceB.png" alt="Finally image srcset and src failed" />
</picture>

Także istnieje możliwość osiągnięcia podobnego efektu drogą skryptową czyli za pomocą zdarzenia error dla elementu img. Wystarczy zadeklarować choćby stałe z alternatywnymi źródłami lecz wtedy należy mieć świadomość że przeglądarka musi mieć włączoną obsługę Javascript i stałe najlepiej używać choćby z użyciem Babel'a, inaczej var żeby zachować jak największą kompatybilność.

//Przykład
<script type="text/javascript">
window.addEventListener("load", function() {
var allImgsAlt = Array.prototype.slice.call(document.getElementsByClassName('imgalternate'));
for(var elInd in allImgsAlt) {
 allImgsAlt[elInd].addEventListener("error", evt=>{
  allImgsAlt[elInd].src = 
 });
}
});
</script>
<img class="imgalternate" src="some.png">