Compressing all my beautiful Content Images
I spoke before about the importance of managing , optimizing and compressing Images used on your website.
You need to keep them from slowing your sites performance.
- Make sure the originals are reduced in both file size and image dimensions.
- The maximum dimensions should be no bigger than how they will render on your site.
- Every Theme template in WordPress has defaults for images.
- This includes the maximum dimensions they can appear in any page template.
- This is calculated for both Desktop and mobile device viewing.
- Once you settle on a Theme for your site, try to find out what those sizes are.
- Knowing the maximum widths allows you to keep your uploads to a sensible or optimum size.
By default, WordPress Core offers predetermined image sizes, that are used in places such as featured image in posts.
WordPress default image sizes are:
- Thumbnail size (150px square);
- Medium size (maximum 300px width and height);
- Large size (maximum 1024px width and height);
- Full size (full/original image size you uploaded).
So that gives us a starting point. It tells us WordPress considers 1024px to be a Large Size.
It gets us in the right headspace for using images on the web.
When running speed tests on my site, I often see a recommendation to reduce the site Header image width.
The Header image on most sites is the widest of all images. It usually spans an area wider than the actual content area below it.
Because it is alway loaded on the landing page it deserves thoughtful compressing and sizing.
My image is 1024px width yet it usually displays in a browser at 959px width.
The speed test is telling me to save some load time by reducing the redundant image width to match the browser.
This argument indicates that even at 1024px we should be able to go smaller on