WordPress Image Sizes

Images on your website improve your user’s experience. They bring your products, your services, and your story to life. Images add visual appeal, especially in a time when reading huge blocks of text just doesn’t happen.

Images can illustrate the point of your text. And they can make the whole experience more “real” for your readers. It’s like visual evidence for what you’re saying to them.

They can even increase your SEO when you use file names and alt tags correctly. That’s a lot of mileage for your digital money.

BUT—and you knew a but was coming, didn’t you?—if they’re the wrong size or wrong format, those images can drive your users away, and stop your website dead in its digital tracks. I’m Eric Espinosa, Lead Support Manager at Lifted Logic, and let’s talk about the best WordPress image sizes for your website. 

The Image Formats WordPress Loves

At Lifted Logic, we design all our websites in WordPress, and WordPress has 2 favorite image formats: JPG and PNG.

JPG

JPG stands for “Joint Photographics Experts Group.” The group created the compression standard in 1992, and it became the most used photographic compression format in the world. With 4.7 billion or more pictures taken every day (yeah, 4.7 billion per day), that’s a lot of JPGs.

Why is the JPG format so popular?

• It efficiently stores high-quality digital images. 
• JPG is highly compatible with most applications.
• JPGs can load quickly.
• It allows a full color spectrum.

However, the JPG format does have some drawbacks.

• Lossy at higher compression.
• Can’t do animations or transparencies.
• Doesn’t layer.

The universal usage and compatibility of JPGs outweigh the drawbacks when it comes to static images on WordPress websites.

PNG

PNG stands for “Portable Network Graphic.” It’s an open source format, used to create uncompressed, lossless raster images. Similar to GIF images, PNGs can display transparent backgrounds, useful for overlaying images without having to turn them into a single image. This is pretty awesome for web pages.

PNGs can also contain 24bit RGB color palettes and even grayscale images. They work with practically any graphic/image program or web browser.

PNGs work really well for graphics, making high-quality screenshots, illustrations, icons, and buttons. Unfortunately, for photographics, PNGs end up being large files. You’ll see in a moment why that’s a bad thing.

Image Files WordPress Won’t Play With

If you want the best WordPress image sizes, you’ll want to avoid these image formats, simply because WordPress won’t let you use ’em.

SVG

SVG stands for “Scalable Vector Graphics,” which is a web-friendly type of vector file format. Vector files create images differently than JPG/PNG formats.

JPG/PNG formats create raster files, which are pixel based. Vector files store images based on mathematical formulas. It creates points and lines on a grid, and translates this data into images. 

What makes an SVG good? You can change the size of an image and lose nothing—hence the “scalable” name. For print purposes, you can make an image into a button to wear on a backpack, or use the same image to make a billboard next to a freeway, and lose nothing in the image quality scaling up or down.

Why doesn’t WordPress show SVG files love?

SVG files are XML files at heart, and because of that can include embedded CSS and JavaScript code. Most web browsers automatically run embedded JavaScript, so if the image has malicious code—your users are off to the virus races. 

This could eventually make Google, deservedly, block your website.

ICO

This kind of image format file contains small computer icon images. It’s mostly a Windows kind of thing, for multiple favicons, etc. WordPress is not a fan, and refuses it.

Can I never use SVG/ICO files with WordPress?

Nope. Except… When you use a WordPress Plugin that allows you to use them, or you’re willing to take the risk and do some serious coding on your own. We prefer to go native with our files at Lifted Logic, so we’ll stick with JPGs & PNGs. But you do you. 

DPI/PPI/Why Oh Why

In print, more DPI is better, right? So on the web, more PPI (pixels per inch) has got to be better.

Yes…and no. Big time no. Here’s why.

Monitor Resolution

Wrap your noodle around this: your display doesn’t care what the DPI/PPI is. Not at all. The screen resolution decides the number of pixels displayed, which is two dimensional- such as 1024/768, 1920×1080, etc. 

So the number of pixels per inch doesn’t matter, it’s the width & height of the image that are important. So if your image is 1000 x 667, it can show up fabulously in realistic sizes on the monitor. So uploading pics with 300dpi doesn’t matter for how they display on the screen.

And for mobile access, the screen size is even smaller. You can scale up, but the fact is smaller is better.

The real benefit to smaller file sizes: download speeds!

For the functionality of your website, you’ll want smaller files that load faster. An image-heavy website will be super slow when huge files have to make their way into browsers for display. Ugh. Sometimes your website might even time out if there are just too many large images, such as in a portfolio page.

For speed sake, 72 to 96 DPI/PPI works great. So maybe make your original files as large as you want, and then create smaller web-only files which you upload to your site. 

Side benefit to smaller image files

Smaller image files also mean smaller storage space requirements at your hosting service. That fact can translate to a lower hosting cost. Don’t tell my bosses I told you that.

How to Optimize JPG/PNG Image Files

You want the best WordPress image sizes for your website. But if you don’t feel like messing with image file manipulation, plugins can help you make sure your pics and graphics are up to snuff (Smush, Optimus, EWWW Optimizer to name a few).

However, if you’re more DIY for your PPI, here are some tips:

1. Keep the file size at 300kb or below.
2. Consider resizing the longest side of your image to 1000 pixels.
3. Optimize the files at 72PPI, or 96PPI. 
4. Use keywords in the image name.
5. Add keywords to your alt tags.

Not a Photoshop wiz, or don’t use a Mac for easy-peasy image format changing? There are online sources that can help you such as TinyPNG, or TinyJPG.

Note: making it 72dpi vs 72dpcm actually makes the file even smaller without affecting the visual quality. 

What’s the container size for your image?

Your website probably has a specific size for the image that goes on the page. If you know the space of the container for your image, scale the image size to that.

For example: if the image is 800×800, but the image container size is 400×400, your browser is still trying to load all those pixels in the 800×800, but will only display the smaller amount. Don’t waste the browser time.

Choose the file type based on the image.

Is the image a screenshot or illustration? Make it a PNG. Is the image a photograph? Make it a JPG. And don’t put words onto a photo. It doesn’t work well with screen resolution changes.

Final Suggestions

Now that you know best WordPress image sizes and formats, keep in mind that for most sites, users aren’t really there for the aesthetic experience. Well, unless images are your business. Otherwise, people visit to order products/services or attain knowledge, so info is more important than pictures.

Consider a restaurant’s website. You’d think pictures of the food would be super-important, but the fact is the visitors more frequently look at the ingredients in the menu items. Pictures are powerful, but content is king. The user’s intent rules first and foremost.  The rest is digital gravy.

We can help!

At Lifted Logic, we teach, we learn, we grow together. Want to know more about images? Send us your questions. We can look at your website, and come up with solutions. It’s kind of our dealio: making the web a better place for everyone.

And if you want to start over, we can build your website from the ground up. Just let us know how we can help!

Contact Us