Kako se upravlja slikama artikala?

Slike su ključni dio prodajne stranice, ali i najčešći izvor sporog učitavanja i velikog prometa. WebShopHR slikama pristupa tako da se uploadaju u originalnoj kvaliteti, a kupcu se serviraju optimizirane verzije: smanjene, pretvorene u WebP i potpisane sigurnosnim ključem.

Upload do 5 MiB u tri formata

CMS dopušta upload slika u formatima JPEG, PNG i WebP, do maksimalne veličine od 5 MiB po slici. Ako kupac ili trgovac pokuša poslati drugi format ili preveliku datoteku, sustav odmah vraća jasnu grešku. Na taj se način u samom startu štiti kvaliteta i predvidljivost kataloga.

Svaka slika dobije jedinstveni ključ unutar tenanta

Kad se slika uploada, generira se ključ koji počinje identifikatorom tenanta, zatim identifikatorom artikla, a završava slučajnim UUID-om i ekstenzijom. Struktura ključa osigurava da se slike svakog dućana drže odvojeno unutar istog spremišta, a istovremeno onemogućuje pristup slikama koje ne pripadaju određenom artiklu. Ako zapis slike zbog neke greške ne uspije u bazi odmah nakon uploada, objekt se briše iz spremišta, tako da ne ostaju siročići u skladištu.

Brisanje oslobađa prostor odmah

Kad trgovac izbriše sliku u CMS-u, baza vraća veličinu datoteke i u istoj transakciji umanjuje iskorištenu prostornu kvotu, a zatim se objekt briše iz MinIO-a. Time se osigurava da trgovac ne plaća ni koristi prostor za slike koje više ne postoje u katalogu.

Predlošci nikad ne prikazuju sirovi ključ

U predlošcima se slike umetaju isključivo kroz predložačku funkciju koja iz ključa slike gradi potpisani imgproxy URL ili, kad je imgproxy isključen, fallback rutu /slike/{ključ}. Zabranjeno je postaviti sirovi src s MinIO ključem, što štiti dvije stvari: slike uvijek prolaze kroz optimizirani put, a slučajno ne može procuriti nikakva druga datoteka koja se nalazi u spremištu.

imgproxy stvara WebP i prilagođenu veličinu po zahtjevu

Slike se u dućanu ne serviraju izravno iz spremišta, već preko imgproxyja. Taj servis u letu pretvara sliku u WebP i prilagođuje joj veličinu ovisno o kontekstu. Detaljna slika na stranici proizvoda ide na 800 piksela, sličice u popisima na 400 piksela, a veće slike poput hero banera mogu ići i do 1600 piksela.

Ako imgproxy nije konfiguriran, sustav graciozno pada na izravnu rutu /slike/{ključ}, tako da slike nikad ne nestanu zbog nedostajuće konfiguracije.

URL-ovi su potpisani HMAC-SHA256

imgproxy URL-ovi nose kriptografski potpis izračunat HMAC-SHA256 algoritmom. Bez potpisa imgproxy odbija servirati sliku, što sprječava zloupotrebu: nitko ne može sastaviti proizvoljni resize URL i koristiti dućan kao besplatni servis za slike. U produkciji aplikacija odbija startati ako je postavljen URL imgproxyja, a nedostaju ključ i salt. Nikad se ne koriste javno poznati razvojni ključevi.

Sedmodnevno javno keširanje prilagođeno CDN-u

Javno servirane slike nose zaglavlje Cache-Control s javnim pristupom, rokom trajanja od sedam dana i oznakom immutable. To znači da preglednici i CDN mjesto drže kopiju sedam dana, jer se pretpostavlja da se generirani URL više ne mijenja. Time se znatno smanjuje opterećenje na aplikaciju i ubrzava učitavanje stranica.

Alt tekst je prvorazredno polje

Svaka slika u galeriji artikla ima polje za alt tekst i redni broj. Redni broj određuje koji redoslijed slika prikazuje na stranici proizvoda, a alt tekst služi kupcima koji koriste čitače ekrana i tražilicama koje analiziraju sadržaj. Alat za potpunost kataloga upozorava ako postoji aktivni artikl sa slikom, ali bez alt teksta, pa trgovac može brzo popraviti pristupačnost i SEO.

Sigurnosna ograničenja na ruti /slike/

Ruta za javno serviranje slika provjerava točan oblik ključa: mora sadržavati identifikator tenanta, identifikator artikla i naziv datoteke s dopuštenom ekstenzijom. Putanje s .., pogrešnom ekstenzijom ili nedostajućim dijelovima se odbijaju. Ovim se štiti da se preko iste rute ne mogu dohvatiti druge datoteke koje nisu javne slike artikala, primjerice digitalni proizvodi.

Zaključak

Slike u WebShopHR-u stoga nisu tek datoteke koje se uploadaju: one se optimiziraju, potpisuju, keširaju i štite. Trgovac uploada jednu kvalitetnu sliku, a kupci svugdje dobivaju brzu, odgovarajuće veliku WebP verziju bez dodatnog posla.

Više o temi: Katalog i zalihe.