The MONSTER GUIDE to WordPress Image Optimization

I’ll show you how to optimize your website images, so they look good AND LOAD FAST!

Most important of all, we are doing this to improve USER EXPERIENCE, not PAGE SCORES (Pingdom, GTmetrix), ok??? And we’re gonna optimize everything.

• Images, icons, bars and color-ey things. (Every visual element, really.)
• Image-sizing (dimension, storage), device-sizing (desktop, tablet, mobile, retina), focal point control.
• SEO and accessibility – tags, captions, social media compatibility.
• Formats and quality – jpeg, png, webp, svg.
• Browser caching and CDN.
  Image display – regular display vs slideshow, thumbnail management, animations and filters, code efficiency.

Like I said, everything! So set some time aside and let’s get to it! Have a developer handy too if you aren’t such a pro at it.

I’ll unload all my tactics on you, from easiest to hardest. 🙂

1. BASICS – (Formats, Dimensions, Aspect Ratios)

Common image formats (for websites):

• JPEG – best for photos or images with lots of color. Great quality, range of colors, and small file-size.
• PNG (aka “png-8”) – best for images with low color, sharp lines and contrast, and can also do transparency. Provides sharp details with no compression artifacts, also smaller size.
• PNG 24 – higher quality version of PNG that’s suitable for photos. Unfortunately still a larger file-size than JPEG, so it’s not recommended unless you need transparency and/or trying to upload it to a place that often recompresses images (like Facebook).
• WEBP – new image format by Google that combines the best of JPEG and PNG, allow great quality no matter the type of image and also transparency. Also better compression than JPEG (which means smaller filesize). Was originally only compatible with Google Chrome browser but other browsers have added WebP-compatibility now.
• SVG – typically used for icons only, but can even do simple animations (rare case). Chosen for it’s clarity, no matter how big your resize it, and can also be colored differently via CSS (useful if you reuse it in multiple places throughout your site).
• GIF – most common in low-quality meme animations. Useful when you want to share a video, but don’t need sharpness or sound. GIF is basically an image slideshow format masquerading as low-quality video format. Rarely used in a professional setting like a website, where you typically want high-definition images and videos.

Common device sizes (multiply by 2 for retina):

• Desktop view will be at 1200px wide (mostly).
• Tablet view is probably around 800px wide (mostly). Landscape would be desktop view.
• Mobile view is around 400px wide. Landscape probably 600px.

With media device size in mind, don’t use a bigger image than you have to. For example…if an image is meant to take up only half a desktop screen for example…the image in that place would only need to be 600px wide for regular desktop screen and 1200px wide for retina desktop screen. It would be an absolute waste to load an image at 2000px width when it’s used in only a 300px space!

Common image aspect ratios online:

• Most devices are optimized for media in 3:2 and 16:9 formats.
• Social media profiles favors 1:1 square aspect ratio.

2. SEO & ACCESSIBILITY (tags, captions, social-media friendly)

SEO tips for images:

