Optymalizacja obrazów z Canvy na stronę internetową: eksport i kompresja

Sprawdź ustawienia pobierania w Canvie

Dla zwykłego pobrania wybierz Udostępnij → Pobierz, a następnie JPG dla zdjęcia lub PNG dla tekstu i grafiki. Wybierz stronę i pobierz ją. Sprawdź zapisane wymiary. Jeśli konto nie ma ustawień rozmiaru lub jakości, możesz później zmniejszyć lub skompresować kopię.

Jeśli opcja Ogranicz rozmiar jest dostępna, Canva obsługuje ją obecnie przy eksporcie jednej strony do JPG lub PNG. Według dokumentacji złożone projekty mogą mimo to przekroczyć wybrany limit. Samodzielnie sprawdź zapisany plik.

Zachowaj wyraźny eksport z Canvy przed próbami tworzenia mniejszych wersji. Obniżenie jakości JPG w Canvie, a potem ponowna kompresja lub konwersja może dwa razy usunąć szczegóły. Twórz każdą wersję z tego samego eksportu dobrej jakości, by rzetelnie je porównać.

Do obrazu na stronie użyj formatu graficznego. PDF do druku służy do drukowania, nie do umieszczania zwykłego obrazu na stronie. Opcja brzmiąca jak lepsza jakość nie musi być odpowiednia. Sprawdź wymiary, wygląd i plik rzeczywiście ładowany przez stronę.

Ustal, gdzie pojawi się obraz z Canvy

Baner na całą szerokość, miniatura bloga i małe logo mają różne wymagania. Przed eksportem otwórz stronę docelową i sprawdź szerokość wyświetlania, kształt oraz tło. Kwadratowy post do mediów społecznościowych nie zawsze pasuje do szerokiego nagłówka strony.

Zapisz trzy rzeczy: przybliżoną szerokość wyświetlania, potrzebę przezroczystości i to, co czytelnik musi rozpoznać. Na banerze może to być produkt i krótki napis, a na diagramie każde słowo i linia. Dzięki temu ocenisz nie tylko rozmiar pliku.

Jeśli projekt zawiera nagłówek, akapit lub przycisk, rozważ dodanie ich bezpośrednio na stronie. Tekst w PNG lub JPG jest częścią obrazu i nie może zmienić podziału na wiersze na węższym ekranie. Przycisk narysowany w Canvie też jest tylko obrazem, dopóki nie dodasz do niego działającego linku na stronie. W miarę możliwości używaj obrazu jako ilustracji, a ważne teksty i przyciski umieszczaj na stronie.

Wybierz JPG, PNG lub SVG do swojego projektu

Canva oferuje eksport JPG, PNG i SVG do różnych zastosowań. Aktualne opcje znajdziesz w jej przewodniku po formatach pobierania. Tabela pomaga porównać własne pliki; żaden format nie jest zawsze najlepszy.

JPG zmniejsza plik, usuwając część szczegółów obrazu. To kompresja stratna. Często dobrze sprawdza się przy zdjęciach, ale może rozmywać krawędzie lub zostawiać ślady wokół liter. PNG unika takich zniekształceń, choć zdjęcie zapisane w PNG może zajmować znacznie więcej miejsca. Żaden z tych formatów nie usuwa rozmycia obecnego już w projekcie.

SVG opisuje kształty i linie, które pozostają ostre po powiększeniu. Zdjęcie umieszczone w SVG nadal jest jednak zdjęciem: taki eksport nie dodaje mu szczegółów. Plik może też pozostać duży, jeśli zawiera fotografie. Kompresor Pixilo nie przyjmuje SVG. Jeśli strona obsługuje ten plik i poprawnie go wyświetla, możesz użyć go bezpośrednio.

Po pobraniu możesz też wypróbować WebP. Użyj PNG → WebP do grafiki PNG albo JPG → WebP do zdjęcia JPG. Porównaj wynik z eksportem z Canvy. Jeśli plik jest większy lub tekst wygląda gorzej, zachowaj pierwotny eksport. Nasz przewodnik po formatach obrazów na stronach wyjaśnia zastosowania poszczególnych formatów.

