Slow and poorly performing websites directly affect the effectiveness of a service, especially if your primary sales channel is through the web.
In general, HTML and JS code do not consume much bandwidth; JavaScript code can sometimes be more resource-intensive, but that is rare and is usually because of multiple external libraries or frameworks.
Media files are the ones that consume the most data, and in particular, images, which are the most used. As a result, they tend to generate optimization problems. This article will focus on this specific format to offer you three tricks to optimize images.
One of the most common mistakes is to take the high-resolution images used by designers and agencies and publish them directly on the web. Often those images are created for print media that use very high resolution. They also use low compression algorithms that are not efficient for the web.
Always use images with a resolution of 72 PPI (pixels per inch).
About the image format, prefer GIF or PNG format in cases where you use solid colors or text. JPG format works best for images with color gradients, such as photographs or complex images. Each image is different and may have different results in each format, don't forget to experiment and compare with different compressions, codecs, and formats to get the best results.
Another common mistake is to use large images for smaller areas.
If an image is intended to be displayed in an area of 300 x 300 px, the image size should not be larger than that. Using a larger image size transmits unnecessary data and sometimes distorts the image, and reduces its quality.
A quick and easy way to find the actual size of an image is to right-click on it from the Chrome browser, select the "inspect" option, look for the image tag in the source code, and view its properties.
Sometimes, images include additional data that are not necessary to display on the web. For example, photographs captured on a camera contain EXIF data or PNG images processed in some editors insert layer data and editing parameters.
When exporting an image, make sure it is in web format and does not include layers or additional data.
Many online services can optimize images and automatically reduce their size. Among the most popular ones are
Below you have 2 images that look the same size and have the same visual effect, but one is almost 1Mb, while the other image optimized with the tools and tips mentioned in this article, was reduced by 96% of the original size, now measuring only 31 kb.
As a comparison, the original image takes 90 seconds on a slow cellular connection, while the optimized one takes only 10 seconds.
With a simple optimization and using good practices of constant review on your site, you can guarantee that performance can increase dramatically and make it easier for your users to access your site.
Photo by Soragrit Wongsa on Unsplash.
Carlos Solís
Learn how Domain Driven Design (DDD) empowers you to build applications that align with your business. Apply DDD in microservices and micro frontends architectures to create scalable,and maintainable solutions,leveraging the power of Modyo.
Carlos Solís
Optimizing images is essential for any website, especially if you’re aiming for fast load times and a great user experience.
Carlos Solís
Forms are fundamental in any financial application. They help capture critical user information, such as personal data, preferences, and financial details.