Cómo insertar imágenes webP y vincular el elemento picture

ramonjosegn · 1 Dic 2015

Hola chicos/as

Estoy trabajando para insertar imágenes webP en mi sitio web, por el alto consumo de datos y el excesivo peso de las páginas (15 megas por página debido a las imágenes).

Encontré este modo de hacerlo básico pero medio funciona (al menos para los navegadores que soportan webP)

El problema es CÓMO VINCULO EL ELEMENTO. Intenté de varias formas y se rompe el código, ¿podéis ayudarme por favor?

Este es mi código ¿cómo lo vinculo con la imagen misma?

PHP:

<picture>
  <source srcset="http://webimagen/miimagen.webp" type="image/webp">
  <img src="http://webimagen/miimagenalternativa.jpg" alt="mi experimento webp">
</picture>

Leí que se podía de esta forma

PHP:

<a target="_blank" href="http://webimagen/miimagen.webp">

<picture>

  <source srcset="http://webimagen/miimagen.webp" type="image/webp">
  <img src="http://webimagen/miimagenalternativa.jpg" alt="mi experimento webp">

</picture>

</a>

Pero al hacerlo de esa forma sólo funciona para la imagen jpg pero si renderiza el archivo .webp no se activa el enlace web (al menos en las pruebas que he hecho).

Os agradezco cualquier sugerencia.

Gracias.

rayden · 3 Dic 2015

A ver si entiendo [MENTION=1576]ramonjosegn[/MENTION]. Tienes una imagen con formato jpg y quieres que al hacer click sobre ella (jpg) muestre la imagen webp ???

ramonjosegn · 3 Dic 2015

rayden dijo:
A ver si entiendo [MENTION=1576]ramonjosegn[/MENTION]. Tienes una imagen con formato jpg y quieres que al hacer click sobre ella (jpg) muestre la imagen webp ???

No, tengo una imagen webp que necesito embeber con código (el que compartí funciona - tiene una imagen png alternativa por si la carga webp falla ya que navegadores como Firefox no soportan ese formato aún), y linkearla con su archivo origen..

O sea

webp > linkear con su propio archivo

Igualmente pienso que siempre puedo poner un link de texto con "ver imagen más grande" y listo... porque veo que esto del webP a pesar de tener varios años como que anda en pañales con respecto a renderizado, enlaces y demás...

rayden · 3 Dic 2015

ramonjosegn dijo:
No, tengo una imagen webp que necesito embeber con código (el que compartí funciona - tiene una imagen png alternativa por si la carga webp falla ya que navegadores como Firefox no soportan ese formato aún), y linkearla con su archivo origen..

O sea

webp > linkear con su propio archivo

Igualmente pienso que siempre puedo poner un link de texto con "ver imagen más grande" y listo... porque veo que esto del webP a pesar de tener varios años como que anda en pañales con respecto a renderizado, enlaces y demás...

WebPJS - Google's new image format WebP for not supported browsers (with alpha-channel)

ramonjosegn · 3 Dic 2015

rayden dijo:
WebPJS - Google's new image format WebP for not supported browsers (with alpha-channel)

Conozco el link, el problema es que en esa época todavía no había forma de previsualizarlo, ahora se puede hacer con el tag "picture" el problema es que no sé porqué se rompen los vínculos cuando se usa esa etiqueta...

rayden · 3 Dic 2015

ramonjosegn dijo:
Conozco el link, el problema es que en esa época todavía no había forma de previsualizarlo, ahora se puede hacer con el tag "picture" el problema es que no sé porqué se rompen los vínculos cuando se usa esa etiqueta...

No es cosa de que se "rompe" es que mozilla no lo soporta.
Algunas librerias como modernizr descompilan el formato, y etc etc.

Problema: "Tienes una imagen png de 1mb y quieres que pese menos para mostrar en tu web"
Tu solucion: implementar webp (chrome/opera)
pasos:
-tendras que compilar cada imagen al formato webp (...trabajo)
-Luego, generar una doble etiqueta html para mostrar la imagen - si soporta webp, muestra. sino la pesada 1mb png (...trabajo y problema)
-Para colmo, se inventan alguna alternativa y despues tienes que volver a lo mismo.

Solucion comun:
-baja riot, comprime la image y listo. compatible con hasta Netscape 1.0

ramonjosegn · 3 Dic 2015

rayden dijo:
Solucion comun:
-baja riot, comprime la image y listo. compactible con hasta Netscape

Jajaja, uso RIOT; pero con webP me ahorraría casi la mitad de ancho de banda que consumo en estos momentos, estoy usando webP pero desde sirV que hace una "simulación" pero me temo que estoy al tope del ancho de banda free que permiten...

rayden · 3 Dic 2015

ramonjosegn dijo:
Jajaja, uso RIOT; pero con webP me ahorraría casi la mitad de ancho de banda que consumo en estos momentos, estoy usando webP pero desde sirV que hace una "simulación" pero me temo que estoy al tope del ancho de banda free que permiten...

...picasa...

Menorah · 3 Dic 2015

¿Y porqué no alojas las imágenes en imgur u otro sitio y así ahorras ancho de banda?

rayden · 3 Dic 2015

[MENTION=1576]ramonjosegn[/MENTION] esto es lo que quieres?

Enlace eliminado

entras por chorme y tienes una imagen de arbol *.webp
entras por mozilla y tienes una imagen *.jpg

ramonjosegn · 3 Dic 2015