Dobierz wymiary w pikselach do strony

Sprawdź największą szerokość, z jaką obraz pojawi się na stronie. Jeśli baner ma 800 pikseli szerokości, porównaj wersje o szerokości 800 i 1600 pikseli na telefonie lub laptopie z ekranem o wysokiej rozdzielczości. Dodatkowe piksele mogą pokazać więcej szczegółów, ale zwiększają ilość pobieranych danych. Porównaj obie wersje zamiast automatycznie podwajać wymiary każdego obrazu.

Zachowaj proporcje szerokości i wysokości. Obszar 800 × 450 ma proporcje 16:9, tak samo jak obraz 1600 × 900. Kwadrat 1600 × 1600 wymaga przycięcia albo innego układu. Jeśli nagłówek na telefonie jest znacznie wyższy, dostosuj projekt, żeby ważne elementy nie zostały obcięte po bokach.

Strona może dostarczać mniejsze pliki telefonom, a większe dużym ekranom. To obrazy responsywne. Wgranie jednego dużego obrazu nie wystarczy: strona musi utworzyć lub udostępnić wersje i wybrać plik do załadowania. Sprawdź, co robi już kreator strony, zanim przygotujesz wiele kopii. Więcej znajdziesz w naszym przewodniku po obrazach responsywnych oraz w wyjaśnieniu MDN dotyczącym obrazów responsywnych.

Sprawdź wymiary pobranego pliku, nie tylko rozmiar widoczny w edytorze Canvy. Jeśli nie możesz zmienić rozmiaru pobierania, zacznij od projektu zbliżonego do potrzebnych wymiarów i oceń wynik. Użyj narzędzia Pixilo do zmiany rozmiaru, żeby zmniejszyć zbyt duży obraz. Powiększenie małego JPG lub PNG nie przywraca brakujących szczegółów.

Pobierz grafikę z przezroczystym tłem

Niektóre opcje pobierania, w tym przezroczysty PNG, wymagają odpowiedniego planu Canva. Jeśli brakuje opcji, sprawdź powiązaną pomoc dla konta. Nadal możesz zoptymalizować zwykły plik JPG lub PNG.

Przeglądarka obrazów może wyświetlać przezroczystą grafikę na białym tle. Biały podgląd sam w sobie nie mówi więc, czy tło jest przezroczyste. Sprawdź obraz na jasnym i ciemnym tle, zwracając uwagę na krawędzie i cienie.

Konwersja JPG do PNG nie usuwa tła. Jeśli zdjęcie w projekcie zawiera biały prostokąt za obiektem, wybór PNG go nie usunie. Pozbądź się niechcianego tła w projekcie przed pobraniem.

Jeśli grafika zawsze będzie na tym samym jednolitym tle, przezroczystość może nie być potrzebna. Zachowaj osobno przezroczystą wersję do innych zastosowań. Nasz przewodnik po czarnych i białych tłach pomaga ustalić, czy tło jest częścią pliku, czy tylko aplikacji wyświetlającej obraz.

instrukcję Canvy dotyczącą przezroczystego eksportu

Skompresuj eksport z Canvy w Pixilo

Gdy wymiary i układ są odpowiednie, otwórz kompresor obrazów. Możesz dodać do 20 plików JPG, PNG lub WebP, każdy do 25 MB. Pixilo przetwarza je kolejno na twoim urządzeniu i zachowuje format, szerokość oraz wysokość. Żaden bok nie może przekraczać 8000 pikseli, a cały obraz 32 milionów pikseli. Na przykład 8000 × 4000 spełnia oba warunki, ale 8000 × 8000 nie.

Kompresja PNG jest bezstratna: piksele i kolory się nie zmieniają. PNG już dobrze skompresowany przez Canvę może zmniejszyć się tylko trochę. Kompresja JPG i WebP może zmieniać drobne szczegóły, więc sprawdź wynik. Jeśli nowy plik nie jest mniejszy, Pixilo zachowuje oryginał.

