Веројатно ви се случило ова. Страницата на производот изгледа дотерана во Shopify, фотографиите се остри во уредувачот, а потоа посетителите на мобилни уреди почнуваат да отскокнуваат додека вашиот резултат на PageSpeed е тврдоглаво во шеесеттите години. Проблемот обично не е „лошиот дизајн“. Туку големината на датотеките со слики е преголема за распоредот и секој дополнителен бајт мора да патува пред купувачот да го види производот, цената или копчето за додавање во кошничка.

Затоа одлуките за слики на излог никогаш не се само одлуки за дизајн. Тие влијаат на брзината на страницата , визуелниот квалитет и колку од страницата Google може да пребарува и рендерира доволно брзо за да биде важно. Ако сакате практична кратенка за промена на големината без нагаѓање, упатството за промена на големината на сликите од Јасин Малти е корисен придружник, бидејќи ви помага да ја разберете механиката пред да ја поставите следната серија.

Содржина

Зошто големините на датотеките со слики се важни во продавницата Shopify

Трговецот може да погледне дотерана страница на производот во администрацијата на Shopify и сепак да го пропушти основниот проблем. Страницата може да изгледа добро на лаптоп преку Wi-Fi, потоа да заглави на мобилен, главната слика се појавува доцна, а купувачот го превиткува превиткувањето пред страницата да се почувствува подготвена. Тој јаз помеѓу страница што изгледа добро и онаа што се вчитува брзо е местото каде што големината на датотеките со слики одлучува дали посетата ќе стане приход или проблем.

Скриената конкуренција на секоја страница

Секоја слика на излогот се натпреварува со текстот, скриптите, шемата и трпението на клиентот. Ако главната фотографија е преголема, таа прави повеќе од тоа што го троши пропусниот опсег, туку го забавува и моментот кога посетителот може да ја процени понудата. Тежината на сликата е прашање за конверзија и прашање на Core Web Vitals во исто време.

Трговците на Shopify обично го чувствуваат ова прво на страниците на производите и страниците за колекции. Неколку големи фотографии можат да го направат целиот распоред да изгледа тежок, особено на мобилните мрежи, а таа тежина се појавува на местата што се најважни, главниот лик, мрежата за колекции, зумот на производот и минијатурите. Главната слика има различна улога од минијатурата, па затоа не треба да носи ист товар со големина на датотека. Истото важи и за мрежите за колекции, каде што повторените слики брзо се натрупуваат и го казнуваат секое скролување.

Големината на датотеката со слики, исто така, влијае на тоа колку брзо страницата станува употреблива, поради што припаѓа во истиот разговор со планирањето на распоредот. Димензиите на суровата слика се важни, но големината на испорачаната датотека е она што прелистувачот треба да го преземе и декодира. Како што е објаснето во упатството за промена на големината на сликата од Јасин Малти , помал извоз може да ја зачува визуелната улога на сликата, а воедно да ја отстрани непотребната тежина.

Практичната исплата

Причината зошто ова е важно е едноставна. Основниот број на пиксели ја поставува основната линија, а компресијата и форматот ја одредуваат конечната големина на датотеката. Слика од 24 мегапиксели во 24-битен RGB содржи околу 72 милиони бајти сурови пикселни податоци, додека истата слика може да достигне околу 423,41 KB како JPEG со 100% квалитет или приближно 211,7 KB со JPEG со 90% квалитет, во зависност од опциите за извоз ( Scantips ). Тој јаз е причината зошто две продавници можат да користат слики што изгледаат речиси идентично, а сепак да добијат многу различни резултати од брзината.

Практично правило: Ако сликата е поважна за продажба отколку за декорација, дајте ѝ целна големина на датотеката пред да ја поставите.

Тоа е стандардот што треба да го користат трговците. Поставете буџет за секој термин во продавницата, а потоа усогласете ја датотеката со задачата. Херојскиот банер може да оправда поголема тежина од сликичката, но ниту еден од нив не треба да го принудува остатокот од страницата да носи дополнителен товар. Откако ќе се воспостави таа навика, страниците на производите се полесни за управување, а секое ново прикачување има место каде што ќе се смести, наместо да стане уште еден скриен проблем.

