Images are often the make-or-break item for webpage loading speed. They usually account for most of the download bytes and take up a significant amount of visual space. Therefore, if your webpage images are not properly optimized, they can wreak havoc on your site’s performance and user utility. There are many ways to go about compressing and optimizing images, and there is really no right or wrong way to do it, but they should be tailored to your webpage. The determining factors could be formatting, coding, image dimensions, and so on. The following six bits of information are critical to the image optimization process.
- Relevance of Images. Go through your website and determine if each image on the site serves a purpose and helps achieve a result. If an image is not helpful or relevant, remove it. It’s simply taking up space and hurting your site’s performance. Images take up more room than coding. Therefore, removing an irrelevant image will go a long way toward improving your site. However, images often show and explain things far better than words can. Make sure you don’t make your website largely dependent on text just to improve performance. Images capture attention and are visually pleasing. You need to find the correct balance of text and pictures for your website.
- Vector vs. Raster Graphics. Vector graphics rely on lines, points and polygons to create an image, whereas raster graphics encode each pixel within a grid. Vector graphics work best with simple shapes that are commonly found in logos and icons, and they come through clear at any resolution, so pixilation isn’t an issue. Raster graphics are best for more complicated images. Common forms of raster graphics are JPEG, GIF, and PNG. The raster platform allows for more customization throughout the picture, but the images are set to a specific resolution and do not adjust as easily.
- Lossy vs. Lossless Compression. Compression allows you to make the image file smaller, which in turn will allow it to load faster. A lossy filter removes some pixel data. This can be done because we don’t pick up on some colors as much, so removing those pixels is not much of an issue. The lossless compression compacts the pixel data without removing any of it. Lossy compression is optional. If you are looking for a very high-quality image, then it is in your best interest to skip the lossy step and go straight to the lossless compression.
- Image Format. There are three universal formats: JPEG, GIF and PNG. The most common is JPEG. However, there are newer formats that are supported by Internet Explorer, Android and Google Chrome browsers. Those formats are JPEG XR and WebP. Now what is the correct format for your image?
If you require any sort of animation, GIF is your answer. For images that need a very high-quality image, use the PNG format. A bigger file size is required, so be careful there. If you have an image where high quality is not as pertinent, use a JPEG. These images are easily compressible and still hold quality. You have to determine what the tradeoff between file size and quality will be. Once you pick your format, you can add JPEG XR or WebP format to your file. That way you can reach all platforms.
- Alt Tags. These serve as a text description of an image when it doesn’t load properly. Also, you can see an alt tag if you hover your mouse over a picture. The alt tag proves a short, accurate description not only to the user but also to search engine crawlers. So it is possible to see some SEO gain out of this. Alt tags also help your image show up in Google Image Search results. When creating alt tags, be sure to use simple language. Name it just like you would a Word document. Also, do not keyword stuff the tag or put it on non-relevant images.
- Testing. After you go through the optimization process, test your pages. Check the load times, how images look, and so on. You are going to want to make sure everything you did works for your webpage.
Image optimization is extremely important to your websites performance. Following these steps will help you get through parts of the process. If you have any questions or comments, please contact us.