Non che encantan as imaxes?

Poden transformar un fragmento de texto nunha experiencia atractiva mentres le. As imaxes melloran unha publicación de blog, fan que sexa máis compartible e definen o ton e a marca de todo o teu sitio.

E sabes que? Estamos preparados para responder ás imaxes. É por iso que incorporar imaxes ao teu contido é unha ferramenta poderosa para utilizar cando comercializa o teu blog.

Pero, se non tes coidado, as imaxes poden representar máis da metade (ou máis) do tamaño total da túa páxina web. Hai só uns anos, o tamaño medio dunha páxina web era de 600-700K. Agora, a media é de 2 MB e aumenta cada ano.

Isto é enorme!

A principal razón pola que isto ocorre é porque se usan con máis frecuencia varias imaxes nas páxinas web e estas imaxes son non está correctamente dimensionado e optimizado. Isto significa que non se gardan nin se compilan dun xeito amigable para a web e, en cambio, están inchando as túas páxinas.

Porén, a maioría de nós deixamos a optimización de imaxes como unha idea posterior e preferimos gozar facendo cousas divertidas. como crear unha publicación épica ou crear redes con outros bloggers do teu nicho.

Pero, ter unha páxina inchada significa que a velocidade de carga da túa páxina se ve afectada. Quizais non penses que isto é un gran problema se tes unha conexión de alta velocidade, pero moitos dos teus visitantes non o están. Ademais, a Google non lle gusta a carga lenta das páxinas e pode afectar negativamente ao teu SEO.

Por que precisas optimizar as imaxes

Traballas duro encreando contido estelar e pasas incontables horas promocionando o teu blog e creando redes con outros bloggers, polo que o último que queres é que os visitantes potenciais abandonen o teu sitio web antes de que se cargue!

Os estudos demostran que ata o 40 % dos os visitantes fan clic no botón Atrás se un sitio tarda máis de tres segundos en cargarse.

Seino, tres segundos realmente non son tan longos, pero cando estás nunha conexión móbil e estás esperando un sitio para cargar, un segundo pode parecer eterno.

E dado que moitos dos teus visitantes poden estar en conexións móbiles máis lentas, queda claro: debes reducir o tamaño da túa páxina. E xa sabemos cal é o maior delincuente do tamaño da páxina: son as túas imaxes.

As imaxes innecesariamente grandes tamén ocupan espazo na túa conta de hospedaxe. Aínda que algúns de vostedes poden ter aloxamento con espazo de almacenamento "ilimitado", moitos provedores de hospedaxe premium limitan a uns 10 GB de almacenamento nos plans de nivel inferior. Isto pode encherse rapidamente, especialmente se estás hospedando varios sitios ricos en imaxes na mesma conta.

Entón, como podes saber se as túas imaxes están a ralentizar o teu sitio? Proba a velocidade do teu sitio con Google PageSpeed ​​Insights.

Se Google informa que as imaxes non optimizadas son un problema, isto é o que debes saber para solucionalo.

Conceptos básicos de optimización de imaxes

Cando se trata de optimizar imaxes no teu blog, hai que facer algunhas cousas diferentescoñecendo: o tipo de ficheiro, o tamaño e as dimensións da imaxe, a forma en que serves as túas imaxes e a compresión de imaxes.

Vexamos cada unha destas áreas con máis detalle.

Tipo de ficheiro

As imaxes na web normalmente gárdanse no formato de ficheiro PNG ou JPEG, ou GIF para a animación. A quen non lle gustan eses divertidos GIF animados que flotan pola web!

Agora técnicamente está ben se gardas as imaxes en calquera dos formatos: o navegador do teu visitante non terá problemas para mostrar a túa páxina web – pero para obter a mellor calidade e optimización, segue as seguintes regras:

• JPEG – úsao para fotografías e deseños onde aparecen persoas, lugares ou cousas
• PNG – o mellor para gráficos , logotipos, deseños con moito texto, capturas de pantalla e cando necesites imaxes con fondos transparentes
• GIF: se necesitas animación, se non, usa PNG

Entón, por que hai diferentes formatos ?

Ben, PNG utilízase tradicionalmente para gardar logotipos e gráficos porque preserva a calidade da imaxe orixinal; ninguén quere texto borroso e formas pixeladas. Pero, se tentas gardar unha foto como PNG, parecerá incrible, pero o tamaño do ficheiro resultante será menos que sorprendente.

JPEG úsase tradicionalmente para gardar fotos. Algúns dos datos da imaxe tíranse para crear un tamaño de ficheiro drasticamente menor, pero como as fotos conteñen unha gran variedade de cores e variacións naturais, a perda de calidade éadoita ser imperceptible para o ollo humano.