Големина на слика наспроти големина на датотека и зошто и двете се важни

Трговците често ги користат овие термини како да мислат исто, а потоа се прашуваат зошто сликата изгледа добро во администраторот, но го забавува излогот. Големината на сликата е димензиите на пикселите, ширина по висина. Големината на датотеката е тежината на извезената датотека во бајти на дискот, обично KB или MB, и се менува со компресија, формат и длабочина на битови. Две слики можат да делат исти димензии, а сепак да создадат многу различни трошоци за вчитување.

Дијаграм што ја споредува големината на сликата во пиксели со големината на датотеката во бајти за дигитална фотографија и графика.

Пикселите го поставуваат таванот

Пикселите дефинираат колку визуелни детали може да содржи датотеката. Слика од 24 мегапиксели во 24-битен RGB содржи околу 72 милиони бајти сурови пикселни податоци бидејќи 24 милиони пиксели × 3 бајти по пиксел = 72.000.000 бајти . Тој суров број е почетната точка за извозот, а не конечната тежина што ја добива прелистувачот.

Изборот за извоз брзо го менува резултатот. Истата изворна фотографија може да излезе со големина од околу 423,41 KB како JPEG со 100% квалитет и приближно 211,7 KB со JPEG со 90% квалитет. Пикселите остануваат исти, додека извозот зачувува повеќе или помалку од оригиналните детали.

Компресијата и форматот го одлучуваат резултатот

Многу ревизии на Shopify тука одат настрана. Трговците претпоставуваат дека големата слика мора да биде претешка за веб, но димензиите и тежината на датотеката се посебни одлуки. Сликата со големи димензии сè уште може да биде разумна датотека ако е добро извезена. Графиката со скромен изглед може да стане пренадуена ако е зачувана во погрешен формат или со погрешен квалитет.

Таа разлика е важна според улогата на излогот. Херојскиот банер може да има поголема визуелна тежина од минијатурата, но сликата од мрежа за колекција сепак треба да остане доволно светла за страницата да се вчита непречено. Зумираните слики од производот бараат доволно детали од пикселите за да се видат одблизу, додека местата за минијатури обично трошат пропусен опсег ако извозот задржува многу повеќе детали отколку што може да прикаже распоредот.

Правило: Пикселите одредуваат колку визуелни детали може да прикаже сликата. Големината на датотеката одредува колку треба да преземе вашиот купувач.

Држете ги тие два броја одделно и планирањето на сликите станува полесно. Тесниот простор за сликички нема да има корист од преголеми димензии. Сликата од зумирање на страницата на производот има потреба од доволно пиксели за да изгледа остро, но извезената датотека сепак мора да остане разумна за Core Web Vitals и за остатокот од страницата што треба да се вчита околу неа.

Споредба на JPEG, PNG, WebP и AVIF

Секој формат на слика служи за различна намена во продавницата на Shopify. Фотографијата од производот, логото и сликата од екранот бараат различен третман, дури и кога се наоѓаат во истата тема. Изберете го форматот врз основа на функцијата што сликата треба да ја изврши на страницата, а не врз основа на навика.

Инфографик што ги споредува JPEG, PNG, WebP и AVIF форматите на слики со описи на нивните карактеристики и случаи на употреба.

JPEG и PNG сè уште го заработуваат своето место

JPEG останува стандарден избор за фотографии. Добро се компресира, работи речиси насекаде и обично ги одржува сликите на производите доволно светли за веб. PNG одговара на слики на кои им се потребни остри рабови, рамна боја, транспарентност или текст, поради што логоата и графиката на корисничкиот интерфејс честопати припаѓаат таму иако датотеките обично се потешки.

Таа поделба е важна во Shopify бидејќи продавниците обично ги комбинираат двата вида средства. Фотографијата од животен стил зачувана како PNG обично има поголема тежина отколку што треба да носи продавницата. Логото зачувано како JPEG може да изгледа грубо или да ја изгуби транспарентноста, што создава чистење што може да се избегне подоцна. Форматот треба да ја следи работата, а не навиката.

