Modernizacja systemu przetwarzania i wyświetlania obrazów (Tamaranga v2)
Stos technologiczny: Rocky Linux 8, Nginx 1.28, PHP 8.x, ImageMagick (Imagick).
1. Cel prac
Przenieść system na format WebP, wdrożyć wsparcie dla wszystkich nowoczesnych formatów (HEIC, AVIF i inne), zwiększyć ostrość obrazów, zwiększyć pole widzenia o 30% i zapewnić poprawne wyświetlanie zdjęć w różnych formatach bez przycinania.
2. Przyjmowanie i odczyt plików (Input)
System musi poprawnie przyjmować, odczytywać i przetwarzać do późniejszej generacji podglądów następujące formaty:
- Standardowe: JPG, PNG, GIF, BMP.
- Nowoczesne: WEBP, HEIC (z iPhone'a), AVIF.
- Wymaganie: Dla HEIC i AVIF należy upewnić się, że na serwerze zainstalowane są odpowiednie biblioteki (libheif, libavif) i że ImageMagick je obsługuje.
3. Przetwarzanie serwerowe i Ultra-Sharp jakość (Backend)
Należy zmodyfikować klasę przetwarzania obrazów, wdrażając łańcuch filtrów dla maksymalnej ostrości:
3.1. Konwersja
- Original: Zachować w JPEG (kompresja 90%, maks. szerokość 1920px).
- Podgląd (Wszystkie rozmiary): Konwertować na WebP (jakość 82%,
method=6). - EXIF Fix: Automatyczny obrót na podstawie danych orientacji.
3.2. Algorytmy ostrości (ImageMagick)
Aby wyeliminować efekt „rozmycia” przy zmniejszaniu zdjęć, należy użyć:
- Filtr Lanczos: Resampling przy
resize powinien odbywać się przez wysokiej jakości filtr -filter Lanczos. - Unsharp Mask: Po resize zastosować
-unsharp 0x0.7+0.7+0.008 dla mikro-kontrastu detali. - Korekcja kolorów: Wymuszone
-colorspace sRGB i lekkie zwiększenie kontrastu -sigmoidal-contrast 3,50%.
3.3. Czyszczenie
-trim: Auto-usuwanie zbędnych pustych pól na krawędziach zdjęcia (aby produkt był większy).-strip: Całkowite usunięcie metadanych (GPS, dane aparatów) w celu zmniejszenia rozmiaru pliku.
3.4. Nowa siatka rozmiarów (po dłuższym boku)
- szSmall: 200 px | szMedium (Lista): 640 px | szView (Karta): 1024 px | szZoom: 1600 px.
4. Frontend: Wizualna siatka i proporcje (CSS)
Zadanie: powiększyć karty o 30%, zachowując indywidualne proporcje zdjęć.
- Powiększenie: Zwiększyć rozmiar kafelka ogłoszenia na PC o 30%.
- Stała ramka: Utworzyć kontener dla zdjęć z sztywno określoną wysokością (na przykład 300px) i tłem
#ffffff. - Logika proporcji:
- Używać
object-fit: contain;. - Wszystkie zdjęcia pionowe, poziome i kwadratowe powinny być w pełni widoczne bez przycinania.
- Wszystkie zdjęcia powinny być wyśrodkowane w ramce.
- Wyrównanie: Ceny i nazwy pod zdjęciem powinny być ustawione ściśle w jednej linii w całym rzędzie, niezależnie od kształtu obrazu powyżej.
5. Skrypt migracji (Backlog)
Opracować skrypt PHP CLI do tła przetwarzania obecnych 5700 ogłoszeń:
- Odczyt starych oryginałów -> Zastosowanie filtrów ostrości -> Konwersja do WebP -> Usunięcie starych podglądów JPEG.
6. Konfiguracja Nginx
- Konfiguracja typów MIME dla WebP, AVIF, HEIC.
- Cache statycznych plików
expires 30d. - Rozkład obciążenia przetwarzania na wszystkie 8 rdzeni CPU
