Mantener un maestro y hacer una copia de entrega web
Salva la imagen original con su descripción de la imagen y registro de aprobación. Crear archivos de entrega separados para la área de imagen real de la página. Esto le permite cambiar el marco de la imagen o la composición más tarde sin editar repetidamente el único archivo de fuente.
THE RENDER OFFICE actualmente devuelve imágenes PNG en dimensiones cuadradas, paisajes o retratos. Una gran fuente puede ser útil para la finalización, pero una pequeña tarjeta de categoría puede necesitar menos píxeles. La configuración de calidad de la creación de imagen no es un sustituto para la preparación de una exportación web adecuada.
El juego entrega píxeles al layout
Véase el tamaño de la imagen que se muestra a través de los layouts reales y densidades de dispositivo que usted apoya. Preparar las variantes de imagen adecuadas donde el sitio pueda servirlas de manera responsiva. Reducir la anchura de CSS solo no reduce los bytes del archivo que se descarga.
MDN documenta cómo los candidatos de fuente de imagen y la información de tamaño ayudan a los navegadores a elegir un recurso adecuado. El diseño declarado debe corresponder a la página real; la información de tamaño incorrecto puede hacer que el navegador selecte un candidato menos adecuado.
Comparación de la compresión en el tamaño de la visualización final
Exporta los formatos adecuados apoyados por el flujo de trabajo de publicación, luego compara el tamaño del archivo y la apariencia. Inspectar los gradientes, la textura fina, los lados y cualquier detalle exacto del producto después de la compresión. Mantenga transparencia sólo cuando el diseño realmente lo necesita.
Seleccione el archivo más pequeño adecuado que conserve la calidad requerida para la colocación. No hay un objetivo de tamaño de archivo universal que demostre que una imagen es optimizada. Una pequeña tarjeta decorativa y una imagen detallada del producto tienen trabajos diferentes y deben revisarse de acuerdo con ello.
| Campo | Dato registrado | Pregunta de revisión |
|---|---|---|
| Ubicación | Página actual y área de imagen | ¿El diseño de la imagen sirve a este layout? |
| Fuente y exportación | Nombre y variante de entrega | ¿Se puede reproducir la exportación? |
| Dimensiones y bytes | Tamaño de píxeles y tamaño de archivo | ¿Es adecuado el recurso suministrado? |
| Revisión visual | Calidad aceptada en el tamaño previsto | ¿La compresión ha eliminado información importante? |
Reserva espacio de diseño y carga por importancia
Ofrece información intrínseca de ancho y altura para que el navegador pueda reservar la relación de aspecto de la imagen antes de que llegue. MDN explica cómo esto reduce el movimiento de layout. Confirmar que el marco de imagen final y el comportamiento CSS coinciden con el espacio reservado.
Utilice la carga laciosa para imágenes adecuadas que no son necesarias para la vista inicial. No la aplique indiscriminadamente a la imagen principal que un visitante debe ver de inmediato. Véase el comportamiento de la página en realidad en lugar de tratar un atributo de carga como una corrección universal de rendimiento.
Dar a la imagen un contexto de búsqueda y lector útil
Póngase la imagen junto al texto relevante y seleccione un nombre de archivo corto y descriptivo. Escribe el texto alt para el propósito de la imagen en esa página, evitando las listas de palabras clave. Google describe los nombres de archivos como una pista ligera y utiliza el contexto de la página circundante para entender el tema; un solo nombre de archivos no establece relevancia o clasificación.
Véase las solicitudes de imagen, el diseño, la accesibilidad y el rendimiento de la página publicada con las herramientas adecuadas. Recordar las condiciones y los resultados antes de comparar versiones. La entrega más rápida puede mejorar la experiencia, pero los ingresos todavía dependen de la oferta, el público y el camino de conversión completo.
Plan la fuente antes de la exportación.
Utilice la guía de flujo de trabajo de campaña para decidir qué imagen necesita, cómo se revisará y cómo se entregará el activo terminado.
Siga el flujo de trabajo de imagen de campaña