Снимки на автомобили в голям мащаб: защо директните връзки към галериите от търгове се чупят

Една обява от търг на едро има между двадесет и шестдесет снимки. При милион активни автомобила това са десетки милиони изображения — и за разлика от полетата със спецификации, потребителите наистина ги гледат. Решетка с обяви, в която една трета от миниатюрите са счупени, изглежда като счупен продукт, независимо колко добри са данните отдолу.

Наивният подход е да пазите адреса на снимката от източника заедно с обявата и да оставите браузъра да я изтегли. В разработка работи. Ето защо не оцелява.

Четири причини директните връзки да се провалят

1. Адресите от източника изтичат

Това е фаталната. Платформите за търгове често спират да сервират медия за затворени лотове — понякога до дни, понякога след седмици и рядко с някакво обявление. Активните обяви изглеждат наред. Историческият ви архив тихо гние от най-старата страна и докато някой забележи, месеци галерии са изчезнали без начин да бъдат възстановени.

2. Защита срещу hotlink

Много източници проверяват заглавката Referer или изискват валидна бисквитка на сесия. Начинът, по който това се проваля, е наистина неприятен: снимките се зареждат при вас (наскоро сте посетили източника), не се зареждат при потребителите ви и се държат различно в различните браузъри според политиката за referrer. Изглежда като периодичен бъг и често се диагностицира погрешно със седмици.

3. Размери на файловете за друга употреба

Галериите от източниците са JPEG в пълна резолюция, обикновено по 2–6 MB. Зареждането на решетка с двадесет и четири карти по една миниатюра означава изтегляне на около 60 MB, за да се покаже страница, която се нуждае от около 400 KB снимки. На мобилно устройство това не е бавно — неизползваемо е.

4. Нямате контрол върху наличността

Възприеманата бързина на продукта ви става функция на няколко чужди CDN, с които нямате отношения, нямате SLA и нямате контрол върху кеша. Една бавна сутрин при източник става ваш инцидент.

Какво трябва да прави архивът със снимки

Копирането на снимки е лесната част. Ето свойствата, които определят дали копието си струва разходите за съхранение:

1. 1Копирайте при импортиране, не при поискване. Мързеливото копиране означава, че първият потребител, който отвори стар лот, предизвиква изтегляне от адрес, който може вече да не работи. Копирайте при първата поява на обявата, докато източникът още я сервира.
2. 2Прекодирайте. WebP с разумно качество обикновено намалява значително размера спрямо оригиналния JPEG без видима разлика в решетката с обяви.
3. 3Сервирайте няколко размера. Решетка с миниатюри и галерия на цял екран имат напълно различни изисквания и една снимка за двете хаби или трафик, или детайл.
4. 4Стабилни адреси, които надживяват лота. Това е целият смисъл. Ако сервираният адрес се счупи при затварянето на търга, сте изградили скъп кеш, а не архив.
5. 5Пазете реда и ролята. Коя снимка е основна, към коя част на автомобила принадлежи всяка, екстериор срещу интериор срещу детайли на щетите. Галериите в произволен ред са осезаемо по-неудобни.
6. 6Записвайте размерите. Без ширина и височина в данните всяка снимка предизвиква разместване на страницата при зареждане, което е проблем и за потребителите, и наказание в Core Web Vitals.

curl -s "https://api.thecarapi.com/api/auction-images/encar/38112900" \
  -H "X-API-Key: $API_KEY"

Ефективно използване на галериите

Два модела, които обясняват по-голямата част от практическата разлика в бързината на страниците.

Не извличайте галерии при търсене

Резултатите от търсенето се нуждаят от по една миниатюра на карта. Пълни галерии за двадесет и четири резултата са голям отговор с данни за снимки, които потребителят почти сигурно никога няма да отвори. Използвайте миниатюрата в картата и извличайте галерията едва когато се отвори изгледът с детайли.

// Карта в търсенето — само миниатюра, от отговора на търсенето
<img
  src={listing.thumbnail_url}
  alt={`${listing.registration_year} ${listing.clean_make} ${listing.clean_model}`}
  width={400}
  height={300}
  loading="lazy"
/>

// Изглед с детайли — галерията се извлича при отваряне, първата снимка веднага
const images = await fetch(
  `${API}/api/auction-images/${site}/${id}`,
  { headers: { 'X-API-Key': key } }
).then(r => r.json());

Пишете истински alt текст

Снимките на автомобили имат необичайно предимство тук: разполагате със структурирани данни, които описват точно какво има на снимката. alt="2021 Kia Niro, екстериор отпред в три четвърти" не струва нищо за генериране, наистина помага на потребителите с екранни четци и е едно от малкото места, където достъпността и SEO за снимки сочат точно в една посока. Празни alt атрибути на страница, чието цялото съдържание са автомобили, са пропилян сигнал.

Сметката за съхранението

Струва си да се направи изрично, защото интуицията обикновено греши и в двете посоки.

Съхранението на няколко терабайта е евтино. Разходите, които наистина болят, са другаде: трафикът през резидентни проксита за изтегляне на оригиналите и изходящият трафик от CDN за сервирането им след това — който расте с трафика ви, а не с каталога, и затова е сметката, която расте точно когато нещата вървят добре. Разбивката на разходите за скрейпване поставя двата реда в контекст.

Накратко за правата

Снимките в обявите са обекти на авторско право и позицията за повторното им хостване е наистина различна от позицията за извличане на фактически характеристики. Това не е правен съвет и отговорът варира по юрисдикции и по условията, при които работите — но това е реално съображение и една от съществените разлики между самостоятелното събиране на снимки и получаването им от доставчик с търговски отношения с източниците.

За по-пълна картина какво съдържат данните от търговете и как да ги използвате, започнете с ръководството за данни от търгове или вижте ендпойнтите за снимки в справочника.