1. Prerrequisitos
2. Usamos recomendaciones para imágenes.
3. Estructura de archivo
4. Instrucciones breves para el trabajo.
5. Adiciones
6. x64 (aka andi)

Sitio sin imágenes - un anacronismo. Mucha gente piensa, y no carece de sentido común. Recuerde, ¿cuánto tiempo ha estado en el sitio por última vez y cuánto tiempo ha estado en él?

Los datos de texto son mucho más pequeños que la imagen. Pero se sabe que la gente ama sus ojos. Por lo tanto, las imágenes serán una ventaja indudable de la historia.

En general, al hablar del texto, nos referimos tanto a su contenido como a una presentación visual conveniente, que incluye párrafos, listas, citas, tablas. Sin embargo, esto no es suficiente, e incluso los sitios de noticias están tratando de proporcionar imágenes de periodistas.

Empecemos por el supuesto de que las imágenes son necesarias. Estas pueden ser fotos, diagramas, simplemente explicando imágenes.

Hace mucho tiempo, cuando Putin no parecía eterno, hice mi primer portal web médico. Era necesario colocar fotos en el atlas. Es obvio que es bastante difícil imaginar la estructura anatómica del cuerpo sin imágenes, y mucho más describirlo con palabras. Y sin más preámbulos, subí fotos a bmp (formato sin comprimir). ¿Tengo que decir que pesaban masa? Además, algunos navegadores no sabían cómo mostrar esas imágenes.

Entonces, ¿por qué optimizar las imágenes? Un ejemplo simple es una foto. Los teléfonos modernos tienen cámaras en 8, 12 e incluso más megapíxeles. 12 MP corresponde a una imagen de 4000 × 3000 píxeles. Dependiendo de la complejidad de la escena, esto corresponde a un tamaño de 2 a 5 megabytes, e incluso más. Una docena de fotos, y el tamaño de la página se hincha mucho. La imagen se ajusta al área de contenido, lo que significa que el navegador debe primero descargar todo, escalarlo y luego mostrarlo. Para los débiles procesadores o con una pequeña cantidad de RAM - un desastre.

Ahora imagine que el usuario está viendo el sitio desde el teléfono. En este caso, la carga de la página simplemente no puede esperar. Por lo tanto, las imágenes deben ser pre-reducidas.

Alguien argumentará que no tiene sentido, el CMS moderno crea automáticamente miniaturas cuando descarga imágenes. Pero, ¿todos tienen sus sitios en VPS o tarifas VIP? Es posible que se descargue una imagen de 12 MP, pero para procesarla, PHP necesitará asignar más de 35 megabytes (en teoría, de hecho, más) para el almacenamiento, y luego aún sabe cuánto crear una copia más pequeña. Las tarifas baratas se hunden inmediatamente en el exceso de recursos. Un buen proveedor le pedirá al usuario que ya no haga esto, uno malo lo ignorará, porque solo el dinero es importante para él y no el rendimiento de los servicios.

Y así, decidimos actuar correctamente. Reducimos preliminarmente las imágenes y luego las subimos al sitio. Así que el motor es más fácil, y la gente. Es todo En realidad no

Muchos editores conservan los fragmentos originales (metainformación, partes que no son imágenes del archivo) que contienen información adicional. Por ejemplo, si toma una foto de algo en el teléfono, transfiere el archivo a la computadora, haga clic en él con la tecla derecha y seleccione "Propiedades → Detalles", verá los datos en el dispositivo: la cámara que fotografió, la velocidad de obturación, ISO, etc. Para el usuario, esta información es inútil, por lo que puede deshacerse de ella.

Bueno, piénsalo, una parte. ¿Qué hay, un montón de información que está contenida? Imaginar A veces se obtienen imágenes en las que cientos de kilobytes de dichos datos. Hoy mismo, enviaron un logotipo de 584 KB de tamaño para acomodar. Al mismo tiempo, la información útil era de solo 14 KB! En cuanto a mí, no es del todo correcto obligar al visitante a descargar 570 KB desde arriba.

Vamos a resumir los subtotales. Para que los usuarios del sitio tengan éxito, usted debe:

1. Reducir el tamaño de la imagen. Para ayudar a cualquier editor gráfico.
2. Deshágase de las partes del archivo son innecesarias. De hecho, el usuario solo necesita una imagen.
3. Intenta reducir aún más el tamaño de la imagen.

El primer párrafo implica el trabajo individual en cada archivo. Lleva mucho tiempo, pero trae el mejor resultado. Abrimos cada archivo, lo cortamos, lo reducimos, luego lo guardamos con una calidad aceptable.

Pero los párrafos 2 y 3 pueden darse a merced de programas especiales. Software para trabajar con conjunto de imágenes. Google recomienda los siguientes programas:

• jpegtran para formato de imagen jpg.
• Optipng y pngout para imágenes PNG.

Un poco sobre la página 3. Los editores gráficos generalmente no se molestan con eso. Simplemente guardan la imagen, seleccionando con antelación los algoritmos de compresión establecidos con la misma configuración, coeficientes de cuantificación y otras cosas. Además, muchos transfieren honestamente la metainformación disponible y agregan la suya, lo que aumenta aún más el tamaño del archivo.

Prerrequisitos

