Strona główna » Przepisy » Porady » Skuteczne narzędzia do kompresji obrazów online

Skuteczne narzędzia do kompresji obrazów online

Twórcy stron internetowych, copywriterzy, użytkownicy WordPressa, często stoją przed dylematem jak zamieścić zdjęcie dobrej jakości w witrynie zachowując przy tym odpowiednie proporcje i rozmiar. Jak w tym wszystkim znaleźć odpowiedni balans?

W tym przepisie opowiem Ci moje sposoby na odpowiednią optymalizację grafik na stronie, przedstawię narzędzia, z których korzystam i polecam.

Skuteczne narzędzia do kompresji obrazów online

Kuchnia: porady, wtyczki WordPressStopień trudności: średnio-zaawansowany
Skladniki

3

Składniki
Czas kodowania 🙂

5

minut
Stopień trudności

1800

kcal

Składniki:

  • TinyPNG

  • Optimizilla

  • IrfanView

  • Konwerter png -> jpg

Przepis (metoda):

  • Dodając grafikę na stronę zadbaj o jej odpowiednią nazwę i rozmiar. Załóżmy, że posiadasz już przygotowane wcześniej zdjęcie, które chcesz zamieścić na stronie. Po pobraniu grafiki na swój komputer, wprowadź odpowiedni tytuł (bez polskich znaków z myślnikami w środku)
    Np. to-jest-moje-idealne.zdjecie.jpg
  • Sprawdź na stronie w miejscu gdzie chcesz dodać zdjecie jakiego tak naprawdę rozmiaru potrzebujesz. Jeśli zdjęcie jest tylko miniaturką 300 x 200 px nie potrzebujesz zdjęcia, które ma np. rozmiar 1920 px szerokości. Zdecydowanie zmniejszy to rozmiar twojego zdjęcia.
    Zazwyczaj wszelkie slajdery i zdjęcia które są tłem mają rozmiary 1920 px lub 2560 px. Są to największe zdjęcia w swojej witrynie.
  • Jak sprawdzić rozmiar takiego zdjęcia? Wchodzimy na naszą stronę, najeżdżamy na dany element graficzny i klikamy prawym przyciskiem myszy > Zbadaj. W ten sposób na poniższym przykładzie możesz zobaczyć że nasza grafika ma rozmiar 582 x 388 px.
    Jeśli grafika w kolejnych odsłonach na stronie nie będzie powiększana, nie będzie efektu lightbox, nie potrzebujesz jej w dużym formacie. W tym przypadku możemy zmniejszyć rozmiar grafiki na 600 x 400 px.
  • Możemy przejść do zmniejszania rozmiaru grafiki. Możesz wykonać to za pomocą dowolnego programu graficznego. Poniżej przykład z macOS. Kliknij w pierwszą ikonę od wyszukiwarki (po lewej stronie) następnie wyszukaj opcję dostosuj wymiary. Ustaw opowiednie wymiary i kliknij OK. W tym momencie grafika zmieniła swój rozmiar.
  • Możesz użyć też darmowego programu dla użytkowników systemu operacyjnego Windows https://www.irfanview.com dzięki, któremu szybko zmienisz rozmiar czy format zdjęcia. Polecam!
  • W kolejnym kroku musimy skompresować grafikę, aby zajmowała jak najmniej miejsca, nie tracąc przy tym jakości. Jest to trudne zadanie lecz wykonalne.
    Jeśli mamy już naszą grafikę możemy użyć wielu stron do kompresji obrazów. Osobiście polecam TinyPNG https://tinypng.com lub https://imagecompressor.com
    Wybierz swoją grafikę i dodają ją do tzw. „Pandy” – TinyPNG. Możesz również przeciągnąć ją ze swojego komputera i dodać ją do strony. W ten sposób grafika zostanie odpowiedni skompresowana. Na poniższym przykładzie widzimy, że moja grafika zmniejszyła rozmiar o 74% (z 307 KB na 107 KB). Skompresowaną grafikę możesz pobrać na swój komputer.
    W wersji darmowej strony możesz skompresować maksymalnie do 20 grafik.
  • Ten sam efekt możesz osiągnąć za pomocą Optimizilla – https://imagecompressor.com
    Jednak w tym rozwiązaniu masz wpływ na jakość zdjęcia (patrz suwak po prawej stronie) oraz dostępny jest podgląd efektu przed i po.
  • Jaki format zdjęcia wybrać? To zależy. Grafikę w formacie .JPG zdecydowanie łatwiej skompresować do mniejszych rozmiarów niż .PNG. Dlatego możesz użyć konwerterów, dostępnych w Internecie np. https://png2jpg.com aby spróbować z rozmiaru .png zrobić .jpg
    Wyprobuj co sprawdzi się u Ciebie przy wyborze i kompresji zdjęcia.
  • Mamy również dostępne nowoczesne formaty takie jak WebP czy Avif. Coraz więcej przeglądarek obsługuje te formaty, dlatego możesz spróbować konwertować grafiki również do tych formatów.
  • Dostępnych jest wiele wtyczek, które kompresują zdjęcia na Twojej stronie. Zdecydowanie wolę ich używać po ręcznej kompresji (na etapie tworzenia strony). Możesz skorzystać z Converter for Media lub WebP Express gdzie Twoje grafiki zostaną przekonwertowane na format dużo lżejszy. Do optymalizacji po stronie możesz użyć również wtyczki Robin Image Optimizer czy Smush – Optimize Images. Tym wszystkim zajmiemy się w kolejnym przepisie na WordPressa.

Podsumowanie:

  • Zadbaj na etapie tworzenia strony o odpowiednią nazwę, opis i rozmiar zdjęcia. Nie zapomnij o odpowiednim formacie, kompresji i optymalizacji.
  • Testuj, sprawdzaj, próbuj. Nie każda grafika ma taką samą wagę. Zastanów się, czego potrzebujesz na swoją stronę www.
  • Nie przesadzaj z rozmiarem zdjęcia jeśli takiego nie potrzebujesz na stronie. Miniaturka jest miniaturką 🙂

Zobacz również

Przewijanie do góry