Ten kurs jest przeznaczony zarówno dla początkujących, jak i zaawansowanych programistów stron internetowych, i obejmuje wszystkie zagadnienia – od podstaw zapewniania sprawnego pobierania i renderowania źródeł obrazów po szczegóły na temat komunikacji między serwerem a klientem w popularnych formatach obrazów. W ramach tego kursu dowiesz się, jak uzyskać najmniejszy możliwy rozmiar przesyłanych zdjęć bez obniżania ich jakości, a przynajmniej nie w żaden sposób, który będzie widoczny dla wszystkich.
Możesz przejrzeć tę serię od początku do końca, aby całościowo zrozumieć, jak działają obrazy we współczesnym internecie, lub wykorzystać je jako źródło informacji o konkretnych koncepcjach i wzorcach znaczników, których będziesz używać na co dzień.
Jeśli jesteś nowym użytkownikiem stron internetowych, zapoznaj się z kursami Nauka HTML, w których znajdziesz podstawy używania znaczników, z kursów Naucz się CSS podstaw projektowania oraz Naucz się elastycznego projektowania stron, aby dowiedzieć się, jak będą renderowane obrazy w układach elastycznych.
Oto czego się nauczysz:
Krótka historia obrazów w internecie
Historia obrazów w internecie, począwszy od elementu graficznego w 1993 r.
Kluczowe problemy ze skutecznością
Dowiedz się, jak uzyskać jak najmniejszą wydajność żądań dotyczących obrazów.
Obrazy wektorowe
Dowiedz się więcej o SVG, czyli formacie wektorowym wykorzystywany w internecie.
Obrazy rastrowe
Odkrywaj obrazy rastrowe, takie jak JPEG, GIF, PNG i WebP.
Formaty obrazu: GIF
Poznaj format obrazu GIF i wyjaśnij, jak działa jego kodowanie.
Formaty obrazu: PNG
Dowiedz się, kiedy najlepiej wybrać format PNG.
Formaty obrazu: JPEG
Dowiedz się więcej o najpopularniejszym formacie obrazów w internecie.
Formaty obrazu: WebP
Dowiedz się więcej o WebP i dowiedz się, czym różni się ten format od innych.
Formaty obrazu: AVIF
Format pliku obrazu AV1 (AVIF) to kodowanie oparte na kodeku wideo typu open source AV1.
Obrazy elastyczne
Szczegółowe informacje o obrazach elastycznych
Składni opisowe
Użycie atrybutów srcset i sizes w celu przekazania przeglądarce informacji o źródłach obrazów i sposobie ich wykorzystania.
Składni z przepisami
Dowiedz się więcej o elemencie „obraz”.
Automatyzacja kompresji i kodowania
Generowanie bardzo wydajnych źródeł obrazów stanie się płynnym elementem procesu programowania.
Generatory witryn, platformy i systemy CMS
Dowiedz się, jak systemy CMS, takie jak WordPress, oraz inne generatory witryn mogą ułatwić korzystanie z elastycznych obrazów.
Sieci dostarczania treści graficznych
Dowiedz się, jak sieci CDN dotyczące obrazów mają możliwość przekształcania i optymalizowania zawartości obrazu.
Podsumowanie
Dodatkowe materiały.
Chcesz nauczyć się korzystać z Grafiki?