Image optimization as the key to a fast website
Image optimization is a key factor in website speed. Proper optimization will help you save up to 80% of data intensity and has a significant effect on speed. Website speed, in turn, affects all the key metrics of a successful site: it improves user satisfaction, conversion rate, and search position.
The same image often appears on the website in multiple situations and sizes. For a preview in a list a low-resolution image is sufficient, but when used in the background of a full-screen section, the demands on the image quality are much higher. Likewise, visitors use a wide variety of devices to view websites, from smartphones, tablets, computers to smart TVs. The combination of these factors creates a large number of situations in which the image must look good and still load quickly. In order to make the preparation of images less laborious for web creators, solidpixels automatically optimizes the resolution and data size of all images.
Image upload limits
It is possible to upload images to the solidpixels application with a maximum resolution of 2600 x 2600 pixels and a data size of up to 10 MB. When the limits are exceeded, the following will occur:
automatic resizing of an image if one of its sides exceeds 2600 pixels
refusal of uploading the file to the server if it exceeds the data size of 10 MB
Supported image upload formats are: jpg, png, webp, gif and svg.
Automatic generation of responsive images
Solidpixels automatically generates the following image previews and always uses the most appropriate one. The longer side of the image is taken into account, the shorter side is adjusted to maintain the original aspect ratio.
- 360px
- 640px
- 980px
- 1280px
- 1920px
- 2600px
- original size - used only when displaying an image in a lightbox
Image previews are not generated immediately after uploading, but only at the first request to display a proper preview on the web. So the action is triggered by a website visitor. The data size of the preview is already optimized so that the user does not download a large amount of data. Normally there is a saving of 50% to 60% of the original.
Image minification
Solidpixels triggers a minification for each existing image preview. This reduces the data size of the image without affecting the image quality. Minification is performed every day for all existing previews at three o'clock in the morning. Minification occurs for JPG, PNG, and GIF files. Thirty days after a minimized version of an image is created, its original version is deleted. Thanks to automatic optimization, the images take up only the necessary space.
Placeholders increase perceived speed
Before loading all the data, instead of the final image, the visitor will first see a placeholder colored area that corresponds to the color of the image. Using a placeholder image increases the perceived page load speed. The visitor receives information that he should expect content on the spot, at the same time no animated elements disturb his attention.
Gradual loading of images (lazy-loading)
Lazy loading is an approach that ensures that the image is loaded only when the visitor needs it. It is usually linked to a page scroll. In the first phase, only the images needed to render the first screen of the site are loaded. Additional images will not begin loading until the visitor scrolls the page and sees the image.
This speeds up page loading and prioritizes the elements that are most important at the moment. Server load is also minimized and user data is saved. Many visitors never move the page because they find the information right at the top of the page or leave the site.
Alternative image descriptions
When working with images, it is advisable to fill in alternative descriptions, or the tag alt. The Alt description is textual information about the content of the image and is displayed when, for some reason, the image cannot be displayed, such as before the image is loaded or when the user has turned off image display.
Filling in the alt descriptions also affects the evaluation of the website from the SEO point of view. Search engines are unable to recognize the content of the image. The caption helps robots identify the image and include it in the page content. This can help the site evaluate its relevance and search position.