Картичката за собирање подароци е добар пример. Ако сликата е чиста снимка од производ, JPEG обично ја намалува тежината без да го наруши изгледот што го добиваат купувачите. Ако средството е значка, икона или лого што се наоѓа врз обоена позадина, PNG подобро ги штити рабовите и избегнува грди ореоли.

WebP и AVIF ги намалуваат големините на датотеките

Современите формати обично ја намалуваат големината на датотеката дополнително. За пример слика со споредлив квалитет, JPEG со 75% е околу 1,25–1,53 MB , WebP со загуби е околу 0,72–0,88 MB , AVIF е околу 0,57–0,69 MB , а JPEG XL е околу 0,55–0,67 MB ( W3Techs ). Тоа е значаен пад во однос на постарите навики за извоз и објаснува зошто многу излози можат да ја намалат тежината без да ги направат фотографиите да изгледаат меки.

Проблемот е што изборот на формат сè уште зависи од самата содржина. WebP и AVIF можат да функционираат многу добро за фотографирање на производи, но графиките со транспарентност можат да се однесуваат различно. Ако датотеката е претежно фотографија, користете формат што ефикасно ја компресира таа слика. Ако е лого или графика со транспарентност, користете го форматот што ги одржува рабовите чисти.

На продавница на Shopify, тоа обично значи еден формат за банерот-херој, друг за логото и друг за снимки одблизу на производот. Правилниот избор е помалку за тоа што изгледа модерно, а повеќе за тоа што ја одржува страницата брза, а сепак ја прикажува сликата јасно на нејзиното вистинско место.

Правило за одлука: Фотографирајте со луѓе, производи или текстура, изберете JPEG или WebP. Рамна графика, логоа или снимки на екранот, изберете PNG. Ако вашиот работен тек може да поддржи резервна копија, AVIF или WebP е почистата опција за складирање во живо.

Како резолуцијата и компресијата ги менуваат броевите

Датотеката може да изгледа добро на вашиот екран, а сепак да биде многу потешка отколку што треба да биде. Тоа е делот што трговците го чувствуваат прво во Shopify, бидејќи истата слика може да се однесува многу различно како банер за херој, плочка со мрежа за колекција, зумирана слика од производ или мала минијатура. Резолуцијата контролира колку пиксели барате од прелистувачот да носи, а компресијата контролира колку од таа тежина се скратува пред да се вчита страницата.

Повеќе пиксели значат повеќе податоци

Поголемата слика не е само поголемо платно, туку повеќе сурови податоци што прелистувачот може да ги обработи. Како што беше прикажано претходно, сликата од 24MP содржи околу 72 милиони бајти сурови податоци пред да започне компресијата. Ако ја извезете истата сцена со поголем број пиксели отколку што е потребен на излогот, датотеката станува потешка дури и ако фотографијата изгледа речиси идентично откако ќе се прикаже.

Затоа преголемите експорти предизвикуваат повеќе од неред во складирањето. Тие додаваат тежина на пренос, го тераат прелистувачот да работи понапорно и можат да ја забават сликата точно на местото каде што купувачите очекуваат страницата да изгледа брзо. Плочката со мрежа за колекција не бара исто оптоварување како слика од производ што може да се зумира, а минијатурата бара многу помалку од која било од нив.

Компресијата ве спасува, но не ги ослободува дополнителните пиксели

Компресијата може да ја намали големата изворна датотека на нешто што Shopify може ефикасно да го понуди, но не ги намалува трошоците за користење на повеќе пиксели отколку што е потребно за поставување. Ако фотографијата од производот оди во галерија со зум, сакате доволно детали за да останете остри на добар екран. Ако истата слика оди само во картичка за собирање, испораката на верзијата во полна големина е залуден напор.

Чистиот начин да се размислува за тоа е едноставен. Пикселите ја поставуваат границата за отпад , бидејќи преголемите димензии создаваат тежина што може да се избегне. Поставката за квалитет ја поставува границата за заштеда , бидејќи одлучува колку детали ќе се задржат при извозот. Форматот контролира колку помага таа компресија , бидејќи различните типови датотеки не се намалуваат на ист начин.

