Jak zmienić rozmiar obrazu w Internecie?

W tym poście wyjaśniono, jak zmienić rozmiar obrazu w Internecie. Po pierwsze w pikselach, aby obraz był prawidłowo dopasowany do strony internetowej. Następnie w kilobajtach, aby zmniejszyć rozmiar pliku bez zbytniej degradacji obrazu.

Dlaczego zmieniamy rozmiar obrazów w Internecie?

Chcemy, aby obrazy dobrze wyglądały na ekranie i były szybko pobierane dla odwiedzających witrynę.

Witryny z szybko ładowanymi obrazami będą miały wyższą pozycję w wyszukiwarkach.

Ponieważ wyszukiwarki wolą wysyłać użytkowników do witryn, które zapewniają dobre wrażenia.

Aby szybko wczytać obraz, trzeba wykonać dwa kroki:

• Pierwszym krokiem jest zmiana rozmiaru obrazu w pikselach – i powinien być pierwszy.
  To jest szerokość i wysokość. Musi mieć odpowiedni rozmiar dla swojego miejsca na stronie.
  Od czasu wprowadzenia responsywnych stron internetowych istnieje kilka osobliwości związanych z rozmiarami obrazów.
  Obraz musi mieć odpowiedni rozmiar dla telefonu komórkowego, tabletu, komputera stacjonarnego i telewizora, co omówimy później.
• Drugim krokiem jest zmniejszenie rozmiaru obrazu w kilobajtach – znane jako kompresja.
  Kompresja zmniejsza lub łączy kolory w obrazie, dzięki czemu zmniejsza rozmiar w kilobajtach. Można to zrobić bez zbytniej utraty jakości.

Wykonywanie obu tych zadań – zmiana rozmiaru i kompresja – jest znane jako optymalizacja obrazu w Internecie.

Pokażę Ci najlepsze praktyki zmiany rozmiaru obrazu i jak to zrobić.

Komplikacje z responsywnymi obrazami

Zacznijmy od przyjrzenia się responsywnym obrazom — tym, których rozmiar zmienia się, aby dobrze wyglądały na różnych rozmiarach ekranu.

Projektujemy najpierw pod kątem urządzeń mobilnych, więc zacznę od odniesienia się do mobilnej wersji strony internetowej.

W witrynach mobilnych obraz zwykle zajmuje całą szerokość ekranu. Obrazy nakładają się na tekst, a użytkownicy są bardzo przyzwyczajeni do szybkiego przewijania długich, przyjaznych dla urządzeń mobilnych stron internetowych.

Dla urządzenia mobilnego bardzo dobra szerokość obrazu to 640 pikseli. Wysokość może być dowolna.

Na tym jednak nie kończy się rozmiar obrazu. Jeden rozmiar nie pasuje do wszystkich.

Obrazy na różnych urządzeniach

Pomyślmy o tym samym obrazie na bardzo dużym monitorze lub ekranie telewizora — tak, strony internetowe są teraz dostępne za pośrednictwem inteligentnego telewizora.

Obraz może znajdować się w kolumnie po lewej stronie tekstu.

Może rozciągać się na szerokość ekranu, tak jak w wersji mobilnej. Nazywamy te wizerunki bohaterów.

Wyobraź sobie, jak duży musi być teraz ten obraz?

W przypadku telewizora idealny obraz w pikselach miałby szerokość 1920 pikseli – lub więcej.

Jeśli już zmniejszyłeś obraz o 640 pikseli dla telefonu komórkowego, będzie to wyglądało okropnie, jeśli spróbujesz go przeskalować do 1920 pikseli. Rozciągnąłbyś go o ponad 400%.

Skalowanie obrazów w górę nie wygląda dobrze – piksele rozciągają się, a obraz jest rozmyty.

Problemu nie rozwiązuje też kwestia utrzymania obrazów w rozdzielczości 1920 pikseli. Pobierają się one tak wolno, zwłaszcza przy wolnych połączeniach internetowych.

Aby dodać do komplikacji: obraz powinien mieć dokładny rozmiar w pikselach do wykorzystania na stronie. Wyszukiwarki lubią mieć dobre pojęcie o szerokości i wysokości – znane jako wymiary.

Jak widać – nie ma standardowego rozmiaru i wszystko się komplikuje. Wszystko, co możemy zrobić, to wszystko, co w naszej mocy.

Wtyczki WordPress do obrazów adaptacyjnych

Istnieje kilka wtyczek WordPress, które pomagają w wyświetlaniu na urządzeniu prawidłowego rozmiaru obrazu, zwanych obrazami adaptacyjnymi.

Zasadniczo najpierw pobierany jest mały obraz – niezależnie od tego, czy ma rozmiar, czy rozdzielczość.

Jeśli rozdzielczość ekranu jest duża, wtyczka zapewnia większą wersję. Przyspiesza to czas oczekiwania na gościa.

Jest to rozwiązanie, jeśli chcesz używać dużych obrazów bohaterów, ale martwisz się o czas pobierania.

Oto dwie wtyczki do adaptacji obrazu, które lubię:

• Adaptacyjne obrazy dla WordPress autorstwa Nevma
  Po prostu wysyła mniejsze wersje obrazów na urządzenia mobilne, więc bardzo podstawowa wtyczka, która wykonuje zadanie po zapisaniu ustawień po aktywacji.
