WordPress makes it easy to upload and place images into your website, but there are some simple guidelines that will help keep your images looking great, and your WordPress website running well. Read below for a quick rundown of our recommendations, as well as some explanations for common issues.
What happens when images get uploaded in WordPress
Whenever an image is uploaded into your WordPress website media gallery, the site will generate additional sizes of this image that can be used throughout the site. Default sizes include “thumbnail,” “medium,” and “large” image sizes. These images are typically sized 150x150px, 300x300px, and 1024x1024px, respectively.
Your site may also utilize additional custom image sizes; for example, a large “hero” image of 1920×1280 pixels may be added to your site. (A hero is an image typically used at the top of your web page that’s large and extends full-width.)
A note about image dimensions
WordPress websites will only generate alternate images that are smaller than your original upload. In order for all image sizes to be generated, the uploaded original image needs to be at least as wide and tall as 1024x1024px. So if you upload a 75×75 pixel image, no alternate sizes will be generated, because that original is smaller than all of the standard sizes noted above.
Ideal image dimensions for WordPress websites
If you upload a small image into a location on your site that calls for a larger version—for example, a featured “hero” image—the image will either not appear, or it will appear blurry and pixelated. For this reason, we recommend uploading images that are as large as possible, but not more than 2560 pixels wide or tall. WordPress websites will not generate additional sizes for images that are larger than 2560px wide or tall.
How to create ideal file sizes
Not only do the dimensions of your image matter, but so does the size. Large images may look nice on your website once they load, but they can slow down your page load times dramatically. We strongly suggest optimizing your images using photo editing software like Adobe Photoshop, Squoosh, or a similar online optimization tool. Keep your images under 300-400k for large images, and considerably smaller for simpler images, logos, and illustrations. Make the file sizes as small as you can without noticing substantial image quality degradation.
What file types does WordPress support?
There are lots of image file types out there, with more coming onto the scene every year. Generally speaking, JPG and WebP are your go-to formats for photos and illustrations that don’t require transparency, and when you do need a transparent background, PNG and WebP work well. SVGs are great for logos and simple illustrations because they stay crisp at any size, though keep in mind that WordPress blocks SVG uploads by default for security reasons, so you’ll need a plugin like Safe SVG to use them. GIFs still work for simple animations and limited-color graphics, but a short video file or animated WebP will usually give you smaller file sizes and better quality. As for PDFs, save those for downloadable documents—they should never be used to display images on a website.
Image file types that are NOT supported by WordPress by default include .tif, .eps, .ai, .bmp, .psd, and .pages, to name a few.
Common Image Issues
My image appears blurry on the site.
This is typically caused by uploading a small or poor quality original image and then making it larger than its original size. With the exception of SVGs, scaling an image above its original size will degrade its clarity.
I get an error when uploading an image into my media library.
This typically happens when an image is either too large, or in a file format that is not allowed on your site. Try downsizing and/or optimizing your image.
My SVG shows up in my media library but isn’t showing up on my page when placed.
This may be caused by having no dimensions added to the SVG, to fix, adding an image size in the WordPress admin screen should solve this issue.
I get an error message when I upload an SVG.
Older WordPress websites may not allow SVGs. Ask us if you need help uploading an SVG file.
Most of the images in my photo gallery/archive page are of the same shape, but a few are different.
This happens when an image doesn’t meet the minimum dimension requirements for a particular page on the site. To solve this problem, upload an image that is at least as large as is required. Check with your web developer for minimum dimensions, as every site is different.
My image has a white background and I want it to be transparent.
In order to have a transparent background on an image it will need to be a PNG, SVG, or GIF file that is created properly with a transparent background. JPGs always have a background color, usually white.
Need additional help with your website images? Contact us today to talk about our web design and development services. We’d love to chat with you about what a WordPress website can do!