За упатства за големината на сликите поврзани со случаите на употреба на Shopify, ова упатство за SEO слики на Shopify е корисен придружник. Помага да се поврзе одлуката за извоз со вистинското поставување, наместо да се третира секоја слика од продавницата како да служи за истата работа.

Главната слика, плочката за колекција и минијатурата бараат различни нивоа на детали. Тоа е делот што трговците обично го пропуштаат и затоа мала промена во резолуцијата може да изгледа безопасна во уредникот, а сепак да создаде потешка продавница во прелистувачот.

Core Web Vitals и SEO цената на тешките слики

Тешките слики му штетат на SEO на многу директен начин, бидејќи Google го мери искуството, а не намерата зад прикачувањето. На многу Shopify страници, најголемата видлива слика е она што најверојатно ќе го контролира искуството со вчитување. Ако таа слика е премногу тешка, Largest Contentful Paint забавува и посетителот чека подолго пред страницата да се почувствува употреблива.

Столбест дијаграм што покажува како зголемувањето на големината на датотеките со слики негативно влијае врз времето на вчитување на страницата „Најголемо време за вчитување на Contentful Paint“.

LCP обично се обвинува за погрешна работа.

Трговците честопати прво ги обвинуваат апликациите, скриптите или кодот на темата, а понекогаш се во право. Но, главната слика е честопати најлесната единствена победа. Големата главна фотографија може да го попречи моментот кога страницата ќе стане значајна, особено на мобилни уреди, каде што квалитетот на врската варира, а прозорецот за преглед е доволно мал за лесно да се забележат преголеми средства.

Другата метрика на која влијае тежината на сликата е Кумулативното поместување на распоредот . Ако вашата тема не резервира правилно простор за слики, распоредот скока како што се вчитуваат средствата. Тоа им се чини несмасно на купувачите и ја отежнува користењето на страницата. Темите на Shopify честопати веќе работат дел од оваа работа, но не секогаш доволно за да го спасат трговецот од лош работен тек со слики.

Целните големини не се случајни

Техничките упатства за веб-испораки најчесто бараат фотографии од производи со големина од околу 800 до 1000 пиксели и од 80 до 150 KB , главни слики под 200 KB и вкупен буџет за слики на страницата под 500 KB . Истите упатства ги поставуваат JPEG-датотеките често околу 200 до 600 KB , WebP од 150 до 450 KB , AVIF од 80 до 300 KB и PNG од 500 KB до 3 MB ( Vizua ). Овие опсези постојат бидејќи тежината на сликата и перформансите на страницата се поврзани.

Страницата не мора да биде вештачки мала за да биде брза. Треба да биде дисциплинирана. Ако вашите слики се преоптоварени, го принудувате прелистувачот да работи што не го подобрува искуството на купувачот. Тоа е директен SEO трошок, а не теоретски.

За поширокиот процес на ревизија фокусиран на Shopify, овој водич за SEO со слики за Shopify е корисна референтна точка.

Целни големини на датотеки со слики според поставувањето на Shopify

Најлесниот начин да се престане со нагаѓање е да се постави буџет за големината на датотеката за секоја визуелна улога на излогот. Херојскиот банер врши различна работа од минијатурата, а мрежата за собирање не треба да се извезува со иста тежина како слика од производ што може да се зумира. Откако трговците ќе доделат големини на датотеки со слики на вистинските пласмани, продавницата е полесна за одржување и многу полесна за ревизија.

Дозволете распоредот на излогот да ги диктира вашите извозни избори

Сликите со целосна ширина обично бараат повеќе простор отколку малите блокови за распоред. Упатствата за одзивни слики најчесто укажуваат на слики со целосна ширина од околу 1600 px и 200 до 300 KB , помали слики со распоред од 25% до 50% поблиску до 800 px и 70 до 350 KB , како и слики со големина од околу 2× поголем простор за прикажување, така што сепак изгледаат остро на екрани со висока густина. Во пракса, тоа значи дека истата изворна фотографија честопати има потреба од различни експорти, еден за просторот што го пополнува и еден за поострото рендерирање што го очекува густиот екран.

