Surely it’s happened to you that you open a post and the images take longer than expected to load! That’s often a factor that drives visitors away from our content, since users commonly won’t wait for a post to load and will prefer to go somewhere else. In fact, this is such a significant issue that, in web design, page load speed is one of the most important elements to consider.
But what causes this? There are several factors—some aren’t even under our control. It could be a poor internet connection (even with a good connection, there may be sudden failures), or it could be related to the Hive nodes, where all data is stored, and sometimes that data doesn’t flow as smoothly as it should.
There’s another reason, though, and this one is on us: the image (or images) might be too heavy. Let me explain.
The first phones with built-in cameras could only take tiny shots that weighed next to nothing, in order to maximize the device’s limited storage. But that technology has evolved drastically. Nowadays, in addition to phones having large storage capacities and alternative methods to save photos to the cloud, they come equipped with ultra-high resolution cameras—which means, large file sizes.
¡Seguramente te ha pasado que vas a abrir un post y las imágenes se tardan más de la cuenta en abrir! Ese es un factor que muchas veces aleja las visitas a nuestra publicación, porque es muy común que un usuario no espere a que un post cargue y prefiera irse a otro lugar. Tanto es eso así, que en diseño de páginas web ese es uno de los elementos más importantes a tomar en cuenta, la carga rápida de una página.
¿Pero a qué se debe eso? Hay varios factores, que en algunos casos no tiene que ver con nosotros, como lo puede ser una mala conexión a internet (a veces solemos tener buena conexión y fallar en un momento específico), como también puede tener que ver con los nodos en Hive, que es donde se almacena toda la data y hay ocasiones en que esta no fluye como debiera.
Pero hay otra opción y esa sí tiene que ver con uno, que la imagen (o las imágenes) sea demasiado pesada. Paso a explicar.
Los primeros teléfonos que incorporaron cámaras fotográficas, apenas hacían unas capturas pequeñitas, que no pesaban casi nada, para aprovechar el poco espacio del teléfono. Pero esa es una tecnología que ha ido cambiando y hoy en día, aparte de la gran capacidad de los nuevos teléfonos y los métodos alternativos para guardar tus fotos en la nube, han incorporado cámaras con una altísima resolución, lo que se traduce en mucho peso.
Let’s take an example. By default, phone cameras are configured to take “good photos”—maybe not the absolute highest quality, but still very good. For instance, my iPhone is set to 4:3 ratio with a resolution of 3840 x 2160 pixels. That produces a photo around 1.7 megabytes. If the image is in 16:9 format, its size can reach around 2.7 MB. If you upload 10 photos with those characteristics to your post, you’ll be loading nearly 30 megabytes just in images—which can be a nightmare.
Most of us just take the photo and upload it as-is. But think about this: the vast majority of monitors worldwide have a resolution known as Full HD—1920 x 1080 pixels, also called 1080p. That means they won’t even take advantage of our image’s full resolution. Maybe it would be worth it if we’re showcasing something very special that needs to be seen with maximum clarity. But if we’re talking landscapes to accompany a post, concert shots, family pictures, etc., then all you’re doing is scaring off potential readers.
Beyond the time it takes for the photos to display, another important factor is how long it’ll take you to upload them—especially if you’re using mobile data...
What to do? It’s simple. Most smartphones come with photo editing apps that allow you to reduce the image file size (or resolution). If you don’t currently have one of these tools, there are plenty of editors in the Android or Apple stores. And if that still doesn’t solve your issue, you can try online editors like https://imageresizer.com/ or Adobe Express.
What’s the ideal image size? You can experiment, but for 4:3 ratio images a good resolution is 1600 x 1200 px. Though personally, I often use 1280 x 960. For 16:9 ratio images, the equivalent would be 1600 x 900 or 1280 x 720.
Either way, the best approach is to experiment based on your content and the results you observe.
Vamos a ejemplificar. Por defecto, las cámaras de los teléfonos vienen configuradas para una “buena foto”, es decir, puede que no venga configurada con la más alta calidad, pero sí una muy buena. Por ejemplo, mi iPhone trae, como configuración general, la imagen en una proporción de 4:3 y a un tamaño de 3840 x 2160 píxeles. Esto produce una imagen con un peso de alrededor de 1,7 megabytes. Si el formato de la imagen tiene la proporción 16:9, entonces el peso será de cerca de 2,7 MB. Si cargas 10 fotos con esas características en tu post. Solo en imágenes tendrás que cargar casi 30 megas, lo cual puede ser una pesadilla.
Y la mayoría de nosotros tomamos la foto y así como está la subimos. Pero piensa esto, la gran mayoría de monitores del mundo tienen una resolución conocida como Full HD, que son 1920 x 1080 píxeles, también conocida como 1080p. Es decir que no van a aprovechar la resolución de nuestra imagen. Aparte del hecho de que quizá valdría la pena si se trata de fotos de algo muy especial que debe ser visto con la máxima precisión. Pero si se trata de fotografías de paisajes que acompañen nuestro post, fotos de un concierto, de la familia, etc., lo único que estarás haciendo es espantando a tus posibles lectores.
Aparte del hecho de que estas fotos se tardan más en mostrarse, otro elemento importante es el tiempo que te va a tomar subir las fotos para su publicación. Sobre todo si estás pagando datos...
¿Qué hacer? Es muy sencillo. La mayoría de teléfonos inteligentes cuentan con aplicaciones de edición de fotos, que te permitirán reducir el peso (o resolución) de las mismas. Si no dispones actualmente de una de estas herramientas, hay cantidad de editores en las tiendas de Android o Apple. Si eso aún no resuelve tu problema, hay cantidad de opciones de editores en línea, tales como https://imageresizer.com/ o Adobe Express.
¿Cuál debe ser el tamaño ideal? Tú puedes ir probando, pero una buena resolución para imágenes 4:3 puede ser 1600 x 1200 px. Aunque yo en muchas ocasiones uso 1280 x 960. Su equivalencia en imágenes 16:9 sería 1600 x 900 o 1280 x 720.
De todos modos, lo mejor es ir probando según tu contenido y los resultados que vayas obteniendo.
https://images.hive.blog/0X120/https://files.peakd.com/file/peakd-hive/ylich/23tH7aEsqtMaP45eqgUAV7NUxA16iR7E7iQYnxQrLgXp3BRaiv1JHArTrm4rjegS7rz6d.jpg
If you want to check the size of your published images, you can click on any of them, choose “open in a new window,” and once the image finishes loading, its dimensions will appear in the browser’s address bar next to the file name.
Hive offers a way to display smaller versions of your images by using the following code: https://images.hive.blog/0X120/, where 120 is the pixel size you want to display. This code is placed in front of the image’s URL. However, this doesn’t reduce the file size or resolution—it only changes the appearance, as shown by the image above this block.
Si quieres verificar el tamaño de tus imágenes publicadas, puedes hacer clic sobre cualquiera de ellas, le indicas abrir en una nueva ventana y al terminar de cargar, aparecerán las dimensiones en la barra del navegador, junto al nombre.
Hive ofrece una forma de mostrar las imágenes más pequeñas, usando el siguiente código https://images.hive.blog/0X120/, donde 120 es el tamaño en píxeles que quiero que se muestre. Ese código se coloca delante de la dirección de la imagen. Pero esto no reduce el peso, ni la resolución, tan solo cambia el aspecto, tal como la que está encima de este bloque.
Si te gusta el tipo de contenido que publico y el trabajo que hago en la plataforma, vota por 
If you like the type of content I publish and the work I do on the platform, please vote for
¿No sabes lo que son los testigos? ¡Entérate en este enlace!
Don't know what witnesses are? Find out more at this link!
ecency.com - hive.blog - inleo.io - peakd.com |
|---|