A mix of factors, including design, development, network architecture, and the end-connection user’s speed, determine how quickly or slowly a website loads. Many of these, particularly the final one, will be beyond your control.
We noted that the home page file size was over 1.7MB when we revisited the website, established earlier this year. For a web page, that’s an absurdly large (but regrettably frequent) file size. We ran across similar challenges with enormous graphic page banners, another recent higher-ed initiative. This is excruciatingly difficult for individuals using a sluggish connection or a cell network to visit the site. All of the work that creates a responsive, fluid-width site that looks great on small devices is for naught if the user abandons the page before it finishes loading.
Small images make it easy to browse the website for the user with poor internet speed
Although it may not be a problem that directly affects you or me as we sit at our desks planning, building, or administering websites, we must keep in mind that the context in which we use the sites does not always match the context in which the people who use them do. Many people in cities and worldwide do not have access to the internet at home and must rely on poor mobile connections to get online. Undoubtedly, many of your mobile users use high-speed internet; what about those who try to load your site via poor-quality public Wi-Fi, such as coffee shops, libraries, and airports?
Image compression is not only one factor to consider when discussing page performance; many other things can be done to speed up load times.
Image compression can improve a website’s load times
The web page was largely comprised of a randomly loaded transparent PNG file—one, in particular, weighing in at 1.6MB. There are free web-based picture compression programs available that can significantly reduce the size of image files. With the minimal discernible difference in image quality, that 1.6MB image might be reduced to 230K. The load time was reduced by approximately 85% due to this.
Compress images before uploading to whatever Content Management System you’re using as part of your content migration/entry cycle. Unfortunately, most CMSs, including business CMSs, do not have image compression. Photoshop has failed to achieve the same compression level as the better compression programs despite its Save for Web compression settings.
It’s wonderful if your pages are around 200 or 300K. If you can keep graphically intensive pages under 600K, that’s what you should aim for. There isn’t a magic number, so try to keep the page size as little as possible. If your photos have previously been compressed, you may be just loading too many image files. Setting performance budgets for pages is an excellent approach to putting this notion into practice. You can specify a target goal for page weight and limit it by setting a budget.
-
Use CSS Sprites
The CSS sprites approach merges several pictures into a single image to improve page speed and save HTTP requests. This is great for icons, logos, and other visual elements on your page multiple times. See “How CSS Sprites Improve Speed and Sustainability for additional detail on this method.”
-
Choose the Right File Type
When you produce an image and save it, it undergoes compression, which reduces the size of the file. Different file types demand different ways when it comes to lowering file size. Choosing the right file format for a given image will usually result in lesser file size.
• For images and illustrations with a lot of shading, use JPEGs; use GIF or SVG for line art, graphics, and text. Keep in mind that site spiders and assistive equipment, such as screen readers for individuals with impairments will not be able to see the type embedded in an image. Use type in this manner just for ornamental purposes.
• A PNG is frequently the best file type for images that require partial transparency while preserving some of the clarity of a JPG, such as a company logo.
-
In Photoshop, experiment with image quality.
We’ve chosen a JPEG file type for a shot of bikers on Climate Ride in the example below. You can change the JPEG quality after selecting a file type for an image. You’re looking for the shortest file size in the correct file format that looks good.
You can use a different type of variation with resolution and make your image attractive.
