{"id":24856,"date":"2019-02-01T09:59:42","date_gmt":"2019-02-01T09:59:42","guid":{"rendered":"https:\/\/www.knowband.com\/blog\/?p=24017\/"},"modified":"2021-01-12T15:17:01","modified_gmt":"2019-02-01T09:59:42","slug":"como-criar-v%c3%a1rias-miniaturas-ao-carregar-a-imagem","status":"publish","type":"post","link":"https:\/\/www.knowband.com\/blog\/pt-br\/dicas\/como-criar-v%c3%a1rias-miniaturas-ao-carregar-a-imagem\/","title":{"rendered":"Como criar v\u00e1rias miniaturas ao carregar a imagem?"},"content":{"rendered":"

Objetivos do blog<\/h2>\n

Depois de ler este blog, poderemos criar v\u00e1rias miniaturas enquanto carregamos uma imagem. Neste blog podemos aprender como redimensionar o tamanho da imagem usando o c\u00f3digo.<\/p>\n

Vamos conhecer as miniaturas<\/h2>\n

Miniaturas s\u00e3o as vers\u00f5es de tamanho reduzido de fotos ou v\u00eddeos. Miniaturas s\u00e3o criadas a partir da imagem original, reduzindo sua dimens\u00e3o e tamanho. Criando miniaturas, podemos representar uma imagem de tamanho grande por uma imagem pequena. O site, como lojas de com\u00e9rcio eletr\u00f4nico on-line, usa imagens em miniatura em vez de imagens grandes para reduzir o tempo de carregamento de sua p\u00e1gina da Web, o que tamb\u00e9m torna o site mais r\u00e1pido. Para entender tecnicamente o funcionamento das miniaturas, vamos fazer um programa simples. O requisito foi compartilhado abaixo:<\/p>\n

Exig\u00eancia<\/h2>\n

Vamos entender o requisito primeiro. Digamos que temos um site chamado Knowband, que vende os m\u00f3dulos para a plataforma de e-commerce, como Magento, Prestashop, Opencart etc. Ele mostra tantas imagens na p\u00e1gina de listagem dos m\u00f3dulos da Knowband. As imagens originais s\u00e3o de tamanho grande, o que aumenta diretamente o tempo de carregamento da p\u00e1gina de listagem, de modo a reduzir o tempo de carregamento da p\u00e1gina. O site da Knowband usa imagens em miniatura na p\u00e1gina de listagem. Neste blog, podemos aprender a criar v\u00e1rias miniaturas de uma imagem. Vamos considerar um exemplo, onde vamos criar tr\u00eas miniaturas, como mostrado na imagem abaixo:<\/p>\n

\"thumbnails\"<\/a><\/p>\n

Fun\u00e7\u00e3o para criar a miniatura<\/h2>\n

Vamos entender a funcionalidade principal ou c\u00f3digo que \u00e9 realmente respons\u00e1vel por criar as miniaturas. Uma fun\u00e7\u00e3o \u00e9 dada abaixo, que \u00e9 respons\u00e1vel pela cria\u00e7\u00e3o da miniatura. Vamos entender a fun\u00e7\u00e3o como ela realmente funcionou.<\/p>\n

Abaixo da fun\u00e7\u00e3o tem par\u00e2metros 4<\/h3>\n

O c\u00f3digo de cria\u00e7\u00e3o de v\u00e1rias miniaturas durante o upload de uma imagem \u00e9 fornecido abaixo:<\/p>\n