Entraremos máis detalles sobre a compresión, pero polo momento, se só lembras dúas cousas, lembra: JPEG para fotos e PNG para texto/gráficos.

Dimensións da imaxe

Algunha vez cargaches unha páxina web e observaches que unha imaxe diminuta (quizais unha foto na cabeza, por exemplo) leva f-o-r-e-v-e-r para descargar? Como, tan lento que podes ver cada liña entrando? Pensas para ti mesmo, como pode tardar tanto en descargarse unha imaxe tan pequena?

E cando lle pasa a unha imaxe de cabeceira grande, é aínda peor porque pode impedir a carga da páxina enteira.

A razón pola que está a suceder é porque o blogueiro non cambiou o tamaño nin optimizou correctamente a súa imaxe e, no caso do noso exemplo de captura de cabeza, podería ter cargado un JPEG de resolución completa directamente desde a súa cámara DSLR.

E é un ficheiro enorme!

Ves, un navegador web escalará (xeralmente) unha imaxe a partir das súas dimensións orixinais para que encaixe ben no seu lugar nunha páxina web. O que parece ser unha pequena imaxe en pantalla podería ser realmente unha enorme foto de 10 megapíxeles, reducida en tempo real polo navegador.

Agora algunhas plataformas de publicación web crearán automaticamente varias variacións da túa imaxe de resolución completa en diferentes formatos. tamaños, pero se non, deberías cambiar o tamaño das túas imaxes previamente nun editor de imaxes como Photoshop, Lightroom, Pixlr ou incluso MS Paint. Pode significar a diferenzaentre un ficheiro de 50 K e un de 5 MB.

WordPress, por exemplo, creará automaticamente tres (ou máis, dependendo do teu tema) copias da túa imaxe cargada, todas con dimensións diferentes, que podes usar nas publicacións do blog, en lugar de usar sempre a imaxe a tamaño completo.

Se tes o costume de cargar imaxes de fotos de stock enormes e queres aforrar espazo na túa conta de hospedaxe, o complemento de WordPress Imsanity dáche as costas.

Cambia o tamaño e substitúe a imaxe orixinal por algo máis manexable, polo que aínda que insiras a imaxe a tamaño completo na túa publicación, non estará tan mal.

Unha vez activado, Imsanity tamén pode buscar nas túas imaxes existentes e cambiar o tamaño en consecuencia.

Servir as túas imaxes

O xeito no que ofreces as túas imaxes aos teus visitantes non consiste estrictamente en optimizalas per se. , pero pode ter un impacto dramático no tempo de carga da túa páxina.

A maioría dos blogueiros ofrecen as súas imaxes directamente desde a súa conta de hospedaxe e adoita estar ben, pero se realmente estás buscando espremer todo o rendemento o teu sitio e, a continuación, hospedar as túas imaxes nunha rede de entrega de contido (CDN) pode marcar unha gran diferenza.

Unha CDN está formada por servidores web situados estratexicamente en centros de datos de todo o mundo. Estes servidores albergan copias duplicadas das túas imaxes e cando o navegador dun visitante solicita unha imaxe do teu sitio web, a CDN dirixe automaticamente o navegador a unservidor que xeograficamente é o máis próximo a eles.

Isto significa que os visitantes de Europa, por exemplo, recibirán imaxes servidas desde un servidor europeo local, en lugar de proceder dos Estados ou doutro lugar. Dado que o tempo de resposta e a latencia da rede se reducen, as imaxes descárganse moito máis rápido, o que reduce o tempo de carga da páxina.

O Asistente de blogs usa Sucuri (inclúe un Firewall para a seguridade, así como un CDN), pero hai outros provedores de calidade. como Cloudfront de Amazon ou KeyCDN. Incluso o popular CloudFlare, que non é estrictamente un CDN, ofrece un CDN de balde e é fácil de configurar na maioría dos paquetes de hospedaxe compartido.

Compresión de imaxes

Cando se trata de optimizar o teu imaxes, nada reduce o tamaño do teu ficheiro máis que a compresión avanzada de imaxes con perdas.

A maioría das ferramentas de edición de imaxes, como Visme ou Photoshop, gardarán ficheiros mediante a compresión JPEG con perdas, xa que ten as mellores reducións de tamaño dos ficheiros. Así, aínda que a calidade da imaxe redúcese lixeiramente, a compresión de imaxes con perdas reduce as imaxes enormes a tamaños compatibles coa web.

Estou seguro de que moitos dos que usan Photoshop poden ver a súa función Gardar para a web como o todo e o fin da optimización da imaxe. E ata ferramentas de edición de imaxes en liña como PicMonkey ou Visme tamén optimizan as túas imaxes.