Цели за големина на датотеки со слики според поставеноста на Shopify Поставување Ширина на целта Големина на целната датотека Препорачан формат
Банер за херој Херој на врвот на страницата Околу 1600 пиксели 200 до 300 KB JPEG или WebP
Сликичка од мрежа за колекција Плочки за колекција Околу 400 до 600 пиксели 40 до 80 KB JPEG или WebP
Фотографија од страницата на производот Главна галерија на производи Околу 800 до 1200 пиксели 100 до 200 KB JPEG, WebP или AVIF
Слика со сликички или примерок Мал потпорен отвор Околу 200 до 400 пиксели Чувајте што е можно полесни JPEG или PNG, во зависност од содржината

Херојската слика може да има поголема тежина бидејќи исполнува поголем дел од прегледниот прозорец. Плочката за колекција не може. Тоа е разликата што трговците треба да ја имаат предвид кога извезуваат слики за деловите на Shopify, бидејќи големината на датотеката треба да одговара на просторот што сликата го зафаќа на страницата.

Зошто истата слика може да има потреба од повеќе од еден извоз

Страницата на производот честопати прикажува неколку верзии од истата датотека преку адаптивно означување. Тоа е нормално. Прелистувачот треба да добие помала датотека за помали екрани, а поголема само таму каде што распоредот ја бара. Ова поставување го одржува квалитетот на зумирање недопрен без непотребно испраќање масовно внимание до секој посетител.

Истата логика важи и надвор од галеријата со производи. На излогот честопати му е потребен еден третман за главниот лик, друг за картички за собирање подароци и друг за слики одблизу. Ако сакате да ги одржувате средствата за споделување на социјалните мрежи усогласени со визуелните елементи на излогот, ова упатство за слики на социјалните мрежи на Shopify помага да се поврзат тие потреби надвор од страницата на производот со истиот работен тек на слики.

Правило на Shopify: Нека слотот одлучи за извозот. Херојот може да биде дарежлив. Минијатурата од мрежа не може.

Тоа правило ја спречува честата грешка да се прикачи една огромна слика и да се надеваме дека темата ќе го среди проблемот. Темите можат да помогнат, но не можат да ја поништат лошата одлука за извоз.

Чести заблуди што ги забавуваат продавниците

Многу бавни продавници на Shopify се бавни затоа што некој верувал во полувистинито правило и постојано го повторувал. Тие навики се појавуваат во ревизиите одново и одново, обично затоа што советот на почетокот звучел разумно и никогаш не бил проверен во однос на тоа како се вчитува продавницата. Откако ќе ја одделите навиката од перформансите, поправките обично се едноставни.

Пет верувања кои предизвикуваат надуеност што може да се избегне

  • Повисоката резолуција секогаш значи подобар квалитет. Тоа престанува да важи откако сликата ќе стане поголема од просторот што го исполнува. Дополнителните пиксели не прават ништо за погледот на купувачот, тие само додаваат тежина.
  • PNG е секогаш поостар од JPEG. PNG е вистинскиот избор за логоа и графики со остри рабови, но фотографиите на производите обично не бараат таков дополнителен товар без загуби.
  • Shopify автоматски оптимизира сè. Shopify помага во некои случаи, но оригиналното прикачување сè уште ја поставува границата за тоа колку може да биде тежок имотот.
  • WebP му штети на SEO бидејќи Google не може да го прочита. Тоа верување е застарено. Системите за пребарување можат да прикажуваат модерни формати како обични слики.
  • Големината на сликата е важна само на десктоп компјутер. Мобилните купувачи прво ја чувствуваат непотребната тежина на датотеките, бидејќи нивните уреди и врски имаат помалку простор за грешки.

Трговците за корекција можат веднаш да го користат

