Even with the top-of-the-class professionally designed template, it pays to optimize every image you upload. There are many reasons to optimize images for the web, among them:
- Maintaining professional appearance: make images look appealing on screens of all sizes and resolutions, even with the slow connections on mobile devices.
- Making pages load quickly: search engines don't like slow-loading websites while heavy images can significantly slow down the time it takes to load a web page.
- SEO optimization: adding ALT tags helps search engines to index your images
- Delivering better user experience: your visits will enjoy, retain and most likely revisit the website which loads faster.
To help you format images on the go while uploading them to the page the Sitebuilder offers a pre-formatted grid that allows you to quickly crop the image to the block proportions. This way, your image would look perfect in the block without messing up the professionally designed block structure. You access the grid each time you upload the image in the desktop or mobile Sitebuilder:
In some cases, you may want to preserve the size and proportions of your image during the download. To override the pre-formatted grid restrictions, click the Keep Aspect Ratio button in the upper right corner of the image cropping window:
Once done choosing the image fragment, click Submit to upload the image to the page.
Pre-configured image shapes and overlays
Some templates are designed with pre-configured overlays for images. For example, an overlay can turn images to black-and-white or add a colored filter so that your new image perfectly matches the look and feel of the template. Some templates automatically process your images to fit a circle shape in the Team or Schedule blocks. No need to use third-party image designing tools or to figure out the correct image size and shape! Learn more about overlays and shapes here.
Let's take a look at how can we format and optimize images for each of these important functions - performance, loading time, and SEO.
Choosing the image format
There are various types of file formats available for images that are used on the web. Choosing the right image format for your website is essential for quicker page load and better performance.
PNG (Portable Network Graphics): This format is used in most designs, infographics, images with text in them and logos. PNGs are higher quality than JPEGs which typically result in larger file size. PNGs deal with areas of color and text with crisp lines, so you can zoom in and enjoy the same quality. This file format also supports transparent backgrounds which is important if you are creating a logo. If you have a choice, we recommend saving PNGs as a 24-bit format rather than 8-bit because of the better quality and rich palette of supported colors.
JPGs: this format, also known as JPEG, is the most popular image file format online. JPGs are perfect for photographs or complex images containing lots of colors, shadows, gradients, or patterns. JPGs have a huge color palette to work with. JPGs can be saved in high-quality, low-quality or anywhere in between. This way, you can adjust and save the image exactly how you want, balancing quality and file size.
GIF (Graphics Interchange Format): This image format is ideal for animated images (animated product demos or screenshots) due to its small file size.
Choosing between JPG and PNG formats is easy. If your image is mostly a photo, choose JPG. If your image is mostly words or graphic elements, go with PNG.
Image compression is essential for optimizing images for the web. Let’s see how to properly resize an image for the web without affecting the quality of the image and how to reduce its size with a quality compression.
Image quality can be preserved even when you reduce its file size which is exactly what we need to optimize it for the web. Quality of an image can be reduced by 10%-20% without any visible impact on image quality. Here's an example (using Adobe Photoshop):
1. Go to Export > Export As... This option replaces legacy Save For Web option in previous versions (this option is still available in Adobe Photoshop so feel free to use it if you find it more convenient).
This option allows you to can choose the format in which you want the image saved and the level of optimization. You can also preview the image before saving it to ensure that its quality is not lost.
For example, 100% quality of the image is 527.4 kB.
After reducing the image quality by 30%, the size of the image reduced by more than 2 times now being 192.3 kB.
Adjusting resolution is another quick way to reduce the size of the image without degrading its quality. 72 px/in resolution is optimal for Web. You can adjust the resolution when working with the image:
Note: Using very large images will not guarantee the best quality on the web page since the most commonly used size for large screens is 1926 px wide. The only time you’ll want to use large images on your website is your block background. If you use low-quality images, they will look fuzzy.
Using image optimizing tools
When choosing the image optimization software editing it all comes down to your preference and the type of optimization you seek. Here are some of the tools available:
Image file name and ALT tags
When you name the file of the image, it is important to realize that the search engines cannot actually read the images. The file name will be one of the ways in which they understand what the image is about. If you name the image using random letters and numbers, the search engine will not understand what it is about. That is why it is important to use intuitive file names when saving the images so that people, as well as the search engines, understand what they are seeing.
ALT refers to an attribute in HTML that allows you to give an alternate text to your images if they fail to load. This was originally meant for people with visual impairment. However, nowadays, it is used as one of the ways to tell search engines what the image is about. Use descriptive file names with your most important keywords separated by - (hyphens).
Search engines can associate the images with the text that is given around it. Hence it will be helpful if you place the image near a paragraph that is the most relevant to what is there in the image.
FAQ: Do I need to optimize images for mobile?
Since you do not need to design a separate mobile-friendly website with the Sitebuilder, all the images you use in the desktop version will be optimized for mobile.