Pero sabías que hai ferramentas que poden sacar a túa imaxe "optimizada" de Photoshop ou doutras ferramentas de edición, comprimila e comprimila. noutro 40% (ou máis),e aínda parecen case idénticas ao ollo humano?

Aquí tes algunhas ferramentas gratuítas e de pago que che axudarán a que as túas imaxes sexan compatibles coa web.

Ferramentas de escritorio

ImageAlpha / ImageOptim

Para o usuario de Mac, ImageOptim é unha ferramenta de escritorio gratuíta que uso todos os días para optimizar imaxes PNG, principalmente capturas de pantalla, antes de cargalas. Estas ferramentas son fáciles de usar, só tes que arrastrar e soltar os teus ficheiros, pero tes que facer unha imaxe á vez.

Consello profesional : para os expertos en tecnoloxía hai ImageOptim– CLI, onde podes optimizar todo un cartafol de imaxes á vez.

ImageAlpha é un compresor PNG con perdas e pode facer marabillas ao reducir os ficheiros PNG mentres ImageOptim realiza compresión avanzada sen perdas (coa opción de compresión con perdas), e elimina metadatos innecesarios dos ficheiros PNG, JPEG e GIF.

Para as miñas imaxes PNG, primeiro execúoas a través de ImageAlpha:

Aquí reduciu a imaxe da captura de pantalla de 103K a 28K.

Despois executei a través de ImageOptim e aforrei un 10%.

JPEGmini

Para os meus ficheiros JPEG, optimízoos coa aplicación JPEGmini de escritorio, dispoñible tanto para Mac como para Windows.

A versión Lite permítelle optimizar ata 20 imaxes ao día de forma gratuíta e custa 19,99 $ para eliminar o límite.

Consello profesional : os usuarios avanzados que queiran integrar JPEGmini en Photoshop ou Lightroom mediante un complemento poden comprar a versión Pro para99,99 $.

Ferramentas en liña/nube/SaaS

TinyPNG

Se estás a buscar unha ferramenta de compresión de imaxes en liña de alta calidade, TinyPNG (optimiza JPEG ficheiros tamén a pesar do nome) é unha aplicación web que che permite arrastrar ata 20 imaxes de 5 MB ou máis pequenas ao teu navegador e optimizalas ao mesmo tempo.

Tamén teñen unha API para desenvolvedores e crean un WordPress. está dispoñible un complemento que pode optimizar automaticamente as túas imaxes ao cargalas.

TinyPNG ofréceche 500 optimizacións de imaxes gratuítas ao mes e, despois diso, cobra entre 0,002 e 0,009 USD por imaxe, dependendo do volume.

Agora 500. As imaxes ao mes poden parecer moitas, pero se tes en conta o feito de que WordPress adoita crear de tres a cinco variacións de cada imaxe en diferentes tamaños, 500 imaxes non parecen tantos para o prolífico blogueiro. Afortunadamente, o custo por imaxe é económico.

EWWW Optimizador de imaxes

Se non estás preparado para gastar cartos e non queres que te molesten en optimizar as túas imaxes manualmente, o complemento gratuíto EWWW Image Optimizer para WordPress pode optimizar automaticamente as túas imaxes cargadas.

Podes optar por unha subscrición premium que realice compresión con perdas, pero a versión gratuíta só realiza compresión sen perdas polo que o aforro é t case tan substancial. Non obstante, aforrarache tempo e é mellor que nada.

Nota: Para obter un resumo completo, consultaa nosa publicación sobre ferramentas de compresión de imaxes.

Concluíndoo

Con algunhas persoas que prevén que o tamaño medio da páxina web se achegará aos 3 MB para 2017, agora é o momento de comezar a optimizar as túas imaxes.

Lembra que non todos os teus visitantes estarán en conexións de alta velocidade e que o inchazo da páxina e os tempos de carga lentos poden afectar potencialmente a túa clasificación con Google. Para axudarche a aliviar a carga, por así dicilo, adoita hoxe optimizar as túas imaxes.

Presta atención ás dimensións das túas imaxes e cambia o tamaño das fotos ou imaxes de stock demasiado grandes procedentes dunha cámara dixital a un tamaño adecuado. tamaño.

A continuación, aproveita a compresión de imaxes moderna con aplicacións de escritorio como JPEGmini ou ferramentas en nube como TinyPNG ou Kraken, integrándoas en WordPress cun complemento, se é posible.

Por último, se é posible. A plataforma de publicación crea automaticamente variacións de tamaño da túa imaxe orixinal, escolle unha destas para a publicación do teu blog, en lugar da orixinal a tamaño completo.

Lecturas relacionadas: 7 xeitos de reducir o Tamaño dos ficheiros PDF.