You’ve just launched your new website and optimized everything, including your custom image sizes, only to discover two weeks later that your page speed is subpar. You go to the website and discover that the images are huge. It’s not easy to deal with the current environment of high-resolution images from DSLRs, phones, and retina displays. However, in this post, we will go over a few very simple things you can do to avoid some of these issues.
Before you begin building your website, consult with your designer to ensure that all images in the design adhere to a standard image aspect ratio. Image cropping should not be an issue if your custom image sizes are set appropriately. The standard camera aspect ratios are 3:2, 4:3, and 16:9.
The 3 most important image file formats for most website owners are JPEG, PNG, and GIF. Choosing the right file type is critical for image optimization. To keep things simple, use JPEGs for photos or images with a lot of colors, PNGs for simple images or when you need transparent images, and GIFs for animated images only.
The next step to consider is image compression, which is extremely important for image optimization. Image compression is available in a variety of types and levels. Depending on the image compression tool you use, the settings for each will differ. The majority of image editing tools, such as Adobe Photoshop, GIMP, Affinity Photo, and others, include image compression features. You can also save images normally and then compress them using a web tool such as TinyPNG or JPEG Mini.
Furthermore, when you import a photo from your phone or digital camera, the resolution and file dimensions are extremely high. These photos typically have a resolution of 300 DPI and dimensions ranging from 2000 pixels and up. These high-quality images are ideal for print or desktop publishing, but they are not appropriate for use on websites. Image file size can be significantly reduced by decreasing file dimensions to something more reasonable. You can easily resize images on your computer by using an image editing tool.
Caching is another technique used to serve content quickly by storing image files in a proxy server or a browser cache. Browser-side caching can help in the reduction of application requests as well as the download side of each cached page.
Another possibility is to use a Content Delivery Network (CDN). A CDN can deliver your images to users in close proximity to their physical location. The closer the server, the faster the response time.
If you aren’t already saving web-optimized images, you should start now. It will make a significant difference in your site’s speed, and your users will appreciate it. Not to mention that faster websites are better for SEO, and you will most likely see an improvement in your search engine rankings.
