Mostrar una imagen con diferentes tamaños

[Fernarey1810]

Estoy haciendo un sitio web que va a mostrar la misma imagen en diferentes tamaños según el lugar donde se encuentre. Si la imagen tiene el tamaño por ej 500x500 y yo la achico según el lugar donde aparezca con width="" y height="", se supone la imagen se cargaria como si fuese de 500x500 no?
Tendria mas sentido al subir la imagen usar las funciones para manejo de imagenes GD de php, crear las imagenes con las dimensiones para cada sección que van a aparecer, pero esto me haria ocupar mucho espacio porque si aparece en 3 partes con diferente tamaño crearia 3 imagenes, y asi por todas las que suba.
Cual es la mejor manera de mostrar una imagen repetidas veces con diferentes dimensiones?

[caricatos]

Hola:

Se me ocurre el formato svg. Dentro del svg usar un tag image con la original y jugar con los atributos height, width y viewBox del tag svg (olvidándonos de usar inkscape...)

Saludos

[Rafael]

Y ¿no sería más lógico usar CSS con media queries?

[Fernarey1810]

En este articulo https://carlosazaustre.es/blog/imagenes-responsive/ se ve la idea de crear diferentes tamaños de imagenes
img-mobile.jpg
img-mobileHD.jpg
img-tablet.jpg
img-tabletHD.jpg
img-large.jpg
img-largeHD.jpg

Y menciona el atributo strset, pero no se si conviene hacerlo asi

Código HTML:

<img src="img-mobile.jpg"  
             srcset="img-mobileHD.jpg 2x, 
             img-tablet.jpg 768w, 
             img-tabletHD.jpg 768w 2x, 
             img-large.jpg 1200w, 
             img-largeHD.jpg 1200w 2x" />
 

[Fernarey1810]

Iniciado por caricatos

Hola:

Se me ocurre el formato svg. Dentro del svg usar un tag image con la original y jugar con los atributos height, width y viewBox del tag svg (olvidándonos de usar inkscape...)

Saludos

Asi ?

Código HTML:

<svg width="5cm" height="4cm">
    <image href="firefox.jpg" x="0" y="0" height="50px" width="50px"/>
</svg>
 

[Rafael]

Hum. Interesante y la realidad es de que no lo he probado, pero creo que este atributo reconoce las dimensiones generales del dispositivo o navegador, no el tamaño relativo dentro de tu misma página.

Si ya cargaste una vez la imagen, tal vez lo mejor es usar la misma ya que se encuentra ya en el cache de la compu.

[KATHYU]

Algo de Bootstrap (img-responsive) se me ocurre, o las media querys, pero no veo muy factible hacer de todas las imágenes varias versiones

[caricatos]

Hola:

Iniciado por Fernarey1810

Asi ?

Código HTML:

<svg width="5cm" height="4cm">
    <image href="firefox.jpg" x="0" y="0" height="50px" width="50px"/>
</svg>
 

Con unos retoques:

A la etiqueta image, el href debe precederle "xlink:", el resto parece estar bien (creo que no es necesario el "px"... y a la etiqueta svg le faltan cosas como los atributos xmlns y xmlns:link y preferiblemente preserveAspectRatio; pero sobre todo viewBox="0 0 50 50", luego pueden variar los atributos width y height para conseguir las distintas versiones.

Saludos

[Fernarey1810]

Iniciado por KATHYU

Algo de Bootstrap (img-responsive) se me ocurre, o las media querys, pero no veo muy factible hacer de todas las imágenes varias versiones

Estoy usando Bootstrap, las imagenes se achican o agrandan con width y height. Es un sitio periodistico, cuando visitas la noticia la imagen aparece grande, cuando aparece en la pagina principal se achica un poco, etc. El tema es que si achicas una imagen de 500x500 a 50x50 igual se carga como si fuese de 500x500 creo, y no es eficiente, y hacer varios tamaños de imagenes ocuparia mucho espacio. Por ahora seguire usando width y height.

[KATHYU]

Iniciado por Fernarey1810

Estoy usando Bootstrap, las imagenes se achican o agrandan con width y height. Es un sitio periodistico, cuando visitas la noticia la imagen aparece grande, cuando aparece en la pagina principal se achica un poco, etc. El tema es que si achicas una imagen de 500x500 a 50x50 igual se carga como si fuese de 500x500 creo, y no es eficiente, y hacer varios tamaños de imagenes ocuparia mucho espacio. Por ahora seguire usando width y height.

Bien, eso cambia mi idea, gracias por aclarar el dato.