Do zmiany formatu użyj konwertera. Kompresor na stronie głównej pozostawia PNG jako PNG. W narzędziach PNG → WebP i JPG → WebP możesz po dodaniu obrazu dostosować jakość, a następnie wybrać Aktualizuj wyniki, żeby zastosować zmianę. Obrazy szersze lub wyższe niż 4000 pikseli są zmniejszane proporcjonalnie, tak aby najdłuższy bok miał 4000 pikseli. Przy bardzo dużym projekcie sprawdź pobrane wymiary.

Jeśli formularz narzuca ścisły limit rozmiaru pliku, wypróbuj Kompresję do docelowego rozmiaru. Wybierz akceptowany format i sprawdź minimalną szerokość oraz wysokość. Nie zawsze da się uzyskać bardzo mały plik bez pogorszenia czytelności tekstu lub szczegółów. Sprawdź wszystkie wymagania, nie tylko rozmiar pliku.

Przykład: przygotowanie banera z Canvy do artykułu

Załóżmy, że artykuł potrzebuje banera wyświetlanego w rozmiarze maksymalnie 800 × 450 pikseli. Projekt łączy zdjęcie z krótkim napisem. To przykładowe wymiary do planowania, a nie wyniki testu kompresji.

1. Przygotuj kompozycję. Użyj proporcji 16:9 i zachowaj główny obiekt w obszarze widocznym na komputerze oraz telefonie. Tytuł artykułu dodaj do strony zamiast powtarzać długi nagłówek w obrazie.
2. Pobierz dwie wersje. Jeśli to możliwe, wyeksportuj JPG i PNG o wymiarach 1600 × 900 z tego samego projektu. Otwórz oba pliki i sprawdź krótki napis. Eksportuj bezpośrednio z Canvy, nie z już skompresowanej kopii.
3. Porównaj kompresję. Przetestuj kompresor ze strony głównej na wybranym eksporcie. Jeśli strona obsługuje WebP, sprawdź także kopię PNG w tym formacie. Nadaj plikom różne nazwy, żeby porównywać właściwe wersje.
4. Sprawdź na komputerze i telefonie. Obejrzyj baner przy 800 × 450 i przy szerokości używanej na telefonie. Tekst powinien być czytelny bez powiększania. Jeśli jest za mały, uprość projekt lub przenieś tekst na stronę zamiast mocniej kompresować.
5. Opublikuj wybraną wersję. Sprawdź plik rzeczywiście ładowany przez stronę, jego rozmiar i przycięcie. Jeśli strona automatycznie tworzy mniejsze wersje, obejrzyj je przed zmianą pozostałych obrazów.

Zapisz wymiary i format, które sprawdziły się w tym miejscu. Używaj ich jako punktu wyjścia przy podobnych projektach, ale sprawdzaj każdy wynik. Prosta ilustracja i zdjęcie z drobnymi teksturami mogą potrzebować różnych ustawień mimo tych samych wymiarów.

Popraw rozmyty tekst lub niespodziewanie duże pliki

Pobrany projekt już jest rozmyty

Otwórz plik z Canvy przed kompresją. Jeśli już jest rozmyty, wróć do projektu i sprawdź oryginalne zdjęcie, wielkość tekstu i pobrane wymiary. W poradach Canvy dotyczących rozmytych plików opisano typowe przyczyny. Kompresja nie naprawi nieostrego zdjęcia ani tekstu zapisanego w zbyt małym obrazie.

Plik jest wyraźny na urządzeniu, ale rozmyty na stronie

Strona może rozciągać małą miniaturę, ponownie kompresować obraz albo pokazywać starszą wersję. Otwórz opublikowany obraz w nowej karcie, jeśli przeglądarka na to pozwala, i sprawdź wymiary. W razie potrzeby znajdź właściwy plik w narzędziach deweloperskich. Większy eksport z Canvy nie pomoże, jeśli strona nadal ładuje miniaturę.

