Página html de goma. ¿Es siempre necesaria la disposición “de goma”? Tamaño de fuente en navegadores móviles

¡Hola amigos!

Este es otro material sobre cómo trabajar con imágenes.

En él aprenderás cómo reducir el tamaño de una imagen sin perder calidad con usando pintura, Photoshop y servicios en línea.

Además, aprenderá a hacer esto en dos aspectos. Después de todo, el tamaño de la imagen tiene 2 significados:

• Tamaño en píxeles, es decir, el alto y ancho de la imagen;
• Tamaño en kilobytes, es decir, el peso de la imagen en una computadora u otro medio.

Este material es apto para cualquier persona que esté interesada en reducir el tamaño de sus imágenes, fotografías, etc. Y será muy útil para los propietarios de sitios web, ya que no se recomienda publicar imágenes en sus materiales. talla grande y el peso.

Comencemos con una pequeña consideración de la necesidad de todas las acciones que se analizan a continuación.

En cuanto a cambiar el alto y el ancho de la imagen, hay muchas opciones: necesitas Talla correcta para imprimir, para publicar en un sitio web, para reducir el mismo peso de la imagen, ya que disminuye cuando se reduce el tamaño.

Es posible que sea necesario reducir el peso para ahorrar peso en el material ( disco duro, unidad flash, etc.), para carga rapida imágenes en el sitio, etc.

En realidad, hay una gran cantidad de opciones. Para no languidecer, comenzamos a practicar.

Por tradición doy videotutorial detallado, en el que todo se mostró claramente.

Ahora para los amantes de las instrucciones en texto.

Cambiar el tamaño en Paint

Para cambiar las dimensiones de alto y ancho, no recomiendo utilizar ningún servicio en línea, ya que esto se puede hacer usando conjunto estándar programas e incluso un editor estándar Sistema operativo Ventanas - Pintura.

Abra la imagen en Paint y en la pestaña "Inicio" hay un elemento "Cambiar tamaño".

Al pulsar sobre él podremos cambiar el tamaño sin perder calidad (si la reducimos) y sin perder proporciones. Para hacer esto, asegúrese de activar la configuración para mantener las proporciones.

Al cambiar los parámetros de tamaño horizontal y vertical, ajusta el ancho y el alto de la imagen en consecuencia. Elegir parámetros requeridos, haga clic en el botón "Aceptar" y luego guarde el archivo final en su computadora.

Hemos terminado de cambiar el tamaño de la imagen en Paint.

Por cierto, cambiar los parámetros de ancho y alto también afecta el peso de la imagen. Por tanto, toma nota de esto.

Ahora considere la opción con usando photoshop.

Cambiar el tamaño en Photoshop

Abra nuestra imagen en el programa y vaya al elemento "Imagen - Tamaño de imagen".

En la siguiente ventana, el cambio se produce de la misma forma que en Paint. Asegúrese de que la casilla de verificación esté marcada para mantener las proporciones y establecer los parámetros de alto o ancho requeridos.

Después de hacer clic en el botón "Aceptar", se aplicarán los parámetros de tamaño y podrá guardar el archivo.

Estos métodos son suficientes para cambiar el tamaño de la altura y el ancho de las imágenes.

Ahora veremos 2 formas de reducir el peso de las imágenes.

Pero antes de eso, quiero señalar que ya conoces una forma. Si no necesitas imágenes más allá tallas grandes, entonces puede reducir su altura y ancho, reduciendo así el peso varias o incluso decenas de veces.

Reducir el peso en Photoshop

Este método será de gran utilidad para los propietarios de sitios web, ya que cuanto menos pesa la página, más rápido se carga. Y esto es muy importante. Un método adecuado también para cualquier necesidad.

Después de abrir una imagen en Photoshop, debe guardarla inmediatamente, pero normalmente no, sino para la web y los dispositivos.

En la siguiente ventana debe configurar los parámetros de calidad de la imagen:

• Calidad - alta (60-70). Ajuste el valor para adaptarlo a sus necesidades;
• Formato: jpeg. Si necesita guardar áreas transparentes en la imagen, entonces necesita el formato png;
• También configuramos la configuración "Progresiva".

