Add images to your site
Image selection is critically important for your website. It impacts not only design, but your page load time — which can damper your site user’s experience as well as negatively affect SEO.
It may be tempting to fill your website with as many big and beautiful photographs as you can find, but a thoughtlessly placed and poorly optimized image can be off-brand at best, and slow down your site at worst. We’ve created this guide so you can begin to carefully consider and plan how you will use images on your website.
Finding the right images for your site
Even just a few years ago, stock photography choices were dismal and limiting. Now you can find beautiful and professional looking photos for free. Keep in mind that you always need to read the license and terms before you use any images on your own website. Some of our favorite sources include Unsplash and Death To Stock.
Sizing your images
Make’s responsive design should be taken into consideration when choosing images for your site. That said, the multitude of ways you can combine the builder sections makes creating a cut and dry image size guide tricky.
Consider this: a three-column Content section you place on your page will display in a single row on tablets and mobile devices. When you add images to those columns, on a desktop monitor, they may display smaller (in three columns), but on an iPad, they display larger (and in a single column).
We’d like to offer three super-simple guidelines for you to create your own site guide.
- Based on current display resolution stats, site and section background images, as well as full-width Banner section slides should be at least 1440px wide.
- If you’re placing an image in a single column Content or Gallery section, that image should be 960px wide.
- All images in Columns and Gallery sections (with two or more columns) should be at least 800px wide. This is generally the largest, non-Retina size that Make and Make Builder will display.
Your images can be any height you wish, but it typically makes for a cleaner, more professional design when they are sized with consistency.
Editing and optimizing your images
WordPress is good for lots of things—editing images is not one of them.
While technically you can rotate, scale, and crop your images using the editor in the Media Library, you’ll have more control and better results if you invest the time or money into learning some basic photo editing software. Photoshop is a good choice if you’ll be editing images regularly, but a free, online app like Pixlr will also work.
Image optimization is also critical. Using optimized images can significantly increase your site speed — and who doesn’t want a faster site?
Saving your images correctly before you upload them is part of the battle. WPBeginner.com has a great tutorial on optimizing images that goes over the basics and offers some insight on free tools available to help. You can also use a plugin like Compress JPG & PNG images, or a web app like Kraken to optimize images for your site after the fact.