PNG prawie się nie zmniejsza

Bez zmiany obrazu można usunąć tylko ograniczoną ilość danych. PNG ze zdjęciem lub szczegółową teksturą może pozostać duży, zwłaszcza jeśli jest już dobrze skompresowany. Wypróbuj JPG, gdy nie potrzebujesz przezroczystości. WebP też ją obsługuje, ale po konwersji sprawdź tekst i krawędzie. Zachowaj PNG, jeśli wygląda lepiej, albo zmniejsz wymiary tylko wtedy, gdy obraz pozostaje wyraźny.

Projekt wygląda gorzej po dwóch konwersjach

Wróć do eksportu z Canvy dobrej jakości. Unikaj wielokrotnych konwersji JPG → WebP → JPG. Każdy zapis stratny może powodować kolejne uszkodzenia; ostatnia konwersja nie cofa poprzednich. Twórz wszystkie wersje z tego samego źródła i porównuj je bezpośrednio z nim.

Sprawdź opublikowaną stronę, nie tylko plik

• Sprawdź załadowany obraz. Strona powinna pokazywać nowy plik lub odpowiednią wersję utworzoną przez witrynę, a nie starą czy niepotrzebnie dużą kopię.
• Sprawdź przycięcie na telefonie. Zachowaj widoczność obiektu i nie umieszczaj ważnych napisów przy krawędziach, które układ może zasłonić.
• Ważne informacje dodaj jako zwykły tekst na stronie. Czytelnik nie powinien powiększać obrazu, żeby odczytać jedyną cenę, instrukcję czy wezwanie do działania.
• Opisz obrazy przekazujące informacje. Dodaj tekst alternatywny: krótki opis dla osób, które nie widzą obrazu. Wyjaśnij, co jest ważne w kontekście tej strony. Obrazy czysto dekoracyjne zwykle wymagają pustego tekstu alternatywnego. Stosuj się do wskazówek Google dotyczących SEO obrazów, ale nie wypełniaj opisów słowami kluczowymi.
• Sprawdź ładowanie strony. Mniejszy plik pomaga, ale liczy się też moment rozpoczęcia pobierania. Przeczytaj przewodnik o obrazach i Core Web Vitals, jeśli główny obraz nadal pojawia się późno.

Często zadawane pytania

Czy zawsze pobierać projekty z Canvy jako PNG?

Nie. Wypróbuj PNG dla przezroczystej grafiki i wyraźnego tekstu, a JPG dla zdjęć bez przezroczystości. Porównuj pliki w rzeczywistym rozmiarze na stronie zamiast używać jednego formatu do wszystkiego.

Czy mogę optymalizować obrazy z Canvy bez płatnych ustawień eksportu?

Tak. Pobierz dostępny JPG lub PNG, sprawdź wymiary i zmień rozmiar, skompresuj lub skonwertuj kopię w Pixilo. Nie odblokuje to płatnych funkcji Canvy ani nie doda przezroczystości, której nie ma w źródle.

Czy eksport w podwójnym rozmiarze zawsze poprawia obraz?

Nie. Większa wersja może wyglądać ostrzej na ekranie o wysokiej rozdzielczości, ale nie naprawi małego lub rozmytego zdjęcia w projekcie. Porównaj obie na stronie i użyj większej tylko wtedy, gdy przynosi widoczną korzyść.

Czy obrazy na stronach wymagają konkretnego ustawienia DPI?

Skup się na szerokości i wysokości w pikselach oraz wielkości wyświetlania. Sama zmiana liczby DPI nie dodaje szczegółów. Nasz przewodnik po DPI, PPI i pikselach wyjaśnia różnice między stroną internetową a drukiem.

Czy WebP gwarantuje lepsze pozycje w wyszukiwarce?

Nie. Zmiana formatu nie gwarantuje pozycji. Przydatny obraz, zrozumiała treść wokół niego, odpowiednie opisy i sprawna strona są lepszym celem niż wybieranie rozszerzenia dla niego samego.