También puede cambiar los tamaños directamente en esta ventana, y no por separado a través del elemento "Imagen - tamaño de imagen", como mostré en el párrafo anterior. Es muy cómodo.

Después de configurar los parámetros, guarde la configuración (ver captura de pantalla arriba).

Esta es la única forma en que pude reducir el peso de la imagen de 116 kb a 75 kb sin cambiar las dimensiones (el alto y el ancho permanecieron iguales).

EN este método Puedes jugar con el valor de la calidad. Todo depende de por qué necesitas reducir el peso de la imagen. Es muy posible que pueda establecer el parámetro más bajo, haciendo que el peso sea aún menor.

Ahora veamos cómo perder peso utilizando un servicio en línea.

Servicio en línea para optimización.

Este método es muy útil para imágenes reducidas. Por ejemplo, si ya reduje la imagen anteriormente en Photoshop, podemos usar el servicio para finalizar el tamaño.

El servicio tiene un nombre. krakin.io. Pasemos a ello. Proporcioné un enlace directamente a la página de selección de imágenes.

En esta página, primero debe decidir el grado de compresión de la imagen. Hay 2 parámetros responsables de esto:

• Con pérdida- fuerte compresión(establecido por defecto);
• Sin pérdidas: menos compresión.

Puede determinar este parámetro solo probándolos. Por lo tanto, intente comprimir la imagen de esta manera y luego seleccione la opción deseada.

La imagen se optimiza inmediatamente y veremos un informe sobre el trabajo realizado en el área de selección de archivo.

Está claro que tamaño original el archivo tenía 77 kb y después de la optimización pasó a tener 59 kb. También muestra cuánto se comprimió en kilobytes (18 kb) y en porcentaje (23,8%).

Ahorrar imagen comprimida, debes hacer clic en el botón "Descargar este archivo" en la última columna "Estado". Seremos trasladados a nueva pestaña, donde se abrirá la imagen final para que podamos evaluarla. Para guardar es necesario hacer clic botón derecho Coloque el mouse sobre la imagen y seleccione "Guardar imagen como".

Si viste el video al comienzo del artículo, donde mostré claramente el proceso y todos los matices de este artículo, entonces sabrás que solo estos métodos pueden reducir una imagen de 360 ​​​​kb a 40 kb. Y este no es el límite.

Este material ha llegado a su fin. Todos los métodos descritos en el artículo, cómo usuario normal Internet, estarás perdido.

En los comentarios a continuación, me interesaría conocer algunas de sus formas de reducir el peso de las imágenes. Quizás haya algo más sencillo pero más eficaz. Por eso, te espero abajo cerca del formulario de comentarios.

¡Saludos cordiales, Konstantin Khmelev!

El diseño fluido es un diseño en el que el sitio se amplía según el ancho de la ventana del navegador.

Creo que el diseño de goma es un signo de la habilidad del diseñador y del maquetador. Al desarrollar y mantener un sitio web de alta calidad, los diseñadores, tecnólogos y editores del sitio enfrentan muchos problemas: es necesario asegurarse de que las imágenes y el texto se comporten adecuadamente y sigan siendo legibles en cualquier resolución; Al mismo tiempo, no debe haber agujeros en el diseño. Pero si todo se hace correctamente, el resultado será excelente.

La principal ventaja del diseño de goma es que el propio usuario decide de qué forma ver el sitio. El tecnólogo no sabe lo que conviene a todos usuario específico, por lo tanto, no debe decidir qué tan ancho debe ser el sitio.

Digamos que una persona compró un costoso monitor ancho, fue al sitio, pero tenía 800 píxeles de ancho y seguía igual. No es necesario enseñarle que ampliar el navegador hasta los 1900 píxeles está mal. Necesitamos fabricar caucho y darle a la gente el derecho a elegir.

Hay dos razones por las que no quieren fabricar “caucho”: estético Y tecnológico.

La estética radica en el hecho de que los desarrolladores consideran que un diseño fijo es más estable y, por lo tanto, parece "nativo" para el usuario. I ya escribí que la “percepción emocional” de un sitio no es en lo que los desarrolladores deberían centrarse. Esta percepción está guiada principalmente por usuarios inactivos que acceden a Internet, por regla general, desde el mismo computador de casa, por lo tanto, es poco probable que se vea la goma del sitio. A usuario activo Internet no se asustará ante un bloque "saltado" o estirado.