• Obraz adaptacyjny Shortpixel autorstwa ShortPixel
  Ta wtyczka jest sprytna. Zacznie przycinać i kompresować obrazy dla różnych ekranów, gdy tylko zostanie aktywowany. Chociaż w razie potrzeby możesz mieć większą kontrolę. Dokumentacja ShortPixel jest również obszerna. Możesz nawet porównać obraz przed i po kompresji z testem kompresji obrazu.
  

Więc to, co zrobiłbym, to użycie tych adaptacyjnych wtyczek, ale nie polegaj w pełni na nich i zrzucaj zdjęcia na swoją witrynę WordPress bezpośrednio z aparatu. Utrzymuj bibliotekę multimediów w czystości.

Najpierw zmień rozmiar obrazu i skompresuj go minimalnie, aby zmniejszyć KB. Po przesłaniu go do WordPress, adaptacyjna wtyczka obrazu zajmie się resztą.

Zacznijmy zmieniać rozmiar obrazu do internetu.

Zmień rozmiar obrazu w Internecie – w pikselach

Mając na uwadze wszystko, co omówiliśmy, wybierz szerokość obrazu.

• Fotograf potrzebowałby doskonałej jakości zdjęć. Aby wyświetlić je na pełnej szerokości ekranu na bardzo dużym monitorze, będą potrzebować dość dużego obrazu. Rozmiar zdjęć do co najmniej 1920 pikseli.
• Ktoś inny radzę wybrać 1200 pikseli. To dobra równowaga. Osoby korzystające z bardzo dużych monitorów zobaczą pikselację na obrazach o pełnej szerokości, ale jest to kompromis w przypadku szybkiego ładowania obrazu.

Na mojej własnej stronie internetowej i blogu używam obrazów o maksymalnej szerokości 1200 pikseli, większość na stronach ma 800. Oto dlaczego:

• Obrazy o pełnej szerokości nigdy nie są używane w mojej witrynie. Lubię, żeby wszystko było naprawdę szybkie.
• Moja firma nie jest szczególnie wizualna, ludzie nie muszą oglądać moich zdjęć w tak wysokiej rozdzielczości.
• Używam oddzielnych obrazów o dokładnym rozmiarze dla Open Graph, a to nie wymaga niczego większego niż 1200.
• Z Google Analytics wiem, że ludzie odwiedzają moją witrynę za pomocą urządzenia przenośnego lub laptopa. Przydatna informacja.

Zostawiam to twojej dyskrecji.

Darmowe oprogramowanie do edycji obrazu

Istnieje wiele bezpłatnych narzędzi dostępnych online, a także programy do edycji obrazów, które można pobrać.

W przypadku zdjęć trzymaj się formatu JPEG i to właśnie tutaj omówimy.

W przypadku wektorów wybierz PNG lub SVG – i to jest dla przyszłego samouczka.

Oprogramowanie do edycji obrazu GIMP

GIMP (Program manipulacji obrazem GNU) to całkowicie darmowy edytor obrazów.

Pobierz aktualną stabilną wersję GIMP ze strony internetowej.

GIMP zapewnia samouczek dotyczący zmiany rozmiaru (wymiarów) obrazu (skali).

Edytory obrazów online

Szybkie wyszukiwanie „obrazu zmiany rozmiaru online” w Google da Ci całą gamę opcji umożliwiających przesyłanie, zmianę rozmiaru, kompresowanie i pobieranie plików JPEG.

Pierwszym wynikiem, jaki znalazłem, był resizeimage.net. Bardzo prosty w użyciu – przycina, zmienia rozmiar i kompresuje obraz.

Jeśli chcesz przyciąć obraz, użyj opcji numer 2, ale pominąłem to i przeszedłem od razu do opcji numer 4, gdzie mogę zmienić jego rozmiar o piksele.

Wpisz 1200 w polu szerokości, Nan na wysokość i zaznacz pole Zachowaj proporcje.

Format obrazu wyjściowego to JPG.

Wybierz opcję kompresji.

Kompresja progresywna pokaże pikselową wersję JPEG, gdy tylko użytkownik znajdzie się na stronie. Pozostałe informacje będą stopniowo pobierane w celu zbudowania ostatecznego obrazu. Bardzo podoba mi się ta opcja, ponieważ gość wie, jak czekać.

Zmniejsz jakość obrazu o około 75%, ponownie w zależności od tego, jak bardzo chcesz być bezwzględny.

Zmiana rozmiaru obrazu w KB – kompresja

Kompresja bardzo różni się od zmiany rozmiaru. Wszystkie obrazy powinny być skompresowane przed przesłaniem, nawet jeśli używasz adaptacyjnej wtyczki obrazu.

Kompresja zmniejsza rozmiar pliku obrazu poprzez zmniejszenie pikseli, dzięki czemu jest szybciej pobierany.

Na etapie kompresji staraj się nie pogarszać zbytnio jakości obrazu.

Postaraj się osiągnąć równowagę między dobrym wyglądem obrazu a szybkim pobieraniem.

Obrazy można również kompresować za pomocą oprogramowania GIMP.

Samouczek GIMP dotyczący zmiany rozmiaru (FileSize) pliku JPEG.