PNG czy JPG: przezroczystość kontra kompresja zdjęć

Osobna sprawa to sytuacje, gdy obraz ma podpis widoczny obok. Wtedy alt nie powinien powtarzać tej samej treści — wystarczy krótki opis lub pusty alt, metamorfoza mieszkania jeśli podpis w pełni wyjaśnia kontekst. Powielanie informacji męczy i wprowadza chaos. Podobnie przy złożonych infografikach: sam alt nie pomieści szczegółów, więc dobrze jest opisać najważniejszy wniosek, a pełne dane umieścić w tekście obok.

Praktyczna zasada przy eksporcie: jeśli obraz zawiera tekst, cienkie linie, ikony albo wymaga przezroczystości — wybierz PNG. Jeśli to zdjęcie, skan lub grafika o miękkich przejściach i nie potrzebujesz kanału alfa — wybierz JPG i ustaw jakość w granicach, w których artefakty nie rzucają się w oczy. Warto zapisać kopię roboczą w formacie bezstratnym i dopiero z niej generować wersje publikowane, żeby nie kompresować tego samego pliku w kółko. Każde kolejne zapisanie JPG pogarsza jakość nieodwracalnie.

PNG to format bezstratny. Każdy piksel zapisuje dokładnie tak, jak wygląda, a kanał alfa pozwala przypisać mu poziom przezroczystości od zera do pełnego krycia. Dzięki temu idealnie nadaje się do logotypów, ikon, przycisków, wykresów i wszelkich grafik z ostrymi krawędziami oraz jednolitymi płaszczyznami koloru. Wadą jest rozmiar: przy zdjęciu PNG potrafi być kilkanaście razy cięższy od JPG, bo nie pozbywa się informacji, które oko i tak słabo wychwytuje.

Atrybut alt to tekst, który zastępuje obraz, gdy ten nie może zostać wyświetlony. For those who have virtually any issues about wherever and also the way to use Metamorfoza Mieszkania, it is possible to e mail us with our web site. Trafia do czytników ekranu, wyszukiwarek i zwykłych przeglądarek, gdy plik nie istnieje albo połączenie jest zbyt wolne. Dobrze napisany alt nie opisuje obrazka dla estetyki — opisuje jego funkcję w danym miejscu. To rozróżnienie jest kluczowe, bo od niego zależy, czy treść będzie zrozumiała dla kogoś, kto obrazu nie widzi.

Dlaczego strona wygląda inaczej niż powin

Na koniec testuj przy realnie wąskich szerokościach, nie tylko w widoku desktopowym. Zmniejsz okno do momentu, w którym układ pęka, i sprawdź, który element jako pierwszy przekracza granicę. Najczęściej to ten z długim, nieprzerywalnym tekstem. Poprawka sprowadza się do trzech deklaracji: min-width: 0, overflow-wrap oraz świadomego flex-basis. Bez nich flex-grow większy od zera będzie działał tylko wtedy, gdy miejsca jest pod dostatkiem.

Flex-basis w procentach liczy się zawsze od rozmiaru kontenera rodzica wzdłuż osi głównej, a nie od szerokości samego elementu. Jeśli flex-direction to row, wartość procentowa odnosi się do szerokości rodzica; jeśli column — do jego wysokości. To pierwsza rzecz, która psuje układy, bo autorzy zakładają, że elementy podzielą się równo, a tymczasem jeden z nich dostaje bazę liczoną od zupełnie innej płaszczyzny.

Drugi częsty błąd to mieszanie flex-grow z ustaloną szerokością. Jeśli element ma width: 300px i flex-grow: 1, to przy wąskim kontenerze wartość width staje się punktem odniesienia, a grow działa tylko na resztce miejsca. Efekt bywa odwrotny do zamierzonego: element rośnie wolniej niż sąsiad bez width. Lepiej używać flex-basis zamiast width, https://Lebenskunst.berlin bo basis jest traktowana jako punkt startowy do podziału przestrzeni, a nie sztywne ograniczenie.

Jak napisać alt, który naprawdę działa Zacznij od pytania: po co ten obraz tutaj jest? Jeśli przekazuje informację, alt musi ją oddać w zwięzłej formie. Jeśli obraz jest wyłącznie ozdobny — kropka, tło, separator — zostaw atrybut pusty: alt="". Pusty alt mówi czytnikowi ekranu, żeby pominął element, natomiast brak atrybutu w ogóle powoduje, że czytnik odczyta nazwę pliku, np. „obrazek 1234 jpg". To jedna z najczęstszych wpadek na stronach.

Wybór formatu pliku graficznego sprowadza się do jednego pytania: czy obraz ma mieć przezroczyste tło, czy ma być zdjęciem. Odpowiedź determinuje wszystko — jakość, rozmiar i to, jak plik zachowa się w druku oraz na stronie. Mylenie tych dwóch zastosowań to najczęstszy błąd, który kończy się rozmytymi krawędziami albo plikiem ważącym kilka megabajtów bez potrzeby.

Kiedy przezroczystość jest konieczna, a kiedy tylko przeszkadza Jeżeli grafika ma leżeć na kolorowym tle, na zdjęciu lub na innym elemencie strony, potrzebny jest PNG. JPG zawsze wypełnia tło jednolitym kolorem — najczęściej białym — więc wklejony na inny kolor pokaże brzydką prostokątną ramkę. Uwaga na półprzezroczystość: delikatne cienie i rozmyte krawędzie w PNG wyglądają dobrze, ale gdy zapiszesz taki plik jako JPG, program „domyśli się" tła i najczęściej wyjdzie z tego biała obwódka. To typowy błąd przy eksporcie logotypów.

Gdy w arkuszu stylów pojawia się font-family, przeglądarka nie szuka jednej czcionki, lecz przechodzi przez listę nazw od lewej do prawej. Pierwsza dostępna w systemie zostaje użyta; pozostałe tworzą stos czcionek zapasowych. Wartość font-family to nie „czcionka", ale zapytanie do systemu operacyjnego o konkretną rodzinę. Jeśli nazwa jest nieznana, przeglądarka idzie dalej. Świadome budowanie tej listy decyduje o tym, czy tekst w ogóle się pokaże, czy zniknie z powodu błędu w nazwie lub nieobsługiwanego formatu pliku.