Before you upload an image to your media library, be sure that the image is web-ready. What does this mean? There are a few factors involved:
- Image size – your image, in most cases, will be no wider than the width of your layout. The exception to this is if you have an image that you want to display at the entire width of the screen (outside of the bounds of your layout or container). So if your container width is 960 pixels (the standard width for a website), then you can size your images to 960 pixels wide or less. When you upload your image to your WordPress media library, WordPress will auto-generate multiple sized versions of your image and give you those size options to choose from. See the video tutorial at the bottom of this post for detailed guidance with using the WordPress media library.
- Image quality – make sure the resolution of your image is at or around 300 dpi (dots per square inch) to ensure your images display well on all types of displays, including the modern retina displays.
- Image format – save your image as a .png or .gif for an image that has some parts of it that are transparent (that means that whatever is behind the image on the page will show through). Use the .jpg format for a solid image without transparency.
This video tutorial will take you through the basics of using your WordPress media libary:
And this video will show you how to add your web-ready images to pages and/or posts:
And lastly, this article from the WordPress.org codex shows you how to make a simple image gallery without using a plugin:
https://codex.wordpress.org/The_WordPress_Gallery
Jetpack’s Carousel feature can turn your native WordPress gallery into a nice full-screen slideshow.
This tutorial is part of a series of e-courses created by Cat Scholz to empower you with using the self-hosted version of WordPress to achieve your internet marketing goals. Get more information and/or sign up:
Checkout Level 1 (free)
Checkout Level 2 (on sale)
Checkout Level 3 (on sale)