14 bezpłatnych narzędzi do tworzenia obrazów i projektowania, które działają w Twojej przeglądarce

Praca wizerunkowa ma specyficzny problem: praca jest zwykle niewielka, a narzędzia, które oferuje, są ogromne. Musisz obciąć 400 KB obrazu bohatera, uzyskać wartość szesnastkową, o której wspomniał twój projektant, lub wygenerować favikonę, której nikt jeszcze nie stworzył. To nie wymaga subskrypcji.

Poniższe czternaście narzędzi obejmuje przygotowywanie obrazów, pracę z kolorami, generowanie efektów CSS i drobne zasoby produkcyjne, które wypadają z luk. Każdy działa lokalnie, co ma większe znaczenie w przypadku obrazów niż tekstu: zdjęcie, które właśnie skompresowałeś, często jest zdjęciem, którego jeszcze nie opublikowałeś.

Większość problemów z wizerunkiem to tak naprawdę problemy z wagą. Strona, która wydaje się powolna, zwykle zawiera obrazy większe niż rozmiar wyświetlacza, w złym formacie i przy ustawieniu jakości, którego nikt nigdy nie kwestionował.

Jak bardzo należy kompresować? Szczera odpowiedź brzmi: dopóki nie będzie wyglądać źle, wtedy cofnij się o krok. W przypadku fotograficznego obrazu bohatera jakość od 70 do 80 procent jest zwykle nie do odróżnienia od oryginału przy normalnym rozmiarze oglądania. W przypadku logo, zrzutu ekranu lub czegokolwiek o płaskich kolorach i ostrych krawędziach użyj formatu PNG i skompresuj mocniej — zyskują one więcej i tracą mniej.

Praktyczna zasada: wszystko poniżej 200 KB jest w porządku dla obrazu głównego, poniżej 80 KB dla miniatury, a jeśli nie możesz zejść poniżej 300 KB, prawdopodobnie masz problem z wymiarami, a nie z jakością.

Konwersja obrazu na identyfikator URI danych Base64 usuwa żądanie HTTP, co brzmi jak czysta wygrana. Zwykle tak nie jest. Zakodowany ciąg jest mniej więcej o jedną trzecią większy niż plik binarny, nie można go oddzielnie buforować i powoduje to rozdęcie kodu CSS lub HTML.

Wstawiany tylko wtedy, gdy obraz jest mały — poniżej kilku kilobajtów — używany tylko raz i krytyczny. Klasycznym przypadkiem jest mała ikona w pojedynczym szablonie wiadomości e-mail. W przypadku czegokolwiek, co powtarza się na stronach lub jest większe niż kilka kilobajtów, podaj to jako plik i pozwól przeglądarce buforować.

Wyjaśnij jasno, do czego to służy. Usuwa lub zakrywa widoczny znak. Nie może zrekonstruować leżących pod spodem pikseli — zamalowana informacja zniknęła i żaden filtr nie odtwarza jej ponownie. Wyniki mogą być niewidoczne, gdy znak znajduje się na gładkim tle, lub widoczne rozmazanie, gdy znak znajduje się na szczegółach.

Jeszcze jedną rzecz warto powiedzieć wyraźnie: usunięcie cudzego znaku wodnego i opublikowanie wyniku jest problemem związanym z prawami autorskimi w większości jurysdykcji i naruszeniem licencji, niezależnie od tego, czy zostaniesz złapany. To narzędzie służy do usuwania śladów z własnych obrazów lub z zasobów, na które posiadasz licencję.

Kolor to miejsce, w którym małe błędy stają się bardzo widoczne. Współczynnik kontrastu, który zawodzi przy dostępności, wartość szesnastkowa, która w rzeczywistości jest potrójną wartością HSL, paleta, która wygląda spójnie na monitorze i zabłocona na projektorze.

Jedno zastrzeżenie dotyczące narzędzi do kolorowania: wszystkie zakładają, że monitor jest skalibrowany i że osoba przeglądająca Twoją stronę ma sprawne oczy. Żadne założenie nie jest bezpieczne. To powód, dla którego wolimy kombinacje sprawdzone kontrastem od subiektywnych.

Ręczne pisanie gradientu lub cienia warstwowego jest naprawdę nieprzyjemnym zadaniem. Składnia jest skomplikowana, nie widać, co tworzysz, a różnica między dobrym cieniem a złym to kilka pikseli rozmycia.

Sztuką dla całej czwórki jest powściągliwość. Dwa cienie – ciasny, ciemny i szeroki, miękki – odczytywane są jako fizyczne uniesienie. Jeden cień brzmi jak strona internetowa sprzed piętnastu lat. Generuj, kopiuj, a następnie usuwaj, aż nie będziesz mógł stwierdzić, że tam jest.

Oto cała gromada wykonująca jedną prawdziwą pracę. Strona potrzebuje bohatera z obrazem tła, nagłówkiem i przyciskiem, a żaden z nich nie został jeszcze zbudowany.

Pięć narzędzi, brak pakietu projektowego, a każdy wynik to wartość, którą możesz wkleić bezpośrednio do kodu.

Czy moje obrazy są gdziekolwiek przesyłane? Nie. Kompresja, zmiana rozmiaru i konwersja Base64 odbywają się w Twojej przeglądarce i dlatego nie ma limitu rozmiaru pliku ani kolejki przesyłania.

Czy kompresja obrazu spowoduje utratę jakości? Z definicji zawsze. Pytanie czy to widać. Przy jakości wynoszącej 70–80 procent i prawidłowych wymiarach zwykle tak nie jest.

Dlaczego mój obraz o zmienionym rozmiarze nadal wygląda na duży? W dziewięciu przypadkach na dziesięć kompresowałeś przed zmianą rozmiaru lub zapisałeś jako PNG, gdy zdjęcie jest lepsze w formacie JPEG.

Czy mogę ich używać do pracy z klientem? Tak, bez podawania źródła i bez ograniczeń komercyjnych.

Czy działają na telefonie? Tak, chociaż zmiana rozmiaru i kompresja dużych zdjęć na telefonie zależy od pamięci urządzenia, a nie serwera.

Zmień rozmiar przed kompresją, sprawdź kontrast, zanim zaczniesz spierać się o kolor, staraj się zachować subtelne cienie i nigdy nie zapominaj o favikonie. W każdym razie to właśnie większość tego, co zrobił dla ciebie pakiet projektowy.