Поправката започнува со улогата, а не со навиката. Сликата-херој треба да има доволен квалитет за да го задржи врвот на страницата. Плочката за колекција треба да остане светла за мрежата да се вчитува чисто. Зумираната слика може да содржи повеќе детали бидејќи служи за друга задача, додека минијатурата или примерокот треба да останат мали колку што дозволува распоредот.

Затоа едно правило за извоз за секоја слика предизвикува проблеми. Ако средството е фотографија, извезете за брзина и веродостојна боја. Ако е графика со текст или транспарентност, заштитете ги рабовите и прифатете дека датотеката може да биде поголема. Ако припаѓа во тесен отвор, не поставувајте датотека наменета за прикажување со целосна ширина.

Како што е опфатено во делот за резолуција, слика од 24MP може да се приближи до 2 до 8 MB по компресијата, што е доволно за да се покаже зошто самиот број на пиксели не ви кажува дали сликата е подготвена за веб. Основното прашање е дали датотеката се совпаѓа со позицијата на Shopify што ја користи. Херојот може да толерира повеќе од мрежна картичка, а сликата од зумирање може да толерира повеќе од минијатура. Извозот мора да одговара на улогата.

Поврзана грешка е претпоставката дека секој ресурс заслужува исто чистење на метаподатоците. Ако сликата е доволно важна за да се прикаже, доволно е важна прво да се ревидира. Користете го генераторот на алтернативен текст за слики од Shopify за да го одржите тој дел од работниот тек конзистентен, а потоа процените ја големината на датотеката според просторот што ќе го пополни.

Тоа е делот што повеќето продавници го пропуштаат. Датотеката не мора да биде мала. Треба да биде соодветна.

Повторлива контролна листа за вашата следна серија слики

Најчистиот работен тек со слики е оној што вашиот тим може да го повтори без да нагаѓа. Секој пат кога истите проверки се случуваат по ист редослед, добивате помалку преголеми поставувања, помалку изненадувања со распоредот и помалку бавни страници на производи скриени во каталогот. Ако подготвувате објавување на нов производ или освежувате тема, извршете ја серијата низ оваа рутина пред да се објави нешто.

Едноставна рутина за извоз што одговара на Shopify

  1. Извоз на целната ширина за поставеноста. Херојот, картичката за колекција, сликата за зумирање на производот и минијатурата имаат различни задачи, затоа не прикачувајте поголема датотека само затоа што изворната слика го дозволува тоа.
  2. Изберете го форматот според улогата. Фотографиите обично се вклопуваат во JPEG, WebP или AVIF. Логоата и графиките со многу текст подобро се вклопуваат во PNG кога транспарентноста или острите рабови се важни.
  3. Зачувајте верзија за складирање во живо и верзија за зумирање доколку е потребно. Датотеката за зумирање може да задржи повеќе детали, но видливата страница не треба да ја носи таа тежина освен ако распоредот навистина не го бара тоа.
  4. Кога е можно, користете го полесниот модерен формат. Користете WebP или AVIF за сликата во живо, а JPEG-от задржете го како резервна опција каде што компатибилноста е важна.
  5. Проверете ги метаподатоците на сликата и алтернативниот текст пред да го објавите. Ако средството е доволно важно за да се прикаже, доволно е важно и за ревизија. Користете го генераторот на алтернативен текст на RankEngine за да го одржите тој дел од работниот процес конзистентен.

Слика од екранот од https://rankengine.app

Каква конзистентност ви нуди

Малите подобрувања се натрупуваат низ целиот каталог. Една посветла слика од главниот лик сама по себе нема да ја трансформира продавницата, туку цел сет од добро димензионирани фотографии од производи, плочки од колекцијата и минијатури може да го направи излогот да изгледа почист, побрз и полесен за купување. Купувачите го забележуваат тоа дури и ако никогаш не зборуваат за големината на датотеките.

Ако вашиот тим обработува метаподатоци за слики во голем обем, генераторот на алтернативен текст на RankEngine може да го одржи тој дел од работниот процес во движење без да го претвори секое прикачување во рачна задача.

Применете ја оваа рутина на вашата следна серија и вашата продавница ќе се вчита побрзо веднаш.