Domov › Telefon › CSS: vložte obrázek do oblasti. Formátování obrázků pomocí plátna Jak oříznout obrázek v HTML

CSS: vložte obrázek do oblasti. Formátování obrázků pomocí plátna Jak oříznout obrázek v HTML

V některých případech se obsah bloku objeví mimo hranice prvku a překrývá se s ním. Chcete-li řídit chování prvků na úrovni bloku, použijte vlastnost overflow, která určuje, jak se má zobrazit obsah přesahující blok.

Pomocí vlastnosti clip můžete oříznout prvek na zadané rozměry.

1. Vlastnost přetečení

Obsah prvků bloku může přetékat blok, když má blok explicitně výšku a/nebo šířku. Bez zadání výšky se blok roztáhne, aby se přizpůsobil obsahu, pokud není umístěn na pozici: absolutní; nebo poloha: pevná; . Text může přetékat blok na výšku, obrázky - na výšku a šířku.


Hodnoty:
viditelné	Výchozí hodnota. Veškerý obsah bude viditelný bez ohledu na velikost bloku kontejneru. Je možné překrývat obsah sousedních bloků.
svitek	Přidá posuvníky do oblasti zobrazení prvku, které se zobrazí, i když se obsah vejde do bloku. Rozměry nádoby se nemění.
auto	Přidává posuvníky pouze v případě potřeby.
skrytý	Skryje obsah, který přesahuje hranice bloku. Může skrýt nějaký obsah. Používá se pro kontejnerové bloky obsahující plovoucí prvky. Zabrání také zobrazení pozadí nebo ohraničení pod plovoucími prvky (které mají plovoucí: left/right; vlastnost nastavenou. Tím se nezmění velikost kontejneru.

Rýže. 1. Ořízněte obsah bloku pomocí vlastnosti přetečení Syntaxe: div ( šířka: 200px; výška: 150px; přetečení: skryté; )

2. Vlastnost Overflow-x

Tato vlastnost určuje, jak bude pravý okraj obsahu uvnitř bloku oříznut, pokud přeteče.

Syntax:

Div ( overflow-x: skryté; )

3. Přetečení-y vlastnost

Tato vlastnost určuje, jak bude oříznut spodní okraj obsahu uvnitř bloku, pokud přeteče.

Syntax:

Div (overflow-y: skryté; )

4. Vlastnost klipu

Tato vlastnost určuje, jak velká část prvku bude viditelná. Část prvku, která zůstane viditelná po oříznutí, se nazývá oblast oříznutí. Oříznutí se aplikuje na prvek, který je zpočátku plně viditelný. Tato vlastnost se vztahuje na prvky, které mají vlastnost position nastavenou na absolutní nebo pevnou.

V tomto článku se naučíme, jak měnit velikost a ořezávat obrázky pomocí prvku v HTML5, a když už jsme u toho, dejme ovládacím prvkům stylový design stejně jako ve fotoeditorech.

V dnešní době je mnoho webových stránek a webových aplikací vybaveno technologií pro zpracování obrazu. To lze provést na straně serveru, což způsobí časové náklady na přenos potenciálně velkého obrazu. Abyste tomu zabránili, můžete zpracovat obrazy na klientském počítači, abyste proces urychlili.

Uděláme to přes plátno, nakreslíme obrázky v požadované velikosti a pak načteme nové obrázky. Mnoho prohlížečů tuto metodu podporuje, takže můžeme začít hned s menším omezením výkonu.

Formátování velkých obrázků může zpomalit prohlížeč nebo způsobit jeho úplné zastavení. To nás nutí přemýšlet o nastavení limitů pro nahrané obrázky. Pokud je důležitá kvalita výsledných obrázků, pak nás možná překvapí, v co je prohlížeč promění. Na internetu můžete najít několik technologií pro zlepšení kvality zpracování obrazu, ale nebudeme je zde uvažovat.

Za tímto účelem začínáme pracovat!

Označení

V naší ukázce budeme pracovat s jedním daným obrázkem:

Vše! Nepotřebujeme žádné další HTML.

CSS

Ani CSS kód nebude příliš velký. Pojďme definovat styly pro resize-container a samotný obrázek.

Resize-container ( pozice: relativní; zobrazení: vložený blok; kurzor: přesun; okraj: 0 auto; ) .resize-container img ( display: block ) .resize-container:hover img, .resize-container:active img ( obrys: 2px přerušovaná rgba(222,60,80,.9 )

Nyní nastavíme pozice a styly pro jednotlivé „úchyty pro změnu velikosti“. Jedná se o malé čtverečky umístěné v rozích obrázků, kterými přetažením změníme velikost obrázku.

Resize-handle-ne, .resize-handle-ne, .resize-handle-se, .resize-handle-nw, .resize-handle-sw ( pozice: absolutní; zobrazení: blok; šířka: 10px; výška: 10px; pozadí: rgba(222,60,80,.9); .resize-handle-nw (nahoře: -5px; vlevo: -5px; kurzor: nw-resize; ) .resize-handle- sw; ( dole: -5px; vlevo: -5px; kurzor: sw-resize; ) .resize-handle-ne (nahoře: -5px; vpravo: -5px; kurzor: ne-resize; ) .resize-handle-se (dole : -5px vpravo: -5px;

JavaScript

Začněme vytvořením proměnné a plátna v Canvas.

Var resizeableImage = function(image_target) ( var $container, orig_src = new Image(), image_target = $(image_target).get(0), event_state = (), constrain = false, min_width = 60, min_height = 60, max_width = 800, max_height = 900, resize_canvas = document.createElement("canvas" )); resizeableImage($(".resize-image"));

Nyní vytvoříme spouštěcí funkci, která se spustí okamžitě. Tato funkce pracuje s kontejnerem, ve kterém je obrázek uvnitř, nastavuje velikost a kopíruje původní obrázek pro oříznutí. Také přiřadíme objekt jQuery, abychom na něj mohli později odkazovat a pomocí operátorů pohybu myši reagovat na tažení myší.

Var resizeableImage = function(image_target) ( // ... init = function())( // Vytvořte nový obrázek s kopií původního zdroje // Při změně velikosti vždy použijeme tuto původní kopii jako základní orig_src. src =image_target.src; // Přidání úchytů pro změnu velikosti $(image_target).wrap("

").před(" ").před(" ").po(" ").po(" "); // Získání proměnné pro kontejner $container = $(image_target).parent(".resize-container"); // Přidání událostí $container.on("mousedown", ".resize-handle", startResize ); //... init();

Funkce startResize a endResize sdělují prohlížeči, kdy má začít věnovat pozornost pohybu myši a kdy přestat.

StartResize = function(e)( e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove", změna velikosti); $(document).on("mouseup", endResize ); endResize = function(e)( e.preventDefault(); $(document).off("myší touchend", endResize); $(document).off("mousemove touchmove", změna velikosti); );

Než začnete se sledováním myši, musíte při požadavku na stránku zkontrolovat aktuální nastavení klienta. uložíme je do proměnné event_state a použijeme je později v naší práci.

SaveEventState = function(e)( // Uložení počátečních podrobností události a stavu kontejneru event_state.container_width = $container.width(); event_state.container_height = $container.height(); event_state.container_left = $container.offset(). left; event_state.container_top = $container.offset().top; event_state.mouse_x = (e.clientX || e.pageX || e.originalEvent.touches.clientX) + $(window).scrollLeft(); (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); // Toto je oprava pro mobilní safari // Z nějakého důvodu neumožňuje přímou kopii vlastnosti touches if(typeof e.originalEvent.touches !== "undefined")( event_state.touches = ; $.each(e.originalEvent.touches, function(i, ob)( event_state.touches[i] = ( ); event_state.touches[i].clientX = 0+ob.clientX;

Funkce změny velikosti je nejdůležitější. Aktivuje se, když je obraz roztažen. Pokaždé vypočítáme nové velikosti obrázků v závislosti na nové poloze čtverců.

Dále přidáme možnost omezit velikost obrázku pomocí klávesy Shift nebo proměnné.

Vezměte prosím na vědomí: Vzhledem k tomu, že ve skutečnosti měníme velikost obrázku, spíše než mu dáváme novou délku a výšku, stojí za to přemýšlet o tom, jak moc můžeme použít funkci resizeImage k řízení výkonu serveru.

Nové velikosti obrázků

Kreslení obrázků v Canvas je stejně snadné jako drawImage . Nastavíme výšku a délku obrázku a poté poskytneme originál. ToDataURL také používáme k získání verze výsledku operace zakódované v Base64.

K dispozici jsou úplné vysvětlení možností dostupných pro tuto operaci.

ResizeImage = function(width, height)( resize_canvas.width = width; resize_canvas.height = výška; resize_canvas.getContext("2d")).drawImage(orig_src, 0, 0, šířka, výška); $(image_target).attr( "src", resize_canvas.toDataURL("image/png"));

Příliš snadné? Existuje jedno upozornění: obrázek musí být hostován ve stejné doméně jako naše stránka nebo . Pokud tomu tak není, budete mít problémy s „poskvrněným plátnem“.

Zvyšování přes další vrcholy

Nyní byste měli mít funkční demo. Ale ještě to není hotové. V tuto chvíli můžeme obrázek protáhnout pouze jedním rohem, ale chceme použít všechny čtyři. Chcete-li to provést, musíte pochopit, jak to funguje.

Když obrázek natáhneme, musí se pohnout i rohy sousedící s drženým rohem, ale opačný konec obrázku musí být zafixován.

Kód můžeme změnit tak, že když se obrázek natáhne v libovolném úhlu, změní se. Pojďme aktualizovat funkci změny velikosti:

Změna velikosti = function(e)( var mouse=(),width,height,left,top,offset=$container.offset(); mouse.x = (e.clientX || e.pageX || e.originalEvent.touches .clientX) + $(window).scrollLeft();y = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); různě v závislosti na přetaženém rohu a omezení if($(event_state.evnt.target).hasClass("resize-handle-se"))( width = mouse.x - event_state.container_left; height = mouse.y - event_state.container_top ; left = event_state.container_left; top = event_state.container_top ) else if($(stav_udalosti.evnt.target).hasClass("změna velikosti-sw"))( šířka = stav_události.šířka_kontejneru - (myš.x - stav_události); .container_left = mouse.y - event_state.container_top; top = event_state.container_top else if($(stav_udalosti.evnt.target).hasClass("změna velikosti-nw") šířka = stav_události.šířka_kontejneru - (myš.x - stav_události.vlevo_kontejneru); výška = stav_události.výška_kontejneru - (myš.y - stav_události.vrch_kontejneru);< max_width && height < max_height){ // To improve performance you might limit how often resizeImage() is called resizeImage(width, height); // Without this Firefox will not re-calculate the the image dimensions until drag end $container.offset({"left": left, "top": top}); } }

vlevo = myš.x;

top = myš.y;

if(constrain || e.shiftKey)( top = mouse.y - ((šířka / orig_src.width * orig_src.height) - výška); ) ) else if($(event_state.evnt.target).hasClass("změna velikosti -handle-ne"))( width = mouse.x - event_state.container_left; height = event_state.container_height - (mouse.y - event_state.container_top); left = event_state.container_left; top = mouse.y; if(constrain | |. e.shiftKey)( top = mouse.y - ((šířka / orig_src.width * orig_src.height) - výška); ) ) // Volitelně zachovat poměr stran if(omezit || e.shiftKey)( výška = šířka / orig_src.width * orig_src.height ) if(width > min_width && height > min_height && width

Nyní zkontrolujeme, který úchyt pro změnu velikosti byl použit, a použijeme potřebné změny.

Přesouvání obrázku

StartMoving = function(e)( e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove", move); $(document).on("mouseup", endMoving ); endMoving = function(e)( e.preventDefault(); $(document).off("mouseup", endMoving); $(document).off("mousemove", pohyb); );

V pohyblivé funkci musíme zjistit polohu levého horního čtverce. Měl by se rovnat počátečnímu s malým offsetem vypočítaným z pohybu ostatních polí.

Moving = function(e)( var mouse=(); e.preventDefault(); e.stopPropagation(); mouse.x = (e.clientX || e.pageX) + $(window).scrollLeft(); myš .y = (e.klientY || e.stránkaY) + $(okno).scrollTop(); $container.offset(( "vlevo": myš.x - (stav_události.myši_x - stav_události.kontejner_vlevo), "nahoře" : myš.y - (stav_události.myší_y - stav_události.nahoře_kontejneru) ));

Oříznutí obrázku

Nyní, když jsme se naučili měnit velikost, musíme přidat oříznutí obrázku. Namísto toho, abychom nechali uživatele bojovat s velikostí oříznutí, vytvořme pouze rám, který je třeba umístit na správné místo a vše bude kolem něj oříznuto. To jim dá příležitost upravit si obrázek, jak chtějí, a zároveň vytvořit výsledné obrázky jednotné velikosti.

Chcete-li to provést, musíte přidat následující kód HTML:

Je důležité pamatovat na to, že rámeček musí mít vždy jinou barvu než pozadí stránky, jinak mohou nastat problémy.

Překryvná vrstva ( pozice: absolutní; vlevo: 50 %; nahoře: 50 %; levý okraj: -100 pixelů; horní okraj: -100 pixelů; z-index: 999; šířka: 200 pixelů; výška: 200 pixelů; ohraničení: plné 2 pixely rgba( 222,60,80,.9); box-sizing: content-events: none; .overlay:after, .overlay:before (obsah: ""; pozice: absolutní; zobrazení: blok; šířka: 204px; ; výška: 40px: přerušovaný 2px rgba(222,60,80,.9): přerušovaný 2px rgba(222,60,80,.9); margin-top: -40px ) .overlay:after ( bottom: 0; margin-left: -2px; margin-bottom: -40px; ) .overlay-inner:after, .overlay -inner:before ( content: ""; pozice: absolutni: block width: 204px; border-top: dashed 2px rgba(222,60,80,.9); .overlay-inner:before ( left: 0; margin-left: -40px; margin-top: -2px; ) .overlay-inner:after ( right: 0; margin-right: -40px; margin-top: -2px) .btn-crop ( pozice: absolutní; svislé zarovnání: dole;

vpravo: 5px;

dole: 5px;

odsazení: 6px 10px;

z-index: 999;

barva pozadí: rgb(222,60,80);

hranice: žádná;

border-radius: 5px;

Přidejme touchstart a touchend všude tam, kde máme mousedown , a mouseup spolu s touchmove kdekoliv máme mousemove .

// V init()... $container.on("mousedown touchstart", ".resize-handle", startResize); $container.on("mousedown touchstart", "img", startMoving); //V startResize() ... $(document).on("mousemove touchmove", move); $(document).on("dotykový konec myši", endMoving); //V endResize()... $(document).off("mouseup touchend", endMoving); $(document).off("mousemove touchmove", pohyb); //V startMoving()... $(document).on("mousemove touchmove", move); $(document).on("dotykový konec myši", endMoving); //V endMoving()... $(document).off("mouseup touchend", endMoving); $(document).off("mousemove touchmove", pohyb);

Vzhledem k tomu, že máme připojená mobilní zařízení, existuje možnost, že uživatel použije gesto „zmáčknutí“ obrázku prsty, aby jej zmenšil. Existuje jedna velmi pohodlná knihovna s názvem Hammer, která vám umožňuje rozpoznat mnoho gest. Ale protože potřebujeme pouze jeden, napíšeme ho krátce bez dalších skriptů.

Možná jste si všimli, že funkce saveEventState je již uložena v dotykových informacích. Teď to budeme potřebovat.

Nejprve zkontrolujeme přítomnost „dvou dotyků“ a vzdálenost mezi nimi. Díváme se také na to, zda se při pohybu zmenšuje vzdálenost mezi nimi. Nyní aktualizujme přesun:

Pohyb = function(e)( var mouse=(), dotyky; e.preventDefault(); e.stopPropagation(); dotyky = e.originalEvent.touches; mouse.x = (e.clientX || e.pageX || touches.clientX) + $(window).scrollLeft(mys.y = (e.clientY || e.pageY || touches.clientY) + $(window).scrollTop( $container.offset( "); left": mouse.x - (event_state.mouse_x - event_state.container_left), "top": mouse.y - (event_state.mouse_y - event_state.container_top) )); // Sledujte gesto přiblížení sevřením při pohybu if(event_state. dotyky && event_state.touches.length > 1 && touches.length > 1)( var width = event_state.container_width, height = event_state.container_height; var a = event_state.touches.clientX - event_state.touches.clientX; a = a * a ; var b = stav_udalosti.dotyky.klientY - stav_udalosti.dotyky.klientY; b var dist2 = Math.sqrt(a + b);

var ratio = dist2 /dist1;

šířka = šířka * poměr;

výška = výška * poměr; // Pro zlepšení výkonu můžete omezit, jak často se resizeImage() nazývá resizeImage(width, height);));

Na základě těchto údajů zmenšíme nebo zvětšíme náš obrázek a upravíme jeho výšku a délku. To je vše. Můžete otevřít V tomto článku vám povíme o To je vše. Můžete otevřít 3 Rychlé a snadné techniky CSS

, který můžete použít k zobrazení pouze části obrázku na vaší stránce.

Všechny zde použité metody ve skutečnosti vyžadují pouze několik řádků CSS)

kód. Nejedná se však o obřízku v pravém slova smyslu ( №2 to zatím neumíme), jednoduše skryjeme a ukážeme pouze tu část obrázku, kterou chceme vidět. Tyto techniky mohou být velmi užitečné, pokud chcete obrázek přenést do určité velikosti, to znamená, že chcete vytvořit například jeho náhled (menší kopii obrázku) v sekci novinky nebo něco podobného. Technika 1 – Použití záporných okrajů ( Záporné okraje Pokud se necítíte na používání záporných okrajů, doporučujeme použít tuto techniku . Zahrnuje rodič (odstavec), který má určitou šířku a výšku. Tento odstavec má vlastnost polohování nastavit na relativní . Šířka a výška definují rozměry zobrazeného pole. A obrázek umístěný uvnitř odstavce má tuto vlastnost uspořádejte obrázek, jak chceme, v procesu určování, která část obrázku se zobrazí a která ne.

HTML identický s kódem z předchozí techniky:

< p class = "crop" > < a href = "#" title = "" > < img src = "img.jpg" alt = "" / > < / a > < / p >

Oříznout (

plovák: vlevo;

okraj: . 5m 10px. 5em 0;

přepad: skrytý; /* to je důležité */

poloha: relativní; /* to je taky důležité */

border : 1px solid #ccc;

šířka: 200px;

výška: 120px;

Oříznout img (

pozice: absolutní;

horní : - 40px ;

vlevo : - 50px ;

Technika 3 – Použití vlastnosti krájení ( Vlastnost klipu)

Tato technika by měla být nejjednodušší, protože vlastnost klipu definuje část prvku, která má být zobrazena. Zní to jako dokonalé řešení, ale existuje jeden úlovek: oříznutý prvek musí být umístěn absolutně. Abychom mohli prvek použít, budeme muset přidat další prvek, vypočítat velikost viditelné oblasti obrázku, přidat tuto velikost k nadřazenému prvku, použít nadřazený prvek... Hodně práce, právo?

Ach, ještě jeden problém: velikost oříznutého prvku se nezmenší na velikost oříznutí, ale zůstane původní velikost (obrázek mimo oříznutí se jednoduše skryje). K přesunutí viditelné oblasti do levého horního rohu rodiče musíme použít absolutní umístění.

Nelze to však ponechat bez zmínky vlastnost krájení. A tak znovu kód...

< div class = "crop" > < a href = "#" title = "" > < img src = "img.jpg" alt = "css šablona" / > < / a > < / div >

Popis

Vlastnost klip určuje oblast umístěného prvku, ve které se zobrazí jeho obsah. Vše, co se nevejde do této oblasti, bude oříznuto a stane se neviditelným. V tuto chvíli je jediným dostupným tvarem oblasti obdélník. Vše ostatní zůstává jen ve snech. klip funguje pouze pro absolutně umístěné prvky.

Syntax

klip: rect(Y1, X1, Y2, X2) | auto | zdědit

Hodnoty

Použité hodnoty jsou vzdálenost od okraje prvku k oblasti oříznutí, která se nastavuje v jednotkách CSS – pixelech (px), em atd. Pokud je třeba okraj oblasti ponechat beze změny, měli byste nastavit přepnete-li na auto, poloha zbývajících hodnot je znázorněna na obr. 1.

Rýže. 1. Hodnoty vlastností klipu

HTML5 CSS2.1 IE Cr Op Sa Fx

klip

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Výsledek tohoto příkladu je znázorněn na Obr. 2.

Rýže. 2. Pomocí klipu v prohlížeči Safari

document.getElementById("elementID ").style.clip

Prohlížeče

Internet Explorer až do verze 7.0 včetně pracuje s jinou formou zápisu, ve které jsou hodnoty souřadnic odděleny mezerou, nikoli čárkou - clip: rect(40px auto auto 40px) . Také Internet Explorer do verze 7.0 včetně nepodporuje zdědit hodnotu.

Obrázky výrazně zvyšují atraktivitu internetových stránek, což má v konečném důsledku pozitivní vliv na konverzi. Webmasteři je proto využívají nejen uvnitř obsahu, ale i při publikování oznámení k příspěvku. Sledování odkazu pomocí obrázku se totiž vyskytuje mnohem častěji než sledování jednoduchého odkazu.

Dříve jsem při publikování příspěvku na WordPress připravil několik verzí stejného obrázku s různými velikostmi. Velké (původní velikost) byly použity pro zobrazení v galerii, střední v těle samotného příspěvku a malé jako náhledy.

Postupem času mě to omrzelo kvůli časovým nákladům a chybám, které ne, ne, ano při ručním převodu vznikaly. Kromě toho jsem měl potíže při změně designu stránek, když byly vyžadovány různé velikosti obrázků. Začal jsem tedy převádět obrázky za běhu pomocí pluginu Kama Thumbnail WordPress. Děkuji autorovi za tento skvělý plugin!

Ve stejném článku vám řeknu, jak změnit velikost obrázku zobrazeného na obrazovce pouze pomocí „nahého“ CSS bez jakéhokoli cizího kódu PHP nebo JavaScript. Při pohledu do budoucna řeknu, že původní obrázek se nemění, stejně jako se nevytvoří hromada malých souborů s různými poměry stran obrázku a všechny akce ovlivní pouze to, co se zobrazí na obrazovce návštěvníka webu. No, je to jako nasadit si brýle s červenými skly, když navzdory tomu, co vidíte, obloha zůstane stále modrá a tráva zelená.

Css vlastnost object-fit

Tato vlastnost určuje Jak Obsah prvku s měnitelnou velikostí (jako je obrázek) musí zaplnit kontejner, pokud se výška a šířka kontejneru liší od rozměrů samotného prvku s nastavitelnou velikostí. Klíčové slovo je zde Jak.

Nejjednodušší způsob, jak zde vše ukázat, je na příkladech. Řekněme, že máme dva obrázky o rozměrech 200x300 pixelů a 300x200 pixelů a pro náhledy příspěvků chceme použít obrázek o velikosti 200x200 pixelů. Je rozumné, aby primární obrázky zcela vyplnily miniaturu při zachování proporcí a přebytečné části (nahoře/dole nebo vlevo/vpravo) byly oříznuty.

Chcete-li realizovat svůj plán, musíte použít klíčovou hodnotu přizpůsobení předmětu: kryt;, při jeho použití se přebytečný obsah obrázku ořízne a konečný obrázek se zarovná na střed při zachování proporcí tak, aby zcela vyplnil oblast kontejneru.

Jak komprimovat a oříznout obrázek pomocí CSS

V mém případě pro převod jakýchkoli obrázků s různými velikostmi a poměry stran na formát miniatur 200x200 pixelů musíte použít následující kód CSS:

Img.object-fit-cover ( šířka: 200px; výška: 200px; object-fit: cover; )

Samotný obrazový výstup může vypadat takto:

Další hodnoty přizpůsobení objektu pro konverzi obrázků

Vlastnost object-fit CSS není omezena na výše uvedený příklad, doporučuji se seznámit se všemi jejími možnostmi v seznamu použitých zdrojů na konci článku.

Výhody a nevýhody převodu velikostí obrázků pomocí samotného CSS

Výhodou je, že nepotřebujete pluginy, kódy ani hromadu dalších obrázků. Navržená možnost převodu nezávisí na CMS a funguje ve velké většině prohlížečů. Velikosti výsledných obrázků lze dynamicky měnit, a to i v rámci jedné stránky, a to nepovede ke zvýšení počtu obrazových souborů a prostoru zabraného webem.

Mezi nevýhody patří skutečnost, že všechny transformace provádí na straně uživatele jeho prohlížeč. A zde teoreticky můžete získat mírně odlišné výsledky v závislosti na enginu internetového prohlížeče a operačním systému návštěvníka webu.

Pokud navíc pro miniaturu 100x100 pixelů použijete obrázek ve formátu FullHD 1920x1080, bude nejprve kompletně stažen do počítače uživatele a teprve poté jej prohlížeč převede do formátu 100x100. Jak víte, velikost takových obrázků (1920x1080 a 100x100) se může 10krát lišit, což může zpomalit web na slabých počítačích a zpomalit internet (například na telefonech a tabletech v sítích 2G/3G)!

Podle mě převažují klady.