La causa tecnológica se reduce a una serie de temores.

¿Qué hacer con los vacíos emergentes?

Hay muchos sitios de caucho bien diseñados que resuelven este problema. La publicación en línea “Vremya-n” amplía imágenes en alta resolución. En Google Imágenes, los bloques con imágenes saltan de línea en línea en diferentes anchos de navegador.

¿Qué hacer con bloques de texto anchos?

Puede utilizar una estructura de varias columnas. En este caso, los bloques, mientras se estiran, siguen siendo legibles. Este método se implementa en Lenta.ru. Pero incluso en un sitio web normal de tres columnas se puede lograr la legibilidad del texto.

La mayoría de los sitios de caucho que recordamos se construyeron a principios de la década de 2000, cuando no había tantas oportunidades como ahora. Los sitios web de esa época estaban “pegados” a los bordes de la pantalla y se extendían únicamente a través de la columna central. Al mismo tiempo, el texto estaba terriblemente estirado.

• Sujeto: HTML y CSS
• Tiempo del vídeo: 00:22:38
• Dificultad: promedio
• Programas de aplicación: Dreamweaver CS4

En esta lección analizaremos a fondo todo rocas submarinas parecería concepto simple, como el ancho del elemento. Entendamos en qué consiste y qué representa realmente. También consideraremos el trabajo. propiedades flotantes. Veamos un ejemplo de por qué los elementos flotantes se mueven hacia abajo cuando cambia el ancho de la ventana del navegador. nueva línea, y resolveremos este problema. Consideremos y resolvamos el problema del colapso de los límites de los bloques.

Técnica 2: crear un menú de goma usando listas

• Sujeto: HTML y CSS
• Tiempo del vídeo: 00:16:13
• Dificultad: promedio
• Programas de aplicación: Dreamweaver CS4

La navegación es quizás la parte más importante del sitio. Y un sitio de caucho, por regla general, también tiene navegación de caucho. Crear menú de goma Usar tablas no será difícil. Pero cuando se trata de crear un menú de este tipo mediante listas, surgen muchas preguntas. En este tutorial crearemos un menú elástico usando listas. Veamos la teoría detrás de la creación de dicho menú. Identificaremos y solucionaremos posibles problemas.

Técnica 3. Ordenar elementos por posicionamiento

• Sujeto: HTML y CSS
• Tiempo del vídeo: 00:23:39
• Dificultad: promedio
• Programas de aplicación: Dreamweaver CS4

A menudo surgen situaciones en las que es necesario superponer elementos. O forzar que el elemento se ubique, por ejemplo, en la esquina inferior derecha, independientemente de cómo estén ubicados los bloques circundantes. Este problema resuelve mejor la propiedad posición. En este tutorial veremos los elementos de posicionamiento. Trabajemos en elementos superpuestos usando la propiedad. índice z. Vamos a averiguar condición necesaria para trabajar propiedades índice z.

Técnica 4: centrar un elemento de ancho variable

• Sujeto: HTML y CSS
• Tiempo del vídeo: 00:11:45
• Dificultad: promedio
• Programas de aplicación: Dreamweaver CS4

Al diseñar diseños de goma, a menudo surge una situación en la que es necesario centrar un elemento. Cuando se conoce la anchura del elemento a centrar no surgen problemas. La cosa se complica más cuando se desconoce o puede variar el ancho del bloque que hay que centrar. En esta lección veremos un ejemplo de cómo centrar un bloque de ancho variable, usando el ejemplo de creación de navegación de página.

Técnica 5. Alinear los bloques al ancho del bloque de goma.

• Sujeto: HTML y CSS
• Tiempo del vídeo: 00:16:00
• Dificultad: promedio
• Programas de aplicación: Dreamweaver CS4

A veces surge una tarea cuando es necesario colocar varios bloques en todo el ancho del bloque principal. Es decir, el primer bloque debe estar en el borde izquierdo, último bloque debe estar en el borde derecho. Y las distancias entre los demás elementos deben ser las mismas. Esto es fácil de lograr al diseñar el diseño. ancho fijo. Pero complicaremos el problema y lo resolveremos en una lección sobre un bloque de goma.