--- url: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/obraz' title: 'Dodawanie obrazu | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T01:35:09+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Dodaj zdjęcie albo ilustrację, która wypełnia kolumnę i skaluje się do ekranu. Dodaj obraz Otwórz swoją stronę po zalogowaniu: przyciski kreatora pojawiają się po najechaniu na obszar treści. Twoja pierwsza strona przedstawia podstawy. tags: - 'Text and media' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Dodawanie obrazu' description: |- Dodaj zdjęcie albo ilustrację, która wypełnia kolumnę i skaluje się do ekranu. Dodaj obraz Otwórz swoją stronę po zalogowaniu: przyciski kreatora pojawiają się po najechaniu na obszar treści. Twoja pierwsza strona przedstawia podstawy. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T01:35:09+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/obraz' articleSection: 'Tekst i media' - '@type': WebPage '@id': 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/obraz' description: |- Dodaj zdjęcie albo ilustrację, która wypełnia kolumnę i skaluje się do ekranu. Dodaj obraz Otwórz swoją stronę po zalogowaniu: przyciski kreatora pojawiają się po najechaniu na obszar treści. Twoja pierwsza strona przedstawia podstawy. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 'Strona Główna' item: 'https://dxpr.com/pl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: pl --- [Centrum pomocy](/pl/hc)/[Dokumentacja](/pl/hc/dokumentacja) /[Poznaj DXPR Builder](/pl/hc/documentation/learn-dxpr-builder) /[Buduj strony](/pl/hc/documentation/learn-dxpr-builder/build) /[Dodaj treści](/pl/hc/documentation/learn-dxpr-builder/elements) /[Tekst i media](/pl/hc/documentation/learn-dxpr-builder/elements/text-and-media) # Dodawanie obrazu. Poznaj DXPR BuilderBuduj stronyDodaj treściTekst i media ## W tym przewodniku Powiązane przewodniki - [Zmień wygląd elementu w panelu Styl](/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/panel-styl) Dodaj zdjęcie albo ilustrację, która wypełnia kolumnę i skaluje się do ekranu. ## Dodaj obraz Otwórz swoją stronę po zalogowaniu: przyciski kreatora pojawiają się po najechaniu na obszar treści. [Twoja pierwsza strona](/pl/hc/dokumentacja/nauka-dxpr-builder/pierwsze-kroki/pierwsza-strona) przedstawia podstawy. 1. Najedź na kolumnę i kliknij **+** na jej pasku sterowania albo kliknij **Add Elements** na pustej stronie. Otwórz zakładkę **Treść** i kliknij **obraz**. Obraz pojawi się na górze kolumny i otworzy się okno ustawień. 2. W sekcji **Obraz** kliknij **Select Image**. W **przeglądarce mediów (Media browser)** filtruj po nazwie, jeśli chcesz, zaznacz zdjęcie i kliknij **Insert selected**. 3. Kliknij nagłówek **SEO**, aby go rozwinąć. Zastąp tekst w polu **Atrybut alt** krótkim opisem zdjęcia. 4. Kliknij **Zapisz** w oknie dialogowym. Następnie kliknij **Zapisz** na pasku narzędzi u góry obszaru treści, aby zapisać stronę. ## Co widzisz Domyślna **szerokość obrazu** to 100%. Czytniki ekranu odczytują twój tekst alt. Aby sprawdzić skalowanie, ustaw **tryb widoku** na **Podgląd** i zwęź okno przeglądarki. Odwiedzający zobaczą twoje zmiany po zapisaniu i opublikowaniu. ## Skonfiguruj obraz Najedź na element i otwórz **More > Settings** na jego pasku sterowania. Opcje: - **Obraz:** wybierz obraz z mediów albo przeglądarki plików w twojej witrynie, prześlij plik albo wklej zewnętrzny URL. - **Szerokość obrazu:** szerokość CSS, na przykład `100%` albo `300px`. Domyślnie 100%. - **Wysokość obrazu:** stała wysokość, na przykład `400px`. Pozostaw puste, aby zachować kształt zdjęcia. - **Link obrazu:** sprawia, że obraz można klikać. Wpisz URL albo wybierz stronę. - **Cel linku obrazu:** Same window albo New window. Widać go po dodaniu linku. - **Atrybut alt:** w sekcji **SEO** opis dla czytników ekranu i wyszukiwarek. - **Atrybut title:** w sekcji **SEO** dodatkowe informacje pokazywane jako podpowiedź po najechaniu. ## Ładowanie obrazu a szybkość strony DXPR Builder automatycznie zarządza ładowaniem nowych obrazów, aby strony były szybkie, a treść nie przeskakiwała. Obrazy na początku strony oraz w zakładkach, karuzelach i marquee pozostają gotowe do pokazania. Obrazy niżej mogą wczytywać się podczas przewijania. Obrazy mogą pochodzić z twojej biblioteki mediów, przesłanych plików albo zewnętrznych adresów URL. Poczekaj, aż obrazy wczytają się w edytorze, zanim zapiszesz, aby DXPR Builder mógł zarezerwować odpowiednią ilość miejsca. Wymiana obrazu aktualizuje jego wymiary bez zmiany wybranego rozmiaru wyświetlania. Obrazy już znajdujące się w twojej witrynie nie są ulepszane automatycznie. Szybkość strony zależy też od rozmiaru plików graficznych i pozostałej treści. Sprawdź opublikowaną stronę na wąskich i szerokich ekranach. ## Jeśli go nie widać - **Obraz nie występuje w zakładce Treść.** Twój profil użytkownika go ukrywa. Poproś administratora o włączenie go na stronie [Profile użytkowników](/pl/hc/dokumentacja/nauka-dxpr-builder/administracja/profile-uzytkownikow). - **Zniknął po przeładowaniu.** Strona nie została zapisana. Dodaj go ponownie i kliknij **Zapisz** na pasku narzędzi u góry obszaru treści. - **Element obrazu jest pusty.** W polu **Obraz** nie ustawiono żadnego zdjęcia. Najedź na element i otwórz **More > Settings**, a następnie kliknij **Select Image**. - **Pojawia się ikona uszkodzonego obrazu.** Plik usunięto albo przeniesiono w bibliotece mediów. Najedź na element i otwórz **More > Settings**, usuń wybór i wybierz nowy obraz. - **Obraz jest rozciągnięty albo zgnieciony.** **Szerokość obrazu** i **Wysokość obrazu** mają stałe wartości niepasujące do zdjęcia. Wyczyść **Wysokość obrazu**, aby przywrócić kształt. ## Co dalej? [Panel Styl](/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/panel-styl), aby zmienić odstępy i tło obrazu.