Desenfoca todas las imágenes en Safari, a menos que se haga clic

Sé que el menú 'Desarrollar' me permite bloquear todas las imágenes en Safari, sin embargo, tengo un par de requisitos más:

  • Desenfoca, no bloquea, todas las imágenes de todas las páginas web
  • Click para mostrar imágenes borrosas

No me gusta ver las imágenes de forma predeterminada, pero quiero conservar la capacidad de "mostrarlas" de forma selectiva. Desenfocar la imagen hace que el proceso de selección (que mostrar) sea mucho más fácil.

¿Hay alguna manera de hacer esto en Safari? ¿Quizás como una extensión?

Como beneficio adicional, si hay una manera de incluir en la lista blanca un conjunto de imágenes o sitios (por ejemplo, los botones de votación en Stackexchange), sería genial.

Esta extensión de Chrome se acerca (no se desenfoca, pero muestra cuadros de colores en su lugar).

Respuestas (3)

El siguiente enfoque se acerca bastante, pero no cubre (ni puede) las imágenes que se configuran como fondo. También podría ralentizar un poco la carga de la página.

El objetivo es inyectar CSS personalizado en la página. Usaré el complemento con estilo para eso ( teóricamente, podrías hacerlo sin ningún complemento externo, pero necesitas una ID de desarrollador de Safari gratuita para hacerlo, mira aquí , me equivoqué, mira la respuesta de @markhunte). Después de instalar Stylish, verá un gran botón 'S' al lado del campo URL. Haga clic en él y seleccione 'administrar'. En la nueva pestaña, seleccione 'Editar' para crear un nuevo estilo. Dale un título (tal vez 'Imágenes borrosas') y pega el siguiente CSS en el campo 'CSS':

img {
  -webkit-filter: blur(10px);
}
img:active {
  -webkit-filter: blur(0px);
}

En 'Se aplica a:' seleccione 'global (si lo desea, puede limitarlo a direcciones URL específicas, prefijos de direcciones URL, dominios, etc.), luego guarde el estilo para habilitarlo.

Si carga una página web, todas las imágenes (excepto las imágenes de fondo) se verán borrosas. Si hace clic en una imagen, no se verá borrosa mientras mantenga presionado el botón del mouse. Puede personalizar el grado de desenfoque editando el valor de píxel en el primer selector mientras el segundo selector desenfoca la imagen.

Esto es todo lo que puedes hacer en CSS simple. Si desea una lista blanca selectiva que persista entre sesiones, definitivamente necesita escribir sus propias extensiones. Esto todavía se reduce a aplicar el CSS publicado anteriormente, pero la lista blanca y la parte de 'hacer clic para agregar' pueden ser un poco más complicadas y no tengo suficiente experiencia para brindarle una respuesta útil en ese caso.

Esto es fantástico, y funciona. Sin embargo, como mencionaste, el rendimiento es bastante malo cuando hago esto. Por ejemplo, después de tener la página principal de reddit.com en una nueva pestaña, el uso de la CPU solo en esa pestaña fue del 25 al 40 % en una macbook pro moderna. La carga de la página también se siente lenta.
FWIW, hacer esto sin Stylish (según @markhunte a continuación) tampoco ayudó con el rendimiento. ¿Quizás podamos comprometer el requisito de desenfoque al hacer que el CSS reemplace las imágenes con patrones únicos (sin desenfoque de nada) como este Chrome ext ?
Las únicas cosas que causan problemas de rendimiento serían el efecto de desenfoque y la extensión con estilo. El desenfoque es el más grande. Sugeriría usar css opacity: 0.1en su lugar, ya que debería ser mucho menos intensivo en CPU. En cuanto a reemplazar la imagen en sí, esto requeriría una solución basada en JS.
@Teak: sí, opacityno empeora el rendimiento, aunque el desenfoque es ideal para ocultar los detalles de la imagen. Gracias por la respuesta.

Este es un complemento a la respuesta de @ thee.

Puede agregar el código css en su respuesta sin aplicaciones de terceros o una identificación de desarrollador.

cree un archivo .css pegando el código como texto sin formato en un archivo de texto. Puede usar TextEdit.app para hacer esto. Guarde el archivo como .css

ingrese la descripción de la imagen aquí

Luego, en Safari llegó a Preferencias> pestaña Avanzado. Y usando el menú desplegable > Otro... de la opción Hoja de estilo , navegue y seleccione su archivo.

ingrese la descripción de la imagen aquí

Safari tomará inmediatamente la hoja de estilo y comenzará a usarla.

@klanomath. Gracias por atrapar ese crédito de señorita. :-)
Buena captura, no lo sabía. Edité (brevemente) mi respuesta para reflejar esta posibilidad.
Supongo que una desventaja de esta solución más simple es que aplica con fuerza el CSS a todos los sitios web sin ninguna opción (a través de la lista blanca/lista negra).

img:hover { opacity: 1; }

Esto le permite simplemente pasar el mouse sobre la imagen para que aparezca. Tiene un impacto mínimo en los recursos y no tiene ningún problema en el que al hacer clic en una imagen se realice una acción que quizás no desee.

+1 Acababa de regresar para agregar img: hover, que funciona mejor que Active. Y veo que lo usas aquí por la misma razón que iba a agregarlo
Desenfoca todas las imágenes en Safari, a menos que se haga clic
RespuestasAquíPolítica de privacidad1y, 0v