Zmiana rozmiaru i optymalizacja obrazów online

Jeśli posiadasz zbiór niesamowitych zdjęć, z pewnością chciałbyś podzielić się nimi z klientami na swojej stronie internetowej. Możesz stworzyć piękny pokaz slajdów, galerie lub po prostu wstawić obraz na pojedynczą stronę lub bloga. Niezależnie od wybranej opcji, pojawi się jeden problem, który napotykasz w przypadku edytorów treści dla laików: zmiana rozmiaru obrazu.

Poniżej znajdziesz kilka wskazówek dotyczących zmiany rozmiaru obrazu, które mogą Ci się przydać.

Dostosuj rozmiar do swojej treści

Zawsze dostosowuj rozmiar obrazów do rozmiaru treści lub jej szerokości. Na przykład, jeśli obszar treści jest ograniczony do 650 pikseli szerokości, nie ma potrzeby dostosowywania rozmiaru obrazu do rozmiaru większego niż 650 pikseli, ponieważ strona będzie wyświetlać tylko do 650 pikseli. Jeśli rozmiar obrazu jest mniejszy lub większy niż kontener, jakość wyświetlania ulegnie pogorszeniu.

Dostosuj rozdzielczość obrazu do sieci

W żadnym zarysie strony internetowej nie będzie widoczne żadne wrażenie „na cal”. PPI, czyli liczba pikseli na cal, i DPI, czyli liczba punktów na cal, nie mają znaczenia podczas edycji lub zmiany rozmiaru zdjęcia w jakimkolwiek celu, takim jak wysłanie e-mailem, na bloga czy udostępnienie w mediach społecznościowych. Poza drukowaniem, na ekranie, nie będzie można dokonać żadnych rozróżnień w cechach ani jakości obrazu.

Dotyczy to zwłaszcza plików PDF – należy unikać udostępniania do czytania w internecie plików PDF zawierających obrazy o rozdzielczości powyżej 72 dpi. W takim przypadku ImageRecycle , który optymalizuje plik PDF z obrazami o rozdzielczości 300 dpi. Dzięki temu można zaoszczędzić 98% rozmiaru pliku PDF, zachowując idealną jakość do czytania w internecie.

Najlepsza jakość eksportu JPG dzięki ImageRecycle

W przypadku korzystania z programu Photoshop, zaleca się zapisywanie obrazów JPEG z maksymalnie 20% kompresją. Można również przeprowadzić testy z różnymi ustawieniami JPEG, które najlepiej sprawdzą się w danym przypadku. Zastosowanie globalnej kompresji to kwestia równowagi między rozmiarem a jakością.

Teraz, dzięki algorytmowi optymalizacji obrazu ImageRecycle , proces ten wygląda zupełnie inaczej. ImageRecycle wykrywa aktualny współczynnik kompresji obrazu i na jego podstawie optymalizuje obraz. Ponieważ kompresja nie jest stosowana do całego obrazu, poniższy test z pewnością Cię zaskoczy.

Pamiętaj: im mniejsza kompresja oryginalnego obrazu, tym lepsza optymalizacja i większy rozmiar.

W poniższym przykładzie wyeksportowałem 4 obrazy JPG za pomocą Photoshopa z poziomem jakości: 60% | 80% | 90% | 100%.
Następnie zoptymalizowałem obrazy za pomocą ImageRecycle . Oto wynik pod względem rozmiaru. Jeśli chodzi o jakość, wyniki 90/100% są nieco lepsze niż pozostałe 2. Lekcja z tego jest taka: eksportuj obrazy JPG w jak najmniejszej kompresji, a ImageRecycle zajmie się resztą!

Zoptymalizuj obrazy końcowe

W zależności od prowadzonej witryny, te same obrazy mogą być wyświetlane na różnych stronach w różnych rozmiarach. Zazwyczaj jest to coś, co można znaleźć w sklepach internetowych ze sliderem, listą produktów, szczegółami produktu itd.
Proces zmiany rozmiaru jest zazwyczaj realizowany przez bibliotekę PHP online, taką jak GD. Upewnij się, że jakość i waga oryginalnych i finalnych obrazów użytkownika są takie same. Nie ufaj bibliotekom online i generatorom pamięci podręcznej, ponieważ mogą wystąpić problemy z jakością i rozmiarem. Jeśli oryginalny obraz jest już zoptymalizowany (poprzez precyzyjne dostrojenie jakości, kolorów i kompresji), aby oszczędzać przepustowość i czas ładowania strony, niektóre biblioteki do zmiany rozmiaru rozszerzeń internetowych mogą to wszystko stracić!

Rozwiązanie:

• Zastosuj optymalizację obrazu wyświetlanego w przeglądarce klienta końcowego. Możesz to zrobić ręcznie dla każdego obrazu i dla każdego rozmiaru lub skorzystać z naszego API lub rozszerzenia CMS ImageRecycle , aby wybrać folder, w którym przechowywane są obrazy finalne. Następnie uruchom automatyczną optymalizację.
• Użyj naszego narzędzia do zmiany rozmiaru oryginalnych obrazów. Możesz zaoszczędzić miejsce na serwerze, szybciej manipulować obrazami i zazwyczaj nie potrzebujesz obrazu o szerokości większej niż 1600 pikseli na ekranie końcowym

Co dalej: HTML5 i<picture> element

Responsywne techniki projektowania, w tym zapytania o media, to sposób, w jaki projektanci stron internetowych dostosowują układ witryny do szerokiej gamy urządzeń, od komputerów stacjonarnych po smartfony, zapewniając jej spójny, wyrazisty wygląd. Problemem nie jest tu wyświetlacz, lecz wydajność – chodzi o obraz wyświetlany i ładowany na smartfonie i tablecie.

Ten<picture> Element HTML5 próbuje rozwiązać ten problem. Zaletą natywnie zoptymalizowanych zasobów graficznych jest krótszy czas ładowania – szczególnie ważny dla użytkowników korzystających z wolniejszych połączeń internetowych na urządzeniach mobilnych.<picture> element umożliwia dynamiczną zmianę rozmiaru poprzez podanie instrukcji HTML do przeglądarki.

Fragment kodu:

Ograniczeniem na chwilę obecną jest to, że do poprawnego działania wymagana jest najnowsza wersja Chrome (39) i trochę kodu JavaScript. W niedalekiej przyszłości, dzięki tej technologii połączonej z optymalizatorem obrazów, możemy spodziewać się optymalnego czasu ładowania strony.