Hola, hoy voy a explicar de una forma sencilla como escalar una imagen para poder reducir el tamaño de las imágenes y así utilizarlas en tu proyecto sin que afecten el rendimiento de tu sitio web.
Para este ejemplo estare usando esta imagen que saque de pixabay:
Les dejo el link de la imagen original por si desean descargarla: https://pixabay.com/es/photos/cyberpunk-calle-ciudad-plataforma-6061251/
El primer paso de todos y el más importante es abrir Gimp 😆 ya abierto vamos a la pestaña de archivo o file si lo tienen en inglés como yo y seleccionan abrir-(open)
Al seleccionar abrir les abrirá una ventana en la cual tendrán que buscar donde tienen guardado su archivo
Como notaran la ventana que se me abre a mí es diferente a la de ustedes si usan Windows, ya que mi sistema operativo es Ubuntu.
La imagen se verá de esta forma es Gimp
El siguiente paso es ir a la pestaña de imagen-(image) y seleccionar Escalar imagen-(Scale image)
en ese momento se les abrirá una ventana en la cual podrán colocar un width-(ancho) y un height-(alto) si quieren un tamaño especial, tengan en cuenta que al hacerlo de esa forma la imagen puede quedar deformada si no colocan una proporción adecuada.
Como verán la imagen que estoy utilizando tiene un tamaño bastante grande, lo que voy a hacer es cambiar solo el width y el programa va a mantener el height en la escala correcta para que la imagen no se distorsione.
Notarán que le di un ancho a mi imagen de 900px y Gimp automáticamente me dio un alto de 563px para que la imagen se mantenga sin distorsión, posteriormente le dan a escalar y la imagen se reducirá, la imagen se vera pequeña pero es solo darle un pequeño zoom (Le di uno de 50%) para puedan verla mejor
Ya casi terminamos, solo falta exportar la imagen y para eso es solo ir a archivo --> Exportar-(Export As)
al haberle dado clic se les abrira una ventana y solo tendran que buscar donde desan guarda su imagen y le dan al boton exportar en ese momento se volvera a abrir otra ventana (se que cansa 😫 un poco el que cada boton te abra una ventana pero prometo que esta sera la ultima 😉) el paso que tienen que hacer en esta ventana es Calidad-(Quality) colocarlo en 80, ya que este va a reducir el tamaño sin que la calidad de la imagen se vea muy afectada (pero también pueden modificarlo según sus necesidades y teniendo en cuenta que si lo dejan muy alto su peso no disminuirá considerablemente y caso contrario su tamaño si disminuya bastante, pero se tendrá una imagen muy borrosa), también seleccionen mostrar vista previa o show preview in image window (no sé realmente como les aparezca) esa opción les mostrara el tamaño del archivo.
Para finalizar le dan exportar y ya tendran su imagen escalada y con mucho menos Mb(megabyte) en su sitio web.
les dejo para que vean los cambios.
Verán que la imagen escalada tiene un zoom de 72% y la normal tiene uno de 11% y es porque si tuviese el mismo acercamiento la imagen que no reducimos no se vería completa y estaría enfocada en una parte de la foto.
Para finalizar les dejo la comparación de cuanto se redujo la imagen.
-📐 La imagen original tiene un tamaño de 5,7 Mb y ya cuando la modificamos quedo en 183,1 kB y su ancho y alto quedaron de 900 x 563 px mientras que la normal tiene 6000 x 3750 px.
Les dejo mi LinKtree por si desean seguirme.
https://linktr.ee/Boudgnosis
Espero que les haya servido y nos vemos en un proximo post 😺
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)