REDUCE PAGE LOAD TIMES BY TAKING CARE OF YOUR IMAGE DIMENSIONS AND FILE SIZE. Here’s how to compress .jpg images.
Webpages loading slowly? Images looking distorted on Social Media? Large Image files and dimensions could be the culprit. Compress .jpg images and see the difference.
Reducing image dimensions and compressing image data is a game changer when it comes to page speed.
If your images are too large, they will take too long to load. If an image takes to long to load, visitors will loose interest and click away. If visitors click away too often, Google will notice and devalue your page.
You may have noticed on some websites the content will load much more quickly than the image. Ideally, we want them to load at the same time. [ Or close enough! ]
First, make sure your image dimensions are at the recommended size for their placement. Standard WordPress Dimensions are;
- Thumbnail: 150px width by 150px height
- Medium size: up to 300px width and height
- Large size: up to 1024px width and height
- Featured image: 1200px width by 600px height
- Opturlo recommendation for large slider size: 2000px with by 1200px height
Secondly, aim for each image size to be less than 99kb. For featured images, headers and sliders with larger dimensions, aim for each image size to be less than 150kb. The smaller the better so have a play with the compression range.
.png [ png-24 ] is the best image file type to use for your favicon and logo. It allows for a transparent background and retains a crisp clear image. The trade off is a larger file size, however, the dimension sizes for most logos are small, so this is not going to be an issue. You want favicon and logo quality to be spot on here so .png is the best bet.
.png-8 is a good option to combat file size, however colour range is limited so if you are using a complex colour scheme in your logo, it could impact quality.
.jpg is the best image file type to use for your web and social media channels. Particularly for photographs, always use .jpg. because this format can handle a wide colour range. Even with 50% compression applied, the image will still look sharp enough with out affecting page loads. The image used in this post has had 30% compression applied.
This is how to compress .jpg images:
- Make sure your image dimensions match their placement recommendation.
- Go to https://kraken.io/web-interface
- Make sure the following buttons are selected: File uploader > Expert > Then type 50 into the .jpg quality (1-100) box
- Click on the box at the bottom of the webapp that says ‘Click to upload or drag-and-drop your images here.
- Select your image that you just saved from Canva or other image editor.
- Kraken will compress it. Aim for a size less than 99kb. Smaller the better.
- Go ahead and download it.
- That compressed file will be in your downloads folder ready to be imported into WordPress, WIX, Squarespace or which ever web builder suits you.
To find out how much images are effecting page speed, head over to https://gtmetrix.com/ for an audit.