Gracias [MENTION=9070]rayden[/MENTION] pero le falta estar vinculada consigo misma, o sea que al hacer clic se abra este link

Enlace eliminado

Igual como dije una forma fácil de resolverlo será poniendo "ver imagen más grande" debajo con un botón y ya... no me complico la vida...

rayden · 3 Dic 2015

ramonjosegn dijo:
Gracias Enlace eliminado pero le falta estar vinculada consigo misma, o sea que al hacer clic se abra este link

Enlace eliminado

Igual como dije una forma fácil de resolverlo será poniendo "ver imagen más grande" debajo con un botón y ya... no me complico la vida...

prueba ahora

Enlace eliminado

ramonjosegn · 3 Dic 2015

rayden dijo:
prueba ahora

Enlace eliminado

Ey ¿cómo lo conseguiste? Ya me explicarás porque yo no he sido capaz....

rayden · 4 Dic 2015

ramonjosegn dijo:
Ey ¿cómo lo conseguiste? Ya me explicarás porque yo no he sido capaz....

Paso 1: Tomar lapiz y papel y razonar el algoritmo:
si es (chrome) {
imagen webp
}si no {
imagen jpg
}
Paso 2: Transcribir a un lenguaje de programación. Ej php, javascript, etc

Si lo quieres para wordpress, me dejas saber para crear un plugin/funcion algo similar a:
shortcode
[webp=http//link.com/nombre_imagen.webp original=http//link.com/nombre_imagen.jpg]

con ese atajo lo publicarias en tu contenido.

ramonjosegn · 4 Dic 2015

Sí es para Wordpress... gracias [MENTION=9070]rayden[/MENTION]

rayden · 4 Dic 2015

ramonjosegn dijo:
Sí es para Wordpress... gracias Enlace eliminado

Copy/paste en un archivo y guardalo .php (ejemplo miplugin.php) lo subes a la carpeta wp_plugin y lo activas.

<?php
/**
* Plugin Name: WP Webp
* Version: 1.0.0
* Author: Rayden
*/

function imageneswebp( $atts ) {
extract( shortcode_atts(
array(
'webp' => '',
'original' => '',
), $atts )
);
$navegador = $_SERVER['HTTP_USER_AGENT'];
$chrome = '/Chrome/';

if (preg_match($chrome, $navegador)) {

echo '<a target="_blank" href="'.$original.'"><img src="'.$webp.'"></a>';

}else {

echo '<a target="_blank" href="'.$original.'"><img src="'.$original.'"></a>';
}
}
add_shortcode( 'imgwebp', 'imageneswebp' );
?>

Uso:

[imgwebp webp=https://www.gstatic.com/webp/gallery/4.sm.webp original=http://www.comobromear.com/wp-content/uploads/2015/06/agsfhdhdfgsacabra-thug.jpg]

ramonjosegn · 4 Dic 2015

Gracias [MENTION=9070]rayden[/MENTION] aunque supongo que esto confirma que no se puede usar directamente con el código de vinculación como yo me temía... ¿cierto?

Muchas gracias ¿no has pensado subirlo al repertorio de Wordpress?

rayden · 6 Dic 2015

ramonjosegn dijo:
Gracias Enlace eliminado aunque supongo que esto confirma que no se puede usar directamente con el código de vinculación como yo me temía... ¿cierto?

Muchas gracias ¿no has pensado subirlo al repertorio de Wordpress?

-esto confirma que no se puede usar directamente con el código de vinculación como yo me temía... ¿cierto?
resp: No se puede por la sintaxis (tag picture)

- ¿no has pensado subirlo al repertorio de Wordpress?
seria perder tiempo.

Si alguien quiere desarrollar el código /lo libero jeje/ para ser aceptado en el repositorio, solo tiene que invocar la variable global $is_chrome de wordpress)
https://codex.wordpress.org/Global_Variables

ramonjosegn · 6 Dic 2015

OK, gracias por la explicación [MENTION=9070]rayden[/MENTION] esperemos que en el futuro desarrollen más el tag, porque está bueno, pero necesita urgentemente un "href" como es evidente...

ramonjosegn · 18 Feb 2016

rayden dijo:
Copy/paste en un archivo y guardalo .php (ejemplo miplugin.php) lo subes a la carpeta wp_plugin y lo activas.

Uso:

Una pregunta Rayden...

¿Y cuándo no quiera vincular la imagen? ¿Sería posible tener esa opción en el shortcode?

Hasta ahora me pongo a revisar esto - precisamente porque tengo que subir una imagen como de 20 megas... y con webP me queda en 250 kbs.

Estoy usando SIRV pero creo que ya me pasé de ancho de banda con algunas imágenes porque no las está mostrando.

Además que el webP que usa no es real (es una simulación y no tienes control sobre el tamaño final)

Por cierto... Facebook usa webP...

Y [MENTION=9070]rayden[/MENTION] lo estoy probando en mi web pero el SHORTCODE NO RENDERIZA...

Gracias compi

Cómo insertar imágenes webP y vincular el elemento picture

ramonjosegn

rayden

ramonjosegn

rayden

ramonjosegn

rayden

ramonjosegn

rayden

Menorah

rayden

ramonjosegn

rayden

ramonjosegn

rayden

ramonjosegn

rayden

ramonjosegn

rayden

ramonjosegn

ramonjosegn

Temas similares

Privacidad y transparencia

Privacidad y transparencia