Hace un año, hablando masivamente del servicio. PageSpeed ​​Insights de google. De hecho, estas son recomendaciones del gigante de la búsqueda sobre "cómo hacerlo bien". Simplemente escriba la dirección del sitio y obtenga una lista de sugerencias para la optimización. Allí también puede descargar recursos ya optimizados, incluidas imágenes, para su sitio. Es cierto que esto es relevante solo para la página marcada.

Si tienes un sitio web, asegúrate de mirar este articulo . Particularmente útil para aquellos que usan WordPress.

Usamos recomendaciones para imágenes.

Parece simple: descargue los programas especificados por Google y ejecute todos los archivos en el servidor a través de ellos. El problema es que estas utilidades son de consola. Toman solo 1 archivo a la vez. Pero no estamos en vano en último artículo Tomó el tiempo para los archivos por lotes, ¿verdad?

La información del artículo es suficiente para crear su propio manejador de archivos en masa, por lo que no pintaré donde está. Solo propongo descargar el ensamblaje listo, que uso yo mismo.

Descargar archivo (212 KB)

Estructura de archivo

El archivo contiene una carpeta [ OptimizeImg ]. Para empezar, desempaquetar en alguna parte. Lo tengo ubicado en c: \ temp \ pero no importa. Lo principal es que la ruta no contiene signos de exclamación.

Siguiente Esta carpeta contiene el subdirectorio [ uploads ]. Aquí necesitas poner los archivos que requieren procesamiento. La mejor parte es que puede empujar al menos la estructura de carpetas / archivos.

Hay 3 programas más: jpegtran.exe | optipng.exe | pngout.exe es la utilidad muy recomendada por Google. Descargado de los sitios / repositorios oficiales correspondientes. En caso de duda, o simplemente desea actualizar, descargue desde una fuente confiable y reemplace las existentes.

Y, por último, el corazón de tulza. Batnichki:

• 1.bat
• 3.bat
• 3-go.bat
• 3-opti-to-out.bat
• 3-out-to-opti.bat

El primer archivo, 1.bat, recrea la estructura de [subidas]. Se crean 3 carpetas adicionales: [jpg_jpegtran] [png_optipng] [png_pngout] con archivos minimizados procesados ​​de su tipo (jpg - solo * .jpg-files, lo mismo con png).

3.bat lanza de forma secuencial tres archivos por lotes para su ejecución:

• 3-go.bat es casi lo mismo que 1.bat. Omitir archivos jpg / png a través de minimizadores. El resultado del trabajo será 3 carpetas (ver arriba) con las imágenes correspondientes.
• 3-opti-to-out.bat crea la carpeta [png_optipng-to-pngout], en la que se escriben los archivos procesados ​​por optipng + pngout (exactamente en esta secuencia).
• 3-out-to-opti.bat crea una carpeta [png_pngout-to-optipng] en la que se escriben los archivos procesados ​​por pngout + optipng. Similar al anterior, solo en una secuencia diferente.

En principio, solo 1.bat es suficiente para nuestras necesidades. Bolsas 3x aparecieron como resultado de la investigación y los errores en la versión anterior del archivo por lotes. Ocurrió que durante el error los archivos para pngout se tomaron del directorio optipng. ¿Y cuál fue mi sorpresa cuando el lanzamiento de la versión anterior dio un tamaño 1.5 veces más pequeño que en el archivo por lotes actualizado? Como resultado, resultó que el doble procesamiento puede "poner al día" bien las imágenes. Pero lleva casi 2 veces más tiempo. Así que decide tú mismo si es necesario.

Instrucciones breves para el trabajo.

1. Descargar archivo .
2. Desembala.
3. Vaya a la carpeta [OptimizeImg] recién abierta.
4. Todos los archivos que requieren picadura, copie la carpeta [subir].
5. Ejecutar 1.bat y esperar. Si hay muchos archivos y son png, espere mucho tiempo.
6. Cuando aparece un mensaje en la ventana negra sobre la necesidad de presionar una tecla para continuar, todo está listo. Queda por tomar el contenido de las carpetas creadas y copiarlo al hosting a través de FTP, sobrescribiendo los archivos antiguos.

Por un ejemplo Deja que tengas un blog en WordPress. Todas las imágenes se almacenan en [ / wp-content / uploads / ]. Vaya a la carpeta del sitio (a través de ftp), vaya a [ wp-content ] y simplemente copie [ subidas ] a la carpeta OptimizeImg del mismo nombre. Ejecutar 1.bat y esperar. Una vez finalizado el trabajo, el contenido [jpg_jpegtran] (vamos allí!) Se carga en el servidor. Las solicitudes de archivos existentes se responden sobrescribiendo. Un truco similar para png, pero primero observamos qué carpeta - [png_optipng] o [png_pngout] - ocupa menos espacio, llénela con su contenido.

No tengas miedo de dañar otros archivos. Batniki solo funciona con jpg / png, y solo las imágenes de estos tipos se escriben en las carpetas recién creadas.

Espero que alguien sea útil. ¡Éxitos!

Adiciones

1. ¡La ruta a [OptimizeImg] no debe contener signos de exclamación ! y porcentaje %
2. Ejecutar scripts como administrador no es necesario. ¡Además, en este caso, pueden no funcionar!
3. ...

Editor

no en línea 13 horas

x64 (aka andi)

Comentarios: 2846 Publicaciones: 395 Inscripción: 02-04-2009