El caso es que cuando subimos una imagen, automáticamente quedan almacenadas infinidad de réplicas con distintos tamaños y formatos
(recortes en este último caso evidentemente). Bueno supongo que realmente no son réplicas sino la original, pero que podemos "llamar" para ser mostrada en web con unas dimensiones concretas -casi todas las que se nos antoje- simplemente cambiando algunos de sus parámetros.
La clave está siempre en el último subdirectorio de la dirección de la imagen, el que está justo antes de su nombre. Sería esto que he destacado (s1600) en la URL de la imagen original que usaré para los ejemplos de imágenes apaisadas:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4t59hEuj2tOhdC3WmDkI9A7bOoir1mvATrndYZzr9NkcsDQPaHyyWOmAlHwLjX7j139gX1NjsO-cl_FLN32R4KNQB_ptn0PacY4LVwtSkVvJiTcw-Zvr2mVyScUZcjdOGR4gJSDukFd1G/s1600/paths+crossing.jpg"/>
Como vimos en su momento
, simplemente cambiando el número 1600 (tamaño original) de ese directorio por otro inferior, obtendremos una imagen más pequeña de ancho o alto (lo mayor) igual a ese nuevo número que usemos. Por ejemplo, con un s240 obtendremos una de ancho 240px y cuya altura se recalculará automáticamente para respetar sus proporciones originales y que no se deforme.
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4t59hEuj2tOhdC3WmDkI9A7bOoir1mvATrndYZzr9NkcsDQPaHyyWOmAlHwLjX7j139gX1NjsO-cl_FLN32R4KNQB_ptn0PacY4LVwtSkVvJiTcw-Zvr2mVyScUZcjdOGR4gJSDukFd1G/s240/paths+crossing.jpg"/>
Dije que se le da prioridad a la medida mayor, así que si subimos una imagen más alta que ancha lo que ocurrirá con el parámetro s240 cuando lo apliquemos sobre ese tipo de imágenes, sucederá eso, que la imagen que se verá tendrá 240px de alto y el ancho se recalculará automáticamente.
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpj6P8igYrZzwFM6_Vgi6iMI6MnpwqHssZMCR76aDBWbgPWkdr6tnlUzgk-peaBt7C_GYklVSV71DXXfjOLecRvwwLKc7pyCCVr62fJKyNJhOxpNHARe-7-c7rQivGpwyZJXN-NaT6N8A/s240/comedy%2Bwildlife%2B8.jpg"/>
A partir de ahí vimos otras opciones como los recortes cuadrados y otro tipo de curiosos parámetros que ya no repetiré ahora. Sólo explicaré algunos "nuevos" que surgieron posteriormente a la publicación de aquel post. Esos nuevos seguramente provienen de la la fase previa a la integración de Picasa en Google Fotos. Son los siguientes:
w300 | Prioridad siempre al ancho
La cifra marcará en cualquier caso el ancho de la imagen y la altura se recalculará automáticamente.
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4t59hEuj2tOhdC3WmDkI9A7bOoir1mvATrndYZzr9NkcsDQPaHyyWOmAlHwLjX7j139gX1NjsO-cl_FLN32R4KNQB_ptn0PacY4LVwtSkVvJiTcw-Zvr2mVyScUZcjdOGR4gJSDukFd1G/
w300/paths+crossing.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpj6P8igYrZzwFM6_Vgi6iMI6MnpwqHssZMCR76aDBWbgPWkdr6tnlUzgk-peaBt7C_GYklVSV71DXXfjOLecRvwwLKc7pyCCVr62fJKyNJhOxpNHARe-7-c7rQivGpwyZJXN-NaT6N8A/
w300/comedy%2Bwildlife%2B8.jpg"/>
h300 | Prioridad siempre a la altura
A la inversa. La cifra marcará en cualquier caso el ALTO de la imagen y el ANCHO se recalculará automáticamente.
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4t59hEuj2tOhdC3WmDkI9A7bOoir1mvATrndYZzr9NkcsDQPaHyyWOmAlHwLjX7j139gX1NjsO-cl_FLN32R4KNQB_ptn0PacY4LVwtSkVvJiTcw-Zvr2mVyScUZcjdOGR4gJSDukFd1G/
h300/paths+crossing.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpj6P8igYrZzwFM6_Vgi6iMI6MnpwqHssZMCR76aDBWbgPWkdr6tnlUzgk-peaBt7C_GYklVSV71DXXfjOLecRvwwLKc7pyCCVr62fJKyNJhOxpNHARe-7-c7rQivGpwyZJXN-NaT6N8A/
h300/comedy%2Bwildlife%2B8.jpg"/>
w300-h200 | Max-Width / Max-Height
Si definimos los dos parámetros la imagen tendrá un el valor de alto o ancho que permita no superar ninguno de los especificados. De esta manera, si un ancho de 300px supusiera un alto mayor de 200px, se tomaría este último como prioridad... y viceversa.
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4t59hEuj2tOhdC3WmDkI9A7bOoir1mvATrndYZzr9NkcsDQPaHyyWOmAlHwLjX7j139gX1NjsO-cl_FLN32R4KNQB_ptn0PacY4LVwtSkVvJiTcw-Zvr2mVyScUZcjdOGR4gJSDukFd1G/
w300-h200/paths+crossing.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpj6P8igYrZzwFM6_Vgi6iMI6MnpwqHssZMCR76aDBWbgPWkdr6tnlUzgk-peaBt7C_GYklVSV71DXXfjOLecRvwwLKc7pyCCVr62fJKyNJhOxpNHARe-7-c7rQivGpwyZJXN-NaT6N8A/
w300-h200/comedy%2Bwildlife%2B8.jpg"/>
Las dos imágenes tendrán una altura de 200px porque si fueran de un ancho igual a 300px, el alto superaría el máximo establecido de 200px.
w300-h250-c | Max-Width / Max-Height / Recorte
En este caso la imagen resultante será exactamente de las medidas indicadas por lo que, para que no se deforme, si es necesario se producirá un recorte de la parte central.
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4t59hEuj2tOhdC3WmDkI9A7bOoir1mvATrndYZzr9NkcsDQPaHyyWOmAlHwLjX7j139gX1NjsO-cl_FLN32R4KNQB_ptn0PacY4LVwtSkVvJiTcw-Zvr2mVyScUZcjdOGR4gJSDukFd1G/
w300-h250-c/paths+crossing.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpj6P8igYrZzwFM6_Vgi6iMI6MnpwqHssZMCR76aDBWbgPWkdr6tnlUzgk-peaBt7C_GYklVSV71DXXfjOLecRvwwLKc7pyCCVr62fJKyNJhOxpNHARe-7-c7rQivGpwyZJXN-NaT6N8A/
w300-h250-c/comedy%2Bwildlife%2B8.jpg"/>
Si las dos medidas son iguales el efecto será el mismo que si usáramos sXXX-c, es decir, un recorte cuadrado.
s300-d | Descarga
Un parámetro para que la URL de una imagen no nos lleve a la propia imagen, sino que la descargue (download).
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4t59hEuj2tOhdC3WmDkI9A7bOoir1mvATrndYZzr9NkcsDQPaHyyWOmAlHwLjX7j139gX1NjsO-cl_FLN32R4KNQB_ptn0PacY4LVwtSkVvJiTcw-Zvr2mVyScUZcjdOGR4gJSDukFd1G/
w800-d/paths+crossing.jpg">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4t59hEuj2tOhdC3WmDkI9A7bOoir1mvATrndYZzr9NkcsDQPaHyyWOmAlHwLjX7j139gX1NjsO-cl_FLN32R4KNQB_ptn0PacY4LVwtSkVvJiTcw-Zvr2mVyScUZcjdOGR4gJSDukFd1G/
s400-c/paths+crossing.jpg" />
</a>
