¿Es posible tener 50 000 fotos en una página web?

Vamos a tratar de hacerlo de forma gratuita. No es complicado y supongo que tienes un editor de texto.

Solo está poniendo etiquetas con sus tamaños en una página HTML básica.

primera imagen
segunda imagen
tercera imagen


Pero como se trata de imágenes de 50K, la página tardará mucho en cargarse.

Para abordar tales problemas, vamos a discutir la carga perezosa. La carga diferida es un patrón de diseño comúnmente utilizado para imágenes y otros componentes para diferir su inicialización hasta el punto en el que se necesita, es decir. las imágenes se descargarían cuando la página se desplaza y la imagen debe mostrarse, lo que reduce el tiempo de carga de la página.

Puede buscar en Google ‘LazyLoad’ y obtener documentos relevantes y tutoriales sobre cómo usar el mismo.

Así es como se vería tu html después de incorporar lazyload.

PS jquery.lazyload.js tiene que ser referido

$ (documento) .ready (función () {
$ (“img.lazy”). lazyload ();
});

first image
second image
tercera imagen


Esta es una de las galerías de imágenes que construí para un amigo mío usando la misma técnica. ¡Tengo que atraparlos a todos!

De todos modos, el siguiente problema sería el trabajo manual para copiar el nombre y la ubicación de todos los archivos que alojaría en los servidores de aws. Puede hacer una nomenclatura mediante la cual puede crear las etiquetas en su html a través del código sin tener que pensar en cuántas imágenes hay en la carpeta que tiene.

En PHP puedes hacer lo mismo por algo similar a esto:

$ url = “./image_folder_path”;
$ temp_files = scandir ($ url);
natsort ($ temp_files);
$ latestFirst = array_reverse ($ temp_files);
$ blacklist = array (‘.’, ‘..’, ‘js’, ‘img’, ‘index.php’, ‘loading.gif’, ‘bg.jpg’);
foreach ($ latestFirst as $ file)
{
if (! in_array ($ file, $ blacklist)) {
if ($ file! = basename (__ FILE__))
{
$ imgTags. = ‘alt_names_of_the_image! ‘;
}
}
}

Si no eres un técnico y lo quieres de forma gratuita, debes dedicar algo de tiempo a descubrir qué está sucediendo y hacer un poco de éxito y pruebas para obtener lo que deseas.

De todos modos, si desea más que solo una galería de imágenes, algo con funcionalidades de búsqueda y otras, debe definir lo que desea y, dependiendo de las complejidades, podrá obtener una cotización correcta. No esperaría un costo de más de 10K INR o 150 $ por un sitio web (que se ve bien en todos los dispositivos y cosas) que pueda desear. Una vez más, el costo puede ser negociable dependiendo de lo que todo lo que está buscando. El costo por hospedar espacio y todo lo que se incluye puede variar nuevamente dependiendo de la tecnología que esté utilizando.

Gracias por el A2A, siéntase libre de hacer preguntas

Puedes tener fotos de 50K en una página web, pero no las cargarás todas, solo lo que está visible. De todos modos, no podrá mostrar fotos de 50K en una pantalla, así que solo carga lo que cabe en la pantalla.

Haga una búsqueda de la imagen de Google para un ejemplo.

desplazamiento infinito – Búsqueda de Google

Existen varias tecnologías / soluciones disponibles que le permiten segmentar su página web y cargar según la demanda a medida que el usuario se desplaza.

Así que las preguntas que debes hacerte a ti mismo es:

  • ¿Cuántas fotos se muestran a la vez?
  • ¿Cómo puedo cargar dinámicamente un subconjunto de fotos de 50K según lo que es visible a la vez?
  • ¿Cómo le permito al usuario encontrar fácilmente lo que está buscando?

Dudo que el desplazamiento a través de fotos de 50K sea útil. La clave es descubrir cómo filtrar de una manera sensata al usuario para que el usuario pueda encontrar lo que está buscando de manera eficiente sin tener que desplazarse por las fotos de 50K.

Puede intentar buscar “desplazamiento infinito” para encontrar algunas bibliotecas que proporcionan este tipo de comportamiento.


A grandes rasgos, así es como funciona:

  1. Decida una serie de elementos para mostrar por pantalla, por ejemplo, 50
  2. Diseñe el HTML para que contenga solo 50 etiquetas de visualización relevantes
  3. Enganche los eventos de desplazamiento
  4. Cuando el usuario se desplaza, averigua qué elementos son visibles.
  5. Pregunte en el back-end la gama de elementos necesarios para la visualización.
  6. Apunte las etiquetas HTML a los 50 elementos para mostrar
  7. Optimice cargando solo los elementos que no se cargaron antes (caché del lado del cliente)
  8. Optimice con los temporizadores en los eventos de desplazamiento para que cuando el usuario se desplaza rápidamente a través de 10 páginas, no cargue las 10 páginas, solo la página que está visible cuando el usuario deje de desplazarse.
  9. Optimice la memoria caché del lado del cliente para que no crezca demasiado al descargar elementos antiguos no visibles (importante cuando se trata de una cantidad tan grande de elementos como los que describe)
  10. Optimice la compresión de las fotos, tal vez muestre la baja calidad primero y comience a cargar una mayor calidad en segundo plano y reemplace los elementos de baja calidad, de esta manera puede evitar la carga innecesaria de alta calidad si el usuario se desplaza rápidamente

Si lanza su propio control de desplazamiento, se encontrará con más efectos secundarios que los que se enumeran aquí, pero debería darle un buen comienzo.

Bueno, por supuesto, puede tener tantos en una página, pero si se entiende por sitio web, la respuesta es la misma. No importa el costo realmente, pero le diré que los ponga en formato Bitmat ya que algunos formatos no están hechos para la web y causan el uso excesivo de recursos. Un alojamiento web básico cuesta alrededor de $ 4.99 por mes y un dominio cuesta $ 12 por año. Eso es lo más barato que he visto que es confiable.

No use ningún CMS como WordPress ya que usaría recursos. En su lugar, utilice páginas HTML básicas con sus imágenes y títulos, etc.

50k fotos a aproximadamente 50kb 1 mil KB hacen 1 MB.

50k fotos a 50Kb cada una es

2,500,000 KB o 2500MB que es 2.5 GB de espacio.

Así que deberías poder poner tus fotos en un sitio web y hacerlo bastante barato.

Puede optar por un host gratuito, pero como son las fotos, no lo recomiendo, ya que si lo cancelan sin previo aviso, perderá todo.

Ah, y los puse en una carpeta zip (lo hará más pequeño) y los almacenaré en la nube y en su computadora para hacer una copia de seguridad.

GL y feliz compartir fotos!

En teoría podrías tener etiquetas de 50k img. La página sería inútil y demoraría tanto en cargarla que no vale la pena como una sola página. Nadie esperaría jamás para verlo.

Un enfoque mejor sería cargar 20-30 imágenes en la carga de la página e implementar un desplazamiento sin fin (Data Load While Page Scrolling (desplazamiento infinito) con jQuery PHP y MySQL) y cargar otras 20-30 imágenes, similares a Twitter o Facebook.

Otro enfoque consiste en agrupar las imágenes por atributos o categorías como el más reciente, la mayoría de los votos, los géneros como la ciencia ficción, la política o la gente.