We all love a website that’s fast to load. Those photos you took on your iPhone look stunning however if you load them directly into your blog you are going to kiss that sweet page load time goodbye. There are so many different sizes and formats, it’s easy to get confused with what to do next.
Modern websites make use of larger screen sizes, and denser screens in smaller devices. You also want to be sure your images aren’t too small that they appear stretched and pixelated when spread across the header of your website.
A good rule of thumb is to ensure your large images are in the horizontal aspect and resize them to 1280 pixels wide x 720 pixels tall, in RGB format at 72 dpi. If you export your image as a JPEG around 75% quality, you’ll get a pretty small file size and still decent picture quality. Your image should now look good and load fast on any device.
There are some cases where you may need an image larger than this. If your WordPress site has large header images that stretch the full width of the screen, you may find they’re cut-off on really large desktop monitors. In that case, I resize them to full size of a HD widescreen TV, that is, 1920 pixels wide x 1080 pixels tall.
There are many ways to resize an image, I prefer the more advanced Adobe Photoshop myself as I use it everyday.
You could also use an online service which means no extra software. Many people I talk to are loving Canva, a lighter online option for optimising your images is Image Compressor.
If your original images are any smaller than the recommended sizes to begin with, you shouldn’t need to resize them, providing they are only a few hundred KB in size. WordPress does a pretty good job of resizing and optimising your images when you upload them, providing they’re not gigantic to start with.