• Title tags – are internal titles your images (e.g. “Red Table #5”). Many people say there is no SEO benefit for this. This text also shows when you hover your mouse cursor over the image.
• Alt tags – are for screen readers and other devices to see what your image is. Imagine like how a blind person might describe the image (e.g. “red table in bedroom”).
• Captions – are text that usually go beneath or on the side of an image. Can be anything…a personal description, or info about the product/place, or about the photographer, anything, etc.
• I typically make my title tags the same as my alt tags. I don’t really spend the extra time to carefully craft them. Some helpful titles, descriptions or keywords is all you need.

Social-media friendly:

• Make sure your website and all its pages are Facebook Opengraph ready.
• Prepare square images if you want them to look nice for social media.

3. IMAGE COMPRESSION (quality and sizing)

Manual compression:

• Use Photoshop’s Export or Save-to-web feature to manually decide the exact quality and sizing you want.
• Can also use Lightroom or other photo-editing apps as well.
• JPEG’s are typically adjusted by quality. PNG’s are typically adjusted by # of colors, and whether or not there’s transparency.
• You could also use a free online compression tool like on the ShortPixel site or various other sites out there.
• I recommend this for your most important images. Usually the biggest ones that require the best quality.

Automatic compression:

• Install a plugin with image compression features. ShortPixel, LiteSpeed Cache, and WP Compress are my favorites. Let them compress all your images automatically.
• I recommend this method for your less important images. The ones throughout your site and are mainly used only to decorate up your site and not actually looked at so critically.

4. DISPLAY MANAGEMENT

Adaptive images

• This ability makes your website show smaller versions of your images when loaded on smaller devices.
• Your theme should handle this automatically. If not, I’d rather get (or code) a new theme than to try hacking this in with a plugin. I believe WordPress should do this natively now anyways.

REGULAR images vs SLIESHOW images

• Regular images should be clean and sharp.
• Slideshow images can be a little blurrier or lower quality (especially if you have text over them) since they might not be looked at as closely.

ANIMATIONS and FILTER EFFECTS

• If you can, applying image effects with CSS would be cleaner than with JS imo.
• You also probably don’t need much effects! Most people just want to see your content immediately. Imagine how you fast-scroll through things on your phone. The last thing you want is to have to wait for something to load. Nobody likes loading animations!

Thumbnail management

• PLEASE! Have a developer go through your theme settings and get rid of unused thumbnail sizes.
• Many themes, especially those all-in-one super bloated themes will create as many as 20-30 thumbnail sizes even if you only use 3 of them. This makes your media library unnecessarily huge in a short amount of time.
• After getting rid of unnecessary thumbnail sizes, you’ll probably have to use a plugin to regenerate all your image thumbnails.

Code efficiency

• I’m always advocating for clean code. Be careful that when deploying fancy image effects or image-related plugins, that you’re not slowing your site down with a ton of bloat.

Lazy loading

• A tactic of improving page load by delaying your image load.
• I’m not a big fan (I hate lazy loading). I don’t feel it improves UI in any way.

5. STORAGE, CACHING & CDN

Image storage options for large sites

Storage is not only a matter of cost, but also performance. Ideally, you’d want all your images to sit on the same web server so that it looks the quickest. But what happens if your site is gigantic?

1. Increase server size – the easiest and most convenient option but very costly since you’re paying for more CPU and RAM when all you really needed was space.
2. Block storage – if you have a VPS, you can purchase additional block storage which is fast enough for uploading images but still slower than loading from your local drive. Unfortunately, I would have loved for a way to mount the block storage for all images except the ones from the most recent year or month but WordPress doesn’t allow this (natively) so you have no choice but to mount it entirely to the wp-uploads directory.
3. Offload to S3 – S3 is the most common option, since it’s really cheap and simple enough to set up. Caveats are that it’s even slower than block storage. Sure, you can synchronize your S3 buckets to Cloudfront and that would make it a bit faster for sure at higher costs.

Option 1 is common among people who don’t know any better. Option 3 is most common for large sites as it allows limitless growth. Option 2 is rarely used even though it’s technically very simple to implement. Obviously, it’s better if you optimize your images in the first place so you don’t run out of storage (but this can’t help everyone).

Caching images

The common tactic for caching images is “browser caching”. It’s typically done by putting longer expiry times via htaccess rules. What it does is tell the visitors browser to save the image in storage (for a specified time) so it doesn’t have to re-download it again.

A common expiry time would be to have images browser cached anywhere from 1 month to even 1 year. I think that makes sense for older posts. Newer posts, I think should be 1 day tops and the only reason is because we sometimes update our images right after posting. Maybe it was cropped wrong or god forbid, you uploaded the wrong image.

I think the best performance and reasonable use of your user’s device storage is to browser-cache anywhere between 7-30 days. It might also be smart to cache certain image types differently. I typically find that PNG, SVG, FAVICON, typically relate to the theme and branding design and are almost never changed…so those can be cached the longest (up to 1 year).

CDN (content delivery network)

You really only need a CDN if you have many visitors from all around the world. Please read my guide What’s a CDN? (And do you need it?)

If you decide you absolutely want a CDN:

• Start with Cloudflare. Use the free service. If it works well, good! (It works well in most regions and most cases, but isn’t perfect.)
• If Cloudflare isn’t fast enough for you, try BunnyCDN.
• If you need tons of options and/or you have offloaded images in S3, then Amazon Cloudfront would be an easier integration IMO.

6. ICONS

The absolute simplest website can be done without any icons. You could draw your arrows, hamburger menu, and search icon using CSS or inline SVG and call it a day. But what about for the average website which needs social media icons (Facebook, Twitter, etc), or ecommerce icons (basket, cart, bag, etc). There are a few tactics.

• Icon font libraries (Font Awesome) – often used for its convenience and flexibility. Unfortunately, it slows down your website load because it loads every font icon possible (like 3-5k icons, even though you only use 20) and also not only that, but it loads them externally (from external servers instead of your own). The other drawback is that you can’t add your own icons.
• Custom icon fonts (IcoMoon, Fontastic) – these allow you to select/create your own icons. And also handpick only the ones you want. They require more work to set up (especially for non-developers) but offer more flexibility.
• Homemade icon fonts – make it yourself. This is what I like to do. Tiny little icon font that’s only 2kb or so but has all the icons I need. Requires a bit more work but loads the fastest.
• SVG – uses a tiny separate file for each icon. I really don’t recommend this unless you have such few icons and/or plan to have the icon in larger sizes and need more coloring options. You can check out my post on Icon fonts vs SVG’s.

Most of the options here depend on you (or your developer’s) coding skills. And if you don’t know how to code, I highly recommend paying someone to manually create an icon font for you. Sure, it costs money but I think it’s worth it. Way better than loading an entire bloated Font Awesome library on every page load.

7. CSS OPTIMIZATION

I cover a few tactics to using or optimizing CSS to show your images or graphical elements in a better way, or to save space and improve load times.

• Colors – older themes used to use little PNG images for every color element throughout the theme. Newer themes now use CSS to draw color elements. Newer CSS can also do shadows and gradients, color filters (black & white, sepia, etc), even animations. So you don’t need to use extra images as much for every little difference.
• Sprites – a tactic of combining many images into one file and calling them via CSS. It’s still a great tactic for improving page load for super slim site. But probably not worth the extra effort for most people. And not as much gain since HTTP/2 allows multiple parallel connections concurrently.
• Transparency – in some cases, it’s more clever (and even better image quality) to use an image with a transparent background (drawing the background color using CSS) rather than to actually export an image with a full color background.