We understand that the real estate of your website is valuable, and that you want to allot the best space for the best content. Images are some of the clearest ways to market your products or business, but they can carry some heavy weight to them. We have a few tips that can help you use high-quality images without sacrificing the performance of your website.
Reducing the size of your webpage
Some of the largest files on your webpage will be the images. With better image compression, you will be creating fewer bytes for the browser to download and thus a faster load time for you. We all want high-quality images, but we need to ensure that they are optimized for viewing on desktop and mobile devices alike. One of the simplest ways to achieve this is by accessing image compression software, many of which are available online. Mashable put together a list of 18 image compressors, but we will name a couple here.
JPEGMini can help you reduce file size by up to 5 times while still keeping the original quality. This application has a very intuitive UI, allowing you to drag and drop images into the app for automatic compression. There is a limited free version, but you can take full advantage of it with the premium edition.
Another choice is Smush.it, which comes from the Yahoo! Developer Network. It employs lossless compression, so the file size is reduced without losing visual quality. It should be noted, however, that it will only accept maximum file sizes of 1 MB. Programs like these are easy to use and can be accessed by just about anybody, regardless of web development or image manipulation experience!
Image format matters
One of the most popular formats for images on the web is JPEG, but digital artists and retouchers stay away from this for a variety of reasons. Despite its lack of popularity in the image manipulation community, it may be the best choice for your website. Before we get into that, however, let’s talk about some of your other options.
- GIF – GIF should really only be used when animation is needed. It can be great for tutorials and showing how to navigate a webpage, but the color palette is relatively small at 256. That being said, if you want to add a quick, repetitive animation to your page, a GIF is the way to go.
- PNG – PNG will compress the image at no loss, but that means you will generally end up with a bigger file size. This will make for a great high-quality image, but if compression is what you’re looking for this also isn’t a great choice. Use this format sparingly, and only when you really want to make an image pop on a page.
- JPEG – The JPEG format, by definition, is already compressed, and you can compress it even more with some of the applications mentioned above. By combining the two you will have some loss in image quality, so be sure to look over the image thoroughly to see how it looks on the webpage before releasing it to the public. Despite the loss of quality, however, JPEG remains one of your best choices.
- WebP – Google created this image format back in 2010, but don’t feel bad if you haven’t heard of it. It is able to compress files to be smaller than JPEGs while still maintaining high quality. The big setback, though, is that many browsers do not yet support WebP. Chrome and Opera support it natively, but so far, Firefox and Internet Explorer do not.
Keep in mind that some CDNs provide image optimization as a service. If you are using a CDN for your website, it could be helpful to look into what services they might provide.
Limit pixel saturation
Always choosing an image that has as many pixels as possible is like if John Steinbeck submitted The Grapes of Wrath to every literary competition in his lifetime. In some cases, maybe even most, it would do quite well; but the parameters of what you are trying to accomplish need to be considered, and then a calculated approach made.
To get the best performance, you want to optimize the number of bytes in the image as well as the number of pixels. Figure out how many pixels you need to display the image at the desired quality in the browser, and go from there. In many cases, the browser will downscale the image to an appropriate pixel size anyways. You can help avoid this step by hovering over the image in Chrome DevTools. It will show you the natural size (what you uploaded) and the display size (how it will appear on the page). Any differentiation between the two sizes is extra work that the browser has to put in, adding load time to your site.
Performance affects revenue, reliability, and reputation
Optimizing your images is one vital step on the path to great website performance. Your speed affects your Google ranking, how many visitors view your website, and ultimately how much revenue you do. We touched on a few examples here, but this is such an important topic that Google developers themselves dedicated a page to image optimization.
Are you unsure of how your online presence is affecting your end users? Do you know how every aspect of your website is performing? Don’t leave anything to chance. Monitor your website performance 24/7 with Uptrends. You can start today with a 30-day free trial!
Leave a Reply