Zmiana rozmiaru i optymalizacja obrazu online

Jeśli masz grupę niesamowitych zdjęć, jestem pewien, że chciałbyś podzielić się nimi ze swoimi klientami na swojej stronie internetowej. Możesz zrobić piękny pokaz slajdów, stworzyć galerie lub po prostu wstawić obraz na jednej stronie lub blogu. Bez względu na to, jaką opcję wybierzesz, napotkasz pojedynczą trudność związaną z niespecjalistycznym edytorem treści: zmiana rozmiaru obrazu.

Poniżej znajdują się zalecenia dotyczące zmiany rozmiaru obrazu, które będą dla Ciebie pomocne.

Dostosuj rozmiar do treści

Zawsze zmieniaj rozmiar obrazów zgodnie z rozmiarem treści lub szerokością treści. Na przykład, jeśli obszar zawartości jest ograniczony do 650 pikseli szerokości, nie ma wymogu, aby rozmiar obrazu był większy niż 650 pikseli, ponieważ strona będzie wyświetlać tylko do 650 pikseli. Jeśli właściwość rozmiaru obrazu jest mniejsza lub większa niż kontener, jakość wyświetlania ulegnie pogorszeniu.

Dostosuj rozdzielczość obrazu do Internetu

W żadnym zarysie strony internetowej nie będzie wrażenia „na cal”. PPI, czyli piksele na cal i DPI, czyli punkty na cal, nie mają żadnego znaczenia, gdy edytujesz lub zmieniasz rozmiar zdjęcia w jakimkolwiek celu, takim jak wysyłanie e-maili, blogowanie lub udostępnianie w mediach społecznościowych. Z wyjątkiem druku, na ekranie nie będzie można rozróżnić funkcji lub jakości obrazu.

Dotyczy to zwłaszcza plików PDF , należy unikać udostępniania plików PDF do czytania w Internecie, które zawierają obrazy o rozdzielczości wyższej niż 72 dpi. W takim przypadku ImageRecycle PDF Optimizer może pomóc, zoptymalizować plik PDF z obrazami o rozdzielczości 300 dpi w środku i możesz zaoszczędzić 98% rozmiaru pliku PDF z doskonałą jakością do czytania w Internecie.

Najlepsza jakość eksportu JPG dzięki ImageRecycle

Korzystając z Photoshopa, zaleceniem dla Internetu jest zapisanie obrazów JPEG w maksymalnej ilości. 20% kompresji. Możesz także przeprowadzić testowanie z różnymi zaletami JPEG, które działają najlepiej dla Ciebie. Zastosowanie globalnej kompresji jest kwestią równowagi między rozmiarem a jakością.

Teraz, dzięki algorytmowi optymalizacji obrazu ImageRecycle , proces jest zupełnie inny. ImageRecycle wykrywa bieżący współczynnik kompresji obrazu i pod tym kątem optymalizuje obraz. Ponieważ kompresja nie jest stosowana do całego obrazu, poniższy test będzie naprawdę zaskoczony.

Pamiętaj: im mniej oryginalny obraz zostanie skompresowany, tym lepsza optymalizacja i rozmiar.

W poniższym przykładzie wyeksportowałem 4 obrazy jpg przy użyciu Photoshopa na poziomie jakości: 60% |
80% | 90% | 100% Następnie zoptymalizowałem obrazy za pomocą ImageRecycle , oto wynik dotyczący rozmiaru. Jeśli chodzi o jakość, 90/100% jest nieco lepsze niż 2 pozostałe. Lekcja jest następująca: eksportuj obrazy jpg w możliwie najmniej skompresowany sposób, a ImageRecycle zajmie się resztą!

Zoptymalizuj końcowe obrazy

W zależności od używanej witryny te same obrazy mogą być wyświetlane na różnych stronach o różnych rozmiarach. Zazwyczaj jest to coś, co można znaleźć w e-commerce z suwakiem, listą produktów, szczegółami produktu...
Proces zmiany rozmiaru jest zwykle wykonywany przez internetową bibliotekę php, taką jak GD. Sprawdź jakość i wagę swoich ORYGINALNYCH i KOŃCOWYCH obrazów użytkownika. Nie ufaj bibliotekom internetowym i generatorowi pamięci podręcznej, bo możesz mieć problem z jakością i rozmiarem. Jeśli oryginalny obraz jest już zoptymalizowany po Twojej stronie (dostrajając jakość, kolory, kompresję), aby zaoszczędzić przepustowość i ładowanie strony, z niektórymi bibliotekami zmiany rozmiaru rozszerzeń internetowych możesz 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 rozszerzenia API lub CMS ImageRecycle , aby wybrać folder, w którym przechowywane są ostateczne obrazy. Następnie uruchom na nim automatyczną optymalizację.
• Skorzystaj z naszego narzędzia do zmiany rozmiaru oryginalnych zdjęć. Możesz zaoszczędzić miejsce na serwerze, szybciej manipulować zdjęciami i zwykle nie potrzebujesz obrazu o szerokości większej niż 1600 pikseli na ostatecznym wyświetleniu

Co dalej: HTML5 i element

Elastyczne techniki projektowania, które obejmują zapytania o media, pozwalają projektantom stron internetowych dostosować układ witryny do szerokiej gamy urządzeń, od komputerów stacjonarnych po smartfony, i sprawić, by wyglądał konsekwentnie. Problemem nie jest tutaj wyświetlacz, ale wydajność, to obraz pulpitu, który jest wyświetlany i ładowany na smartfonie i tablecie.

The Element HTML5 próbuje rozwiązać ten problem. Zaletą natywnie zoptymalizowanego zasobu obrazu jest czas ładowania - szczególnie ważne dla użytkowników korzystających z wolniejszych mobilnych połączeń internetowych. The element umożliwia rzeczywistą dynamiczną zmianę rozmiaru poprzez podanie instrukcji HTML w przeglądarce.

Fragment kodu:

W tej chwili ograniczenie jest takie, że do poprawnego działania wymagana jest bardzo niedawna wersja Chrome (39) i trochę JS. W niedalekiej przyszłości, dzięki tej technologii powiązanej z optymalizatorem obrazu, możemy spodziewać się najlepszego czasu ładowania witryny.