https://jak.mazovia.edu.pl/api.php?action=feedcontributions&feedformat=atom&user=ShayTramel 2026-10-23T06:31:29Z Wkład użytkownika MediaWiki 1.42.1 https://jak.mazovia.edu.pl/index.php?title=Gdy_na_kraw%C4%99dziach_wida%C4%87_piksele,_sprawd%C5%BA_kompresj%C4%99_obrazu&diff=1118847 2026-10-19T09:54:32Z

<p>ShayTramel: Utworzono nową stronę &quot;Uważaj też na flex-shrink. Domyślnie wynosi 1, więc gdy elementy nie mieszczą się w kontenerze, kurczą się proporcjonalnie, zanim flex-grow w ogóle zacznie działać. Jeśli chcesz, aby nadmiar był dzielony bez kurczenia, ustaw flex-shrink: 0 i pozwól, by elementy wychodziły poza kontener albo się zawijały. Pamiętaj, że flex-grow działa tylko wtedy, gdy w kontenerze jest wolne miejsce — przy przepełnieniu nie ma czego dzielić.&lt;br&gt;&lt;br&gt;Artefakty…&quot;</p> <hr /> <div>Uważaj też na flex-shrink. Domyślnie wynosi 1, więc gdy elementy nie mieszczą się w kontenerze, kurczą się proporcjonalnie, zanim flex-grow w ogóle zacznie działać. Jeśli chcesz, aby nadmiar był dzielony bez kurczenia, ustaw flex-shrink: 0 i pozwól, by elementy wychodziły poza kontener albo się zawijały. Pamiętaj, że flex-grow działa tylko wtedy, gdy w kontenerze jest wolne miejsce — przy przepełnieniu nie ma czego dzielić.&lt;br&gt;&lt;br&gt;Artefakty na krawędziach to najczęstszy objaw zbyt agresywnej kompresji stratnej. Widać je jako rozmyte kontury, podwójne linie, kolorowe obwódki albo charakterystyczne „schodki&quot; na granicy jasnego i ciemnego obszaru. Problem nie bierze się z samego formatu, ale z tego, jak algorytm redukuje dane. JPEG dzieli obraz na bloki 8×8 pikseli i w każdym z nich osobno usuwa część informacji o wysokich częstotliwościach. Krawędź to właśnie nagła zmiana częstotliwości, więc najłatwiej ją zepsuć.&lt;br&gt;&lt;br&gt;Gdzie postawić header, a gdzie nav header to nie synonim górnego paska. To wprowadzenie do najbliższego kontekstu — może być nagłówkiem całej strony, ale też pojedynczego artykułu czy sekcji. W nagłówku strony zwykle ląduje logo, nazwa serwisu i główne menu. W nagłówku artykułu — tytuł, autor i data. Możesz mieć wiele elementów header w dokumencie, byle każdy należał do innego bloku. nav z kolei opisuje zbiór linków nawigacyjnych. Nie każdy zestaw odnośników to nawigacja: linki w stopce albo w akapicie nie muszą być w nav. Używaj go dla menu głównego, bocznego, breadcrumbów i spisu treści. Jeśli na stronie jest kilka nawigacji, rozróżnij je atrybutem aria-label, np. „menu główne&quot; i „menu boczne&quot;.&lt;br&gt;&lt;br&gt;Mechanizm jest prosty: każdy element dostaje część wolnej przestrzeni równą swojemu flex-grow podzielonemu przez sumę flex-grow wszystkich elementów. Przy wartościach 1, 2 i 1 element środkowy otrzyma połowę wolnej przestrzeni, a skrajne po jednej czwartej. W praktyce nie oznacza to, że środkowy będzie dwa razy szerszy od pozostałych — będzie szerszy tylko o przydzieloną resztę, czyli np. o 150 px zamiast o 75 px.&lt;br&gt;&lt;br&gt;Gdzie najczęściej popełnia się błąd Pierwszy typowy problem to brak zdefiniowanego flex-basis. Gdy go pominiesz, przeglądarka przyjmuje zawartość elementu jako podstawę, a wtedy podział wolnej przestrzeni bywa nieprzewidywalny. Ustaw flex-basis jawnie, choćby na 0, jeśli chcesz, aby proporcje wynikały wyłącznie z flex-grow. Drugi błąd to dodanie flex-grow do elementów, które mają sztywne width. Wartość width nadal działa jako ograniczenie, ale może zablokować rozciąganie i wolna przestrzeń zostanie niewykorzystana.&lt;br&gt;&lt;br&gt;Kolejna pułapka to kontener bez zdefiniowanej szerokości. Element flex z flex-basis: 25% wewnątrz kontenera, który sam rozmiar bierze z treści, może rozepchnąć rodzica zamiast się do niego dopasować. Dotyczy to zwłaszcza sytuacji, gdy rodzic jest elementem inline lub ma position: absolute bez ustawionych wymiarów. Wtedy procent staje się wartością względną wobec czegoś, czego w praktyce nie ma. Najprostsze rozwiązanie: nadaj rodzicowi display: flex i wymuś jego szerokość przez width, max-width lub logiczne wypełnienie dostępnej przestrzeni.&lt;br&gt;&lt;br&gt;Zacznij od main. To najważniejszy element całej struktury, bo wskazuje unikalną treść danej podstrony. Na jednej stronie może wystąpić tylko raz i nie powinien zawierać się w header, footer ani nav. Wszystko, co powtarza się na każdej podstronie — logo, menu, stopka — zostaje poza nim. Typowy błąd polega na tym, że ktoś wrzuca do main pasek boczny z reklamami albo zostawia go pustego, a treść wkleja do zwykłego div. Efekt jest taki, że czytnik ekranu nie ma czego pominąć, więc użytkownik przekopuje się przez nawigację przy każdym wejściu.&lt;br&gt;&lt;br&gt;Kaskada to mechanizm, w którym przeglądarka zbiera wszystkie reguły pasujące do danego elementu, a potem rozstrzyga, która z nich ma największą moc. W praktyce najczęściej wygrywa ta, która pojawia się później w źródle — ale tylko wtedy, gdy pozostałe warunki są równe. Jeśli dwie reguły mają identyczną specyficzność i obie pasują do tego samego elementu, późniejsza po prostu nadpisuje wcześniejszą. To nie jest błąd ani widzimisię przeglądarki, tylko celowa zasada, która pozwala nadpisywać style bez zmiany selektorów.&lt;br&gt;&lt;br&gt;Jak zmniejszyć widoczność artefaktów bez utraty jakości Regulacja jakości to nie jedyne pokrętło. Warto zwiększyć rozdzielczość zapisu, jeśli obraz i tak będzie wyświetlany mniejszy. Kompresja stratna działa na pikselach, więc zapisanie większej liczby pikseli przy tej samej jakości często daje lepszy wynik po zmniejszeniu. Drugi sposób to zapis w formacie bezstratnym, np. PNG, gdy obraz zawiera ostre krawędzie, tekst lub cienkie linie. Jeśli musisz użyć JPEG, ustaw jakość na 85–95 i sprawdź podgląd przy powiększeniu 200–400%. Nie kieruj się rozmiarem pliku jako jedynym kryterium — liczy się to, co widać na krawędziach.</div>

ShayTramel https://jak.mazovia.edu.pl/index.php?title=U%C5%BCytkownik:ShayTramel&diff=1118845 2026-10-19T09:54:31Z

<p>ShayTramel: Utworzono nową stronę &quot;Pasjonat praktycznego designu na co dzień. Dzielę się tym, jak łączyć wygodę z ładnym wnętrzem. Najbardziej lubię pomysły, które nie rujnują budżetu.&quot;</p> <hr /> <div>Pasjonat praktycznego designu na co dzień. Dzielę się tym, jak łączyć wygodę z ładnym wnętrzem. Najbardziej lubię pomysły, które nie rujnują budżetu.</div>

ShayTramel