WordPress Speed Optimization Images

Images are actually very simple assets, not much complex processing is required from web servers. Where they hold back your page load is in their delivery across networks and rendering in the user’s browser. Make them too big, and they take longer to send and eat up the browser’s memory. More than anything, images affect your website’s perceived load time.

Images Optimization Tips

• Choose proper image format (BEG, MED)
• Choose proper image dimensions (BEG, MED)
• Set proper media sizes in theme and plugins (ADV, MED-HIGH)
• Using responsive (adaptive) images for smaller devices (INT, MED)
• Image compression (BEG-INT, MED)
• Convert unnecessary transparent PNG to JPEG (INT, MED)
• Redraw images or icons in CSS (ADV, LOW)
• Icon fonts vs SVG’s (ADV, MED)
• Remove unused media sizes (ADV, LOW)
• Using CSS sprites (ADV, LOW)
• Video compression (BEG-INT, MED-HIGH)

Choose proper image format (BEG, MED)

• JPEG – produces smaller files for photos or images with many colors.
• PNG (aka “png-8”) – produces smaller files for images with few colors, sharp lines, and contrast. It can also do transparency.
• PNG 24 – a higher quality version of PNG suitable for photos, but still larger file size than JPEG, so not recommended unless you need transparency.
• WEBP – combines the best of JPEG and PNG, allowing great photo quality and transparency, and better compression than JPEG (smaller file size). It can be used in place of JPEG or PNG 24, but should have fallbacks just in case! (FWIW, I don’t personally use WebP yet.)
• 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 a low-quality video format. Rarely used in a professional setting like a website, where you typically want high-definition images and videos. Just know that GIFs can be optimized, too.

Choose proper image dimensions (BEG, MED)

Don’t use a bigger image than you need!

• Resize images to fit the exact area size. (e.g., using 400px-width image for a 400px-width area.)
• To make important or larger images appear better on retina screens, use an image double the area size (e.g., 800px-width image for the 400px-width area)
• Less important or smaller images can be sized exactly as the area size (no need to be retina-compatible).
• I believe most people don’t use retina or ultra-HD monitors in their full resolution. Many will scale at 150%, which means you can (probably) get away with only 1.5x image sizes.
• Don’t upload raw photos directly from your camera. Resize, crop, and edit them first! Or use an image compression plugin to automatically optimize uploaded photos.
• A big waste would be loading a 2000px-wide image into a 300px-wide space. It wastes server storage, internet bandwidth, and browser processing.

Set proper media sizes in theme and plugins (ADV, MED-HIGH)

Luckily, most themes set the right image sizes already since they control the layouts. The issue is more when you have frameworks or plugins using generic media sizes because they don’t know what you’ll end up using. Or you created a new layout that needs a specific media size not already set by your theme.

• Finish your theme design.
• Then go to WordPress Settings > Media, and set the correct sizes used throughout your site.
• If you have WooCommerce, check Appearance > Customize > WooCommerce > Product Images.
• If your theme or plugins create their own image sizes, check their settings and image sizes as well. (Some are hardcoded in theme files.)
• If any media sizes were adjusted or created, please regenerate all your thumbnails.

What you don’t want is to have image sizes that don’t match your layouts. For example: your site has only 400px & 800px image sizes, but some image areas are 500px size – it will wastefully use the 800px one! The solution in this case is either to adjust the closest media size to 500px or create a whole new media size. (Ideally, we want to have as few media sizes as possible to save server space.)

Using responsive (adaptive) images for smaller devices (INT, MED)

• Make sure your theme is mobile-adaptive (most themes are) and shows smaller images for smaller devices.

This feature is default with WordPress and most well-coded themes, and can also be enabled by adaptive image plugins. Obviously, it’s not good to load desktop-sized images for mobile devices! The problem is that some themes don’t enable this feature properly. Either they load only the desktop-size version for all devices, or even more stupid – they load BOTH (desktop & mobile) sizes for all devices.

If your site uses large background images, you better make sure this feature is working correctly on mobile!

Image compression (BEG-INT, MED)

• Manual JPEG compression – use an image editor (e.g. Photoshop) to decide the exact quality output you want. 60% for jpeg is safe. Can test a few percentage points up or down. Good for large or important images.
• Manual PNG compression – use the image editor and adjust the number of colors.
• Automatic compression – use a plugin to do it. My favorite image compression plugins (in order) are ShortPixel, LiteSpeed Cache, and WP Compress. You can use these for less important images or non-tech-savvy users.

Another quick way to manually compress images: just upload to ShortPixel’s compression tool (free).

Convert unnecessary transparent PNG to JPEG (INT, MED)

I often see large transparent PNG images sitting on a plain white background. Eating up tons of space when they could easily be half the size and even look better as JPEGs.

• If your transparent PNG sits on a solid background, you can easily convert it to JPEG and match the background color.
• You’ll save many bytes and won’t notice any difference!
• If your image is simple, a solid background PNG might still be smaller than a transparent PNG.

Redraw images or icons in CSS (ADV, LOW)

• Some themes or plugins unnecessarily use image files for very simple graphics (lines, blocks, icons) that could be easily rendered with CSS.
• You can check by inspecting the visual decorations around your site theme.
• Redraw them in CSS, and you’ll save a few unnecessary HTTP requests.
• Here’s a fun collection of 512 pure CSS icons (by CSS Icon), some even animate!

Want to be clever? You can mix images and CSS together. Use CSS to draw shapes in your images or color filters. There are so many clever uses that save space and look better.

• Gradients have been a part of CSS for a while, especially during the Web 2.0 era.
• Shadows – use CSS instead of putting edge shadows in your images!
• B&W filter – great for reusing an existing color image.
• Color filter – a reverse of the above.

Icon fonts vs SVG’s (ADV, MED)

There are many debates in the developer world about whether icons are better as SVG or icon fonts. Developers are free to choose because they know which fits their use and workflow. Between you and me, here are my guidelines:

• Simple icons (arrows, search glass, hamburger menu) can be drawn with CSS.
• Complex icons (social media icons, carts, notepads, etc) need either SVG or icon font.
• If you only have 2-3 icons, SVG will be less weight (and can even be inlined).
• If you have 10 or more icons, use a custom icon font service (Fontastic, Fontello, IcoMoon). Or create your own custom font.
• Self-made and locally loaded icon font (my favorite) is the fastest because even a 2kb small icon font file can load 10-20 icons, which is all you really need.
• The hassle with self-made icon fonts is that they take more time to update if you want to add/edit an icon later.
• The worst icon fonts are the 3rd-party ones loading externally! For example, Font Awesome is 30-200kb and loads many unused icons.
• If using SVG, you can optimize them with Jake Archibald’s SVGOMG. See what you can disable or decrease in quality without affecting appearance.
• Please don’t inline SVGs unless it’s really small and only used in one place on the page.

Most people don’t have the skills to redraw in CSS or create their own icon font. All I ask is that you either use SVG or follow one of those custom font services. Whatever you do, please don’t load FontAwesome, as it’s a good 40-75kb and adds 100-150ms to load time. Of course, many theme developers load FA as that’s the easiest/laziest way to put many icons on a theme.

Remove unused media sizes (ADV, LOW)

• Does having a ton of image files really slow down your site? Probably not.
• Does it slow down backend site functions? Maybe.
• Can it affect your site speed during longer backup times? Yes!
• Can it make your web hosting more expensive? Yes.

More than anything, it makes an unnecessary mess out of your website. Making it bigger and bulkier than necessary. Let’s clean this up. Go to your theme and plugin settings and uncheck/disable any media sizes you don’t need. Some of this work may require a developer to thoroughly check all your page templates, edit functions.php, and manually dequeue unused media sizes.

Having a hard time finding all the media sizes that your site is using? A handy trick for me is to install one of those image compression plugins. They’ll list all the sizes in one handy place.

• Get rid of media sizes you don’t use.
• Can also remove sizes that are too similar. (Keeping the bigger one.)
• Once you’ve deleted unused media sizes, you’ll have to delete the unused images (but be careful!)
• There are plugins that say they can do the job. Please research and test carefully. I’m honestly unsure of which ones delete only unused media sizes and which ones delete entire unused images.
• Be very wary of newspaper/magazine themes with many image sizes!

Using CSS sprites (ADV, LOW)

CSS sprites are an old tactic that actually still works for some use cases. A long time ago, some developers used to combine many tiny images into a single image file and then reference only parts of it in CSS. It was a clever way of reducing HTTP requests. Nowadays, this tactic isn’t necessary since HTTP/2 allows many more HTTP requests, and most small images can be rendered in CSS, icon fonts, and SVGs. (Design coloring is much flatter as well nowadays, instead of the overly color-esque WEB 1.0 period.)

• You can try CSS sprites if you have many small images that have multiple colors (and/or can’t be drawn in icon fonts or SVGs).

Video compression (BEG-INT, MED-HIGH)

• Compress videos as much as possible.
• Output in webm or mp4 format. (I like mp4.)

Any video that’s auto-played on page load should absolutely be compressed. If you’re a pro-editor and know how to render the perfect balance between small file size and good quality, do your thing. For everybody else, just do my easy cheat!

• Upload the video to Vimeo, YouTube, Facebook, etc.
• Then re-download their compressed version.

These services put out gazillions of videos every day, I think they have the best algorithms! YouTube’s compression is the best balance of small size and good quality. If you want slightly higher quality, try Vimeo. If you want a smaller size, try Facebook.

More important than compressing the video, is to decide what you need from it:

• Do you even need the sound? (Remove if not.)
• Do you even need it in color?
• Is the video just a backdrop for text? (Can lower quality even more.)
• Does it even have to be that big?

Do you even need a video? Does it even get watched? Maybe nice big images are better and cleaner to use!