WordPress Images Formats
Before we get into discussing WordPress image sizes, it’s important to know about formats.
The two most common image formats used on online are JPEG and PNG.
Because of its smaller file size and high quality for photos and images with lots of colors, JPEG is the preferred format in the majority of cases.
PNG works better with limited color images such as icon graphics and line drawings.
Choosing the right format for your image matters because it affects the quality of the image and speed of your site.
Picking the Right Image Format
The basic rule for choosing the right format is JPEG for photos, PNG for graphics.
Nice and simple.
If your image is packed with colors and has different textures and gradients, save it as a JPEG. If it’s a logo, text or has flat colors, save it as a PNG.
What happens if you choose the wrong format?
To the naked eye, nothing much. You can save a photo as a PNG or a graphic as a JPEG and not be able to tell the difference.
It’s when compression is used that problems start to arise.
The Importance of Image Compression
Every image that you upload to your website should be compressed to reduce its overall size without affecting its quality. If it isn’t it will harm the speed of your website, which impacts user experience and causes frustrated visitors to abandon your web page.
When a user visits your site, their device has to download images so that they’re visible. The larger the file size, the longer it takes for an image file to download, slowing your entire website down.
According to Neil Patel, 47% of people expect your website to load in less than 2 seconds. And 40% will abandon it if it takes longer than 3 seconds. Speed is also important to SEO. Google uses loading times as a factor when ranking pages in its search engine. The slower the page, the poorer it will perform in search results.
Image compression finds the balance between file size and quality to improve user experience.
Now, if you compress the same photo as a JPEG and as a PNG, the quality isn’t likely to be that noticeable. You’ll maybe spot a bit of graininess up close on the PNG, but nothing that would put you off using it. However, the JPEG will be considerably smaller in size than the PNG. So you go with the JPEG.
If you compress the same graphic as a JPEG and PNG, the quality is noticeable. The JPEG will be the smaller file in size, but the PNG will be the much sharper image. That’s because JPEG compression works well for photos but not for graphics. As you can see:
Compress every image. Photos as JPEGs, graphics as PNGs.
WordPress Image Sizes Explained
The size of your image in pixels is every bit as important as its file size.
Design matters as much as speed when it comes to user experience. If the image size isn’t right it will either by blurry and pixelated, throw other elements on the page out of line, or cause unnecessary sideways scrolling.
Fortunately, WordPress has a way of processing images to prevent such problems.
How WordPress Processes Images
Whenever you upload a new image, WordPress generates three additional versions of it in different sizes: thumbnail, medium, and large. Your original image remains as a full-size option.
The reason it does this is to a) to make your life easier so you don’t have to keep resizing images manually, and b) to ensure the most optimal image is available for different locations.
For example, the image used in a blog post thumbnail on your homepage will be smaller than the image needed for the blog post header.
WordPress Image Dimensions
The predetermined image sizes that WordPress uses 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)
Changing WordPress Default Image Sizes
The image sizes that WordPress creates aren’t set in stone. If the default settings don’t fit with what you need, you can easily edit the dimensions.
- Navigate to your WordPress admin dashboard
- Go to Settings - Media
- In Media Settings, edit the width and height dimensions to suit your values
- Click Save Changes to confirm
Changing Default Images Sizes in Visual Composer
To keep things simple, Visual Composer uses the default WordPress media image sizes in content elements that use images. Editing the default sizes from your Media Settings will also change them in the Website Builder, so you’ve no need to mess around with code.
One perk of using Visual Composer is the smart image optimization functionality. If you customize your image to a random size, Visual Composer will resize it using PHP instead of just downscaling it. This helps you keep your file sizes smaller.
Background images that aren’t related to content elements like feature descriptions can be edited in Design Options. From here, you customize your image, upload multiple images, choose different background types, and reposition an image to suit your design. Check out this guide on how to move a background image.
The fact that our themes are responsive means that the image sizes you do choose will automatically resize to suit the device being used to view your website. You can instantly check your site layout on the most popular device types in desktop, tablet landscape, and portrait, and mobile landscape and portrait so you don’t need to worry about running into design issues when your site is live.
Recommended Image Sizes for WordPress Content
If you decide that the image sizes WordPress automatically generates when uploading new media don’t fit with what you need, here are some recommended sizes for content to look at its best on any device.
- Blog posts: 1200 x 630px
- Hero images (full screen images): 2880 x 1500px
- Landscape feature image: 900 x 1200px
- Portrait feature image: 1200 x 900
- Fullscreen slideshow: 2800 x 1500px
- Gallery images: 1500px x auto width
Adding Custom WordPress Image Sizes
The three default WordPress image sizes will cover you in most situations, but what happens if you need custom images for, say, a new widget you’ve added to your site?
In this case, you’ll need to add your own custom image sizes, which means editing the code of your site.
Note: Whenever you’re editing the code of your website, create a backup file and child theme first.
You can add custom image sizes to your website’s code in two steps.
Step 1
- From your WordPress dashboard, go to Appearance - Editor and edit the functions.php file.
- Copy the following code and paste it into the file.
add_theme_support( 'your-image');
Replace ‘your-image’ with whatever custom image you want to add. For example, ‘post-thumbnails’ or ‘pop-up-banners’
- Click Save and the add_image-size () function will be enabled.
- Add your custom images and sizes using this format:
add_image_size( 'post-thumbnail size', 800, 350 );
You can change ‘post-thumbnail’ to whichever image you want to add. The numbers 800 and 350 in this example are the height and the width of your image respectively. Edit them to suit.
Step 2
Once you’ve added the new image sizes, the next step is to get them to display in your theme. This involves adding some code to the post loop where you want to show your file.
Copy and paste the following code into your theme file before the end of the loop:
the_post_thumbnail( 'your-image-size' );
Replace ‘your-image-size’ for your image — e.g. ‘post-thumbnail-size’. When that’s done, you’ll see your image size listed as an option when you upload new images to your media library.
Step 3
Unfortunately, the addition of the code doesn’t alter existing images. To update those so that they match your new dimensions, you’ll need help from a plugin. And WordPress certainly has no shortage of those.
The best one for this job is Regenerate Thumbnails. It’s free and takes care of all the heavy lifting.
- From your WordPress dashboard go to Plugins - Add New and search for ‘Regenerate Thumbnails’. The one you’re looking for is by Alex Mills.
- Install and activate the plugin
- Go to Tools - Regen. Thumbnails and click Regenerate Thumbnails
That’s it. All of your existing images will be automatically resized to match newly uploaded ones.
WordPress Image Size Plugins
As Visual Composer is a plugin that you add to WordPress to design a custom website, you’re free to install other plugins to run alongside it. Just like you would if you were using a default WordPress theme.
We’ve already spoken about Regenerate Thumbnails, but here are some we’d recommend for compressing images to improve site speed and performance.
- Imagify by WP Rocket offer three levels of image compression — Normal, Aggressive, and Ultra — to reduce the size of images without losing quality (Aggressive offers the best balance of compression and quality). It also lets you store original images in a separate folder — handy if anything goes wrong.
- ShortPixel is a simple to use plugin that lets you compress images with minimum fuss. If you’re a photographer or use high-quality imagery for your products or services, the plugin’s glossy feature delivers compression with no risk of compromising quality.
- Resize Image After Upload is made by the team behind ShortPixel and designed to let you easily change image sizes for uploaded media. You can set the height and width to suit and choose to compress the image at the same time. The plugin only works on newly uploaded images, but it can save time going back and forth to the WordPress settings.
- Compress JPEG & PNG Images by TinyPNG (one of the best web tools for image compression) is simple to use and ready to go out of the box. You can upload images for compression individually or set the plugin to automatically compress, so you don’t have to worry about large files making their way onto your site.
- Imsanity by Exactly WWW automatically resizes bulk image uploads so that they’re at the optimal size for a browser. You can select sizes for images uploaded to pages and posts, images uploaded to the Media Library, and images uploaded to headers, backgrounds, logos, and widgets. You can also convert images from BMP and PNG to JPEG and select image quality settings. If you rely heavily on media and upload multiple images a week, Imsanity will save you a ton of time.
Wrap Up
For most tasks in building and editing your website, WordPress default image sizes will meet your needs. If the design of your site requires different image sizes, use the info in this post to change the dimensions in Media Settings and your site’s code. Regardless of image size or how many times you edit settings, Visual Composer will work seamlessly with your choices, allowing you to easily drag-and-drop images into your content.
