5 zasad wyboru formatu pliku dla ikony, zdjęcia i wykresu

Podsumowując: przerwa między inline-block to nie błąd, tylko skutek obecności białego znaku w HTML. Świadome zarządzanie spacjami, komentarzami albo rozmiarem czcionki pozwala ją usunąć. Jeśli jednak projekt rośnie, przejście na flexbox oszczędza czas i nerwy, bo problem znika u samego źródła.

Lista to nie ozdoba tekstu, lecz narzędzie porządkowania informacji. Sięgamy po nią wtedy, gdy czytelnik musi coś policzyć, zapamiętać albo porównać. Jeśli treść da się opowiedzieć płynnym zdaniem, lista zwykle tylko ją rozbija. Pierwszy odruch przed wyborem rodzaju listy powinien być taki: sprawdź, czy elementy mają tę samą wagę i czy ich kolejność coś znaczy.

Na koniec rzecz o długości. Lista dłuższa niż siedem punktów przestaje porządkować, a zaczyna męczyć. Podziel ją wtedy na mniejsze bloki z własnymi śródtytułami. Interpunkcja też ma znaczenie: po punktach będących równoważnikami zdania nie stawiamy kropki, a po pełnych zdaniach — tak. Spójność w tym zakresie robi więcej dla czytelności niż kolorowe ikony i pogrubienia.

Najczęstsze błędy to jeden format do wszystkiego, skalowanie rastrowego pliku w górę oraz zapominanie o przezroczystości i rozmiarze docelowym. Zanim zapiszesz plik, zadaj sobie trzy pytania: czy obraz ma być ostry przy powiększeniu, czy potrzebuje przezroczystego tła i czy zawiera dużo płynnych przejść tonalnych. Odpowiedzi wskażą format szybciej niż jakiekolwiek porównywanie parametrów w edytorze.

Zacznij od pytania, czy obraz zawiera dużo kolorów przechodzących płynnie w siebie. Zdjęcia i fotorealistyczne renderowania niemal zawsze wymagają formatu z kompresją stratną, takiego jak JPEG. Ikony, schematy i wykresy składają się z ostrych krawędzi, jednolitych plam i cienkich linii — tu JPEG wypada źle, bo rozmywa kontury i tworzy szum wokół liter oraz osi. W takich przypadkach wybieraj formaty bezstratne: PNG dla grafiki z przezroczystością, a przy prostych ikonach jednokolorowych warto rozważyć SVG, czyli zapis wektorowy.

Wykres jest najbardziej zdradliwy. Eksport z arkusza czy programu statystycznego często domyślnie zapisuje JPEG, który rozmywa cienkie linie siatki i pogrubia osie. Wybierz PNG albo SVG. SVG dodatkowo pozwala powiększyć wykres w prezentacji bez utraty jakości i łatwo zmienić kolory. Ustaw rozdzielczość eksportu na co najmniej dwukrotność docelowego rozmiaru wyświetlania, aby wykres był ostry na ekranach o wysokiej gęstości pikseli. Nie zapisuj wykresu jako przezroczystego, jeśli tło slajdu bywa jasne i ciemne — brak kontrastu między opisami a tłem zniszczy czytelność.

Zacznij od powiększenia newralgicznych miejsc – np. w edytorze grafiki ustaw widok na 400–800%. Jeśli widzisz rozmyte, poszarpane lub „wyprane" kontury, to znak, że kompresja była za silna. W przypadku plików JPEG sprawdź, czy nie są zapisane z jakością poniżej 80. Dla grafiki z tekstem lub cienkimi liniami użyj formatów bezstratnych: PNG lub WebP w trybie bezstratnym. Jeśli musisz użyć JPEG, zapisz obraz z maksymalną jakością (95–100) i nie otwieraj go ponownie do edycji – pracuj na pliku źródłowym (np. PSD, TIFF) i eksportuj dopiero na końcu.

Największy problem pojawia się, gdy lista udaje akapit. Pięć krótkich punktów zamiast jednego zdania to czytelnicza zgadywanka. Zanim cokolwiek wypunktujesz, zapisz to jako zwykłe zdanie. Jeśli brzmi naturalnie, zostaw akapit. Jeśli się gubi, podziel treść na punkty. Trzymaj też jedną zasadę: lista musi mieć wprowadzenie w zdaniu poprzedzającym — czytelnik powinien wiedzieć, czego dotyczy wyliczenie, zanim do niego dotrze.

Punktowana lista równych rzeczy Lista punktowana sprawdza się przy wyliczaniu cech, składników, zalet i wad, przykładów. Każdy punkt powinien być zbudowany podobnie: zaczynać się od czasownika albo rzeczownika, mieć zbliżoną długość i kończyć się spójnie. Mieszanie pełnych zdań z równoważnikami rozsypuje rytm. Drugi częsty błąd to zagnieżdżanie listy w liście bez potrzeby — dwa poziomy to maksimum, a trzeci poziom prawie zawsze oznacza, że treść wymaga innego podziału.

Uważaj na pułapki. Przy font-size: 0 znikają też odstępy między wyrazami w elemencie nadrzędnym, jeśli zapomnisz przywrócić rozmiar w dzieciach. Z kolei usuwanie spacji z HTML psuje czytelność i utrudnia pracę w zespołach, gdzie ktoś formatuje plik automatycznie. Komentarze działają, ale bywają kłopotliwe przy dynamicznym generowaniu znaczników. Żadna z tych metod nie jest zła — ważne, żeby wybrać jedną i trzymać się jej konsekwentnie w całym projekcie.

Większość stron internetowych zbudowana jest na podobnym szkielecie: nagłówek, treść główna, nawigacja i stopka. Można je opisać za pomocą zwykłych divów, ale wtedy zarówno przeglądarki, jak i roboty wyszukiwarek muszą się domyślać, co jest czym. Znaczniki semantyczne — header, nav, main, footer — robią to samo, tylko jawnie. Dzięki nim struktura strony jest zrozumiała bez zaglądania w klasy CSS czy identyfikatory.