Chcesz, żeby Twoja strona była bardziej dynamiczna, ciekawa i przyciągała uwagę odwiedzających? Świetny pomysł! Jednym z prostych sposobów, by to osiągnąć, jest wyświetlanie losowego obrazka przy każdym odświeżeniu strony. Brzmi dobrze, prawda?
W tym artykule pokażę Ci dokładnie, jak zrobić losowy obrazek na stronie internetowej – w prosty sposób, z wykorzystaniem HTML, CSS i JavaScript. Pokażę też kilka kreatywnych zastosowań tego pomysłu oraz przykłady kodu, które możesz od razu skopiować i przetestować.
Dlaczego warto dodać losowy obrazek na stronie?
Zanim przejdziemy do technikaliów, warto zrozumieć, po co w ogóle robić coś takiego. Przecież można po prostu dodać jedno zdjęcie i po sprawie, prawda? No niby tak, ale…
Losowe obrazki mają kilka fajnych zalet:
- Ożywiają stronę – użytkownik za każdym razem widzi coś innego, co sprawia, że Twoja witryna wydaje się bardziej „żywa”.
- Zwiększają zaangażowanie – ludzie lubią niespodzianki. Jeśli co kliknięcie pojawia się inny obraz, częściej zostaną na stronie dłużej.
- Dają wrażenie personalizacji – możesz wyświetlać różne obrazy w zależności od pory dnia, pogody, kategorii strony itp.
- Świetnie nadają się do galerii, portfolio czy blogów – na przykład, żeby pokazać losowe zdjęcie z kolekcji.
Jak to działa?
Zasada jest banalnie prosta:
- Tworzysz listę obrazków (czyli linki do plików graficznych).
- Skrypt JavaScript losowo wybiera jeden z nich.
- Wstawiasz ten wylosowany obrazek do swojego HTML-a.
Proste? Bardzo! A efekt – zaskakująco fajny.
Krok po kroku: jak zrobić losowy obrazek na stronie
Pokażę Ci najprostszy możliwy sposób, który działa w każdej przeglądarce i nie wymaga żadnych frameworków.
Krok 1: Przygotuj pliki
Załóżmy, że masz katalog projektu o nazwie moja_strona, a w nim folder images z kilkoma obrazkami:
moja_strona/
│
├── index.html
└── images/
├── photo1.jpg
├── photo2.jpg
├── photo3.jpg
├── photo4.jpg
Krok 2: Stwórz plik HTML
Utwórz plik index.html i wklej poniższy kod:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Dowiedz się, jak dodać losowy obrazek na stronie. Prosty poradnik HTML, CSS i JavaScript krok po kroku.">
<title>Losowy obrazek na stronie</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background: #f4f4f4;
padding: 40px;
}
img {
max-width: 80%;
height: auto;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
border: none;
background: #007BFF;
color: white;
border-radius: 8px;
cursor: pointer;
}
button:hover {
background: #0056b3;
}
</style>
</head>
<body>
<h1>Losowy obrazek na stronie 🌄</h1>
<img id="randomImage" src="" alt="Losowy obrazek">
<br>
<button onclick="changeImage()">Pokaż inny obrazek</button>
<script>
// Lista obrazków
const images = [
"images/photo1.jpg",
"images/photo2.jpg",
"images/photo3.jpg",
"images/photo4.jpg"
];
// Funkcja losująca obrazek
function getRandomImage() {
const randomIndex = Math.floor(Math.random() * images.length);
return images[randomIndex];
}
// Zmieniamy obrazek po kliknięciu przycisku
function changeImage() {
document.getElementById("randomImage").src = getRandomImage();
}
// Ustaw obrazek losowo przy starcie
window.onload = changeImage;
</script>
</body>
</html>
Krok 3: Sprawdź efekt
Zapisz plik i otwórz go w przeglądarce. Za każdym razem, gdy odświeżysz stronę albo klikniesz przycisk „Pokaż inny obrazek”, pojawi się inna fotka z Twojego folderu.
Bonus: Losowy obrazek z API
Jeśli nie chcesz trzymać własnych zdjęć, możesz pobierać losowe obrazy z internetu. W tym celu możesz wykorzystać darmowe API, np. Unsplash Source API.
Zastąp w kodzie listę obrazków takim fragmentem:
function getRandomImage() {
const randomWidth = Math.floor(Math.random() * 400) + 300;
const randomHeight = Math.floor(Math.random() * 300) + 200;
return `https://source.unsplash.com/random/${randomWidth}x${randomHeight}`;
}
Gotowe! Teraz za każdym razem wczyta się losowe zdjęcie z Unsplash, i to bez żadnego klucza API.
Pomysłowe zastosowania losowych obrazków
Losowy obrazek to nie tylko zabawny bajer. Oto kilka praktycznych pomysłów, jak możesz to wykorzystać:
- Tło strony – ustaw losowy obrazek jako tło każdorazowego wejścia.
- Nagłówek bloga – pokaż inne zdjęcie w banerze, by każdy artykuł miał trochę inny klimat.
- Portfolio fotograficzne – przy każdym odświeżeniu inna miniatura pracy.
- Sklep internetowy – losowo pokazuj produkty z danej kategorii.
- Strona „404 – nie znaleziono” – humorystyczny sposób: pokaż losowy mem lub zabawny obrazek, by rozładować frustrację odwiedzającego.
Jak ustawić losowe tło strony?
Skoro już potrafimy losować obrazki, możemy pójść krok dalej – zróbmy losowe tło całej strony.
W tym celu wystarczy lekka modyfikacja kodu:
<script>
const backgroundImages = [
"images/bg1.jpg",
"images/bg2.jpg",
"images/bg3.jpg",
"images/bg4.jpg"
];
function setRandomBackground() {
const randomIndex = Math.floor(Math.random() * backgroundImages.length);
document.body.style.backgroundImage = `url('${backgroundImages[randomIndex]}')`;
document.body.style.backgroundSize = "cover";
document.body.style.backgroundPosition = "center";
}
window.onload = setRandomBackground;
</script>
Teraz Twoja strona będzie miała inne tło przy każdym odświeżeniu. Idealne dla blogów, portfolio czy landing page’y!
Dodatkowa optymalizacja – żeby strona działała szybciej
Jeśli dodajesz dużo zdjęć, musisz pamiętać o optymalizacji. Ciężkie grafiki spowalniają stronę i pogarszają SEO.
Oto kilka wskazówek:
- Kompresuj obrazy – używaj narzędzi takich jak TinyPNG czy Squoosh.
- Zmieniaj rozmiary – nie wrzucaj zdjęcia 4000×3000, jeśli wyświetlasz je w małym kontenerze.
- Używaj formatów WebP lub AVIF – są lżejsze i nowoczesne.
- Dodaj atrybut
loading="lazy"do obrazków – dzięki temu wczytają się tylko wtedy, gdy będą widoczne na ekranie.
Przykład:
<img id="randomImage" src="" alt="Losowy obrazek" loading="lazy">
Responsywność – nie zapominaj o telefonach
W dzisiejszych czasach większość ludzi przegląda internet na smartfonach, więc pamiętaj, by Twój losowy obrazek dobrze się skalował.
Dodaj do CSS:
img {
width: 100%;
height: auto;
max-width: 600px;
border-radius: 12px;
}
Dzięki temu obrazek będzie zawsze wyglądał dobrze – niezależnie od rozdzielczości ekranu.
Jak zrobić to samo w PHP (dla stron dynamicznych)
Jeśli masz stronę opartą o PHP (np. WordPress, Joomla, autorski CMS), możesz zrobić losowy obrazek po stronie serwera, bez JavaScriptu.
Oto prosty przykład w PHP:
<?php $images = ["photo1.jpg", "photo2.jpg", "photo3.jpg", "photo4.jpg"]; $random = $images[array_rand($images)]; ?> <img src="images/<?php echo $random; ?>" alt="Losowy obrazek">
Ten kod wybiera losowy obrazek już na etapie generowania strony, więc użytkownik zawsze dostanie inny plik przy każdym odświeżeniu.
Protip: Losowe obrazki z różnych folderów
Możesz też pójść o krok dalej i losować obrazki z różnych katalogów – np. zależnie od kategorii strony lub pory dnia.
Przykład w JavaScript:
const morning = ["img/morning1.jpg", "img/morning2.jpg"];
const evening = ["img/evening1.jpg", "img/evening2.jpg"];
const hour = new Date().getHours();
const images = (hour < 12) ? morning : evening;
document.getElementById("randomImage").src = images[Math.floor(Math.random() * images.length)];
Rano – obrazek ze słońcem
Wieczorem – zachód
Mała rzecz, a cieszy!
Jak widzisz, dodanie losowego obrazka na stronie to nic trudnego, a daje naprawdę sporo możliwości.
Wystarczy kilka linijek kodu, by Twoja witryna była bardziej interaktywna, atrakcyjna i przyjazna dla użytkownika.