Zmiana rozmiaru obrazu

Moduł Image Resizer służy do wygodnej zmiany rozmiaru obrazów po ich przesłaniu na stronę. Jest szczególnie przydatny w sytuacjach, gdy ten sam obraz jest używany w różnych częściach witryny, ale powinien być wyświetlany w różnych rozmiarach.

Na przykład, zgodnie z projektem strony ten sam obraz może być wyświetlany w kilku blokach: w zajawce, na liście materiałów i w pełnej wersji artykułu. Jeśli po prostu zmniejszysz obraz za pomocą HTML lub CSS, obraz faktycznie pozostaje duży (na przykład 500×400 px), zajmując przy tym mniejszy obszar (300×250 px). Negatywnie wpływa to na SEO, ponieważ zwiększa wagę strony i obniża szybkość jej ładowania — parametry, które wyszukiwarki biorą pod uwagę przy rankingu.

Główne możliwości modułu

Image Resizer jest przydatny nie tylko z punktu widzenia SEO, ale także znacznie ułatwia pracę programistom i administratorom stron. W projektach newsowych i contentowych często требуется wyświetlanie jednego obrazu w różnych proporcjach i rozmiarach. Przy standardowym skalowaniu przez CSS proporcje mogą zostać zniekształcone, co pogarsza wygląd.

Dzięki funkcji Crop (przycinanie) moduł automatycznie wycina potrzebny obszar obrazu i dopasowuje go do заданnych rozmiarów bez utraty proporcji. Możesz wskazać, która część obrazu ma zostać użyta — środek, górę, dół lub rogi.

Praca z zewnętrznymi obrazami

Jako dodatkową możliwość moduł obsługuje pracę z zewnętrznymi obrazami. Jeśli w materiale używany jest obraz przesłany do zewnętrznego serwisu (przez bezpośredni link), Image Resizer może automatycznie pobrać go na Twój serwer, a następnie wykonać:

• zmianę rozmiaru;

• ustawienie jakości;

• przycinanie obrazu.

SEO-optymalizacja nazw plików

Jednym z problemów DLE jest dodawanie Unix timestamp do nazwy obrazu. Takie długie i nieczytelne nazwy plików nie przynoszą korzyści dla SEO. Image Resizer rozwiązuje ten problem, pozwalając użyć wartości alt-tagu jako nazwy pliku.

W ten sposób obrazy mogą automatycznie otrzymywać sensowne, przyjazne dla SEO nazwy bez zbędnych prefiksów.

Wydajność i buforowanie

Zmiana rozmiarów obrazów nie jest wykonywana przy każdym otwarciu strony. Przetwarzanie odbywa się tylko przy pierwszym wyświetleniu obrazu, po czym wynik jest zapisywany w pamięci podręcznej. Oznacza to, że:

• obciążenie serwera jest minimalne;

• szybkość ładowania stron nie spada;

• ponowne przetwarzanie nie jest wymagane.

Krótkie URL dla obrazów

Jeśli nawet po zmianie nazwy URL obrazów pozostaje zbyt długi, możesz zamienić ścieżkę
/uploads/cache/
na wirtualny katalog, na przykład /resimler/.

⚠️ Ważne: wskazana wirtualna ścieżka nie może pokrywać się z rzeczywiście używanymi katalogami systemu ani nazwami kategorii.

Automatyczne dodawanie width i height

Po zmianie rozmiaru obrazu moduł może automatycznie dodawać atrybuty width i height do kodu HTML. Pozytywnie wpływa to na SEO i stabilność układu, ponieważ przeglądarka z wyprzedzeniem zna wymiary obrazu.

Przykład użycia

Kod TPL:

HTML bez modułu
Rozmiar obrazu: standardowy medium z panelu administracyjnego

HTML z modułem
Rozmiar: 140×100 px, jakość: 90%

HTML z modułem (bez automatycznego nazewnictwa):

Przesyłanie obrazów przez zewnętrzny link

Możesz automatycznie pobierać obrazy z zewnętrznych stron, używając parametru d:1:

Wynik:

Rozmiar obrazu został zmniejszony z 94 KB do 12 KB, co znacząco zmniejsza całkowity rozmiar strony.

Elastyczność użycia

Moduł można używać w dowolnym pliku .tpl. Jest kompatybilny z:

• tagami image;

• dodatkowymi polami;

• standardowymi szablonami DLE.

W razie potrzeby moduł można w dowolnym momencie włączyć i wyłączyć.

Optymalizacja szybkości ładowania

Jeśli nie odpowiada Ci szybkość ładowania strony i używasz obrazów różnych rozmiarów, Image Resizer pozwoli wyraźnie zobaczyć różnicę w Google PageSpeed.

Aby uzyskać jeszcze większą optymalizację, można:

• pobrać obrazy z /uploads/cache/;

• dodatkowo skompresować je za pomocą narzędzi (na przykład optipng);

• wgrać je ponownie na serwer.

Formaty zapisu parametrów

Przycinanie (Crop)

Przed przycięciem obraz jest automatycznie zmniejszany do minimalnie dopuszczalnego rozmiaru, po czym wykonywane jest kadrowanie.

Opis parametrów

• w — szerokość

• h — wysokość

• q — jakość (0–100)

• f — dodanie width i height w HTML

• d — pobieranie zewnętrznego obrazu na serwer

• e — orientacja skalowania:

  • 1 lub w — według szerokości

  • 2 lub h — według wysokości

  • 0 lub puste — według dłuższego boku

Dodatkowe możliwości

W panelu administracyjnym można wybrać metodę hash obsługiwaną przez serwer. Jest ona używana do tworzenia unikalnego sufiksu nazwy pliku, na przykład:

To jest fork modułu, poprawiono kod do działania na aktualnych wersjach DLE 19.0 (Oryginał znajduje się tutaj: https://github.com/dlenettr/image-resizer).

Jeśli kopiujesz ten plik na swoją stronę, podaj link do naszej strony jako autorów modyfikacji!