Website speed is one of the biggest factors that impacts how users experience your site — and how well your site ranks in search engines. In this lesson, you’ll learn easy, practical tips for optimizing your website’s images and settings to help your site load faster and perform better.
Understand the Different Image Formats
When uploading images, choosing the right file format can make a huge difference in page speed.
JPG (JPEG):
Best for photos and complex images (like landscapes, food, products).
Typically smaller file sizes compared to PNG.
Always has a background (cannot have transparency).
Good balance between quality and size.
PNG:
Best for logos, icons, and images that need transparency.
Supports transparent backgrounds.
Higher quality, but larger file sizes than JPG.
Use sparingly for large images because of file size.
WebP:
A newer format created by Google.
Best of both worlds — smaller than JPG and PNG, but still high quality.
Supports transparency like PNG and compresses like JPG.
Not all older browsers support it, but most modern ones do.
SVG:
Best for simple graphics, logos, and icons.
Vector-based, meaning they are scalable without losing quality.
Extremely lightweight — ideal for graphics that don’t need photo realism.
Not suitable for complex photos.
Resize Your Images Properly
Uploading huge images is one of the most common mistakes that slow down websites. Always resize before uploading!
Maximum recommended width:
2400 pixels wide is more than enough for almost any website use.
Resolution for web:
Set images to 72 DPI (dots per inch). Higher resolutions like 300 DPI are for printing, not web.
File size goal:
Ideally under 100KB per image.
Absolutely under 200KB maximum.
The smaller, the better — without losing visible quality.
Tip: Use tools like TinyPNG, ImageOptim, or Squoosh to compress images without making them blurry.
Enable Caching
Caching stores parts of your site temporarily, so they load faster next time.
Install a caching plugin like WP Rocket, W3 Total Cache, or LiteSpeed Cache.
Enable page caching, browser caching, and GZIP compression inside the plugin settings.
Turn on Lazy Loading
Lazy loading means images only load when they come into view — not all at once.
Elementor has built-in lazy loading for images.
Most caching plugins also have a lazy load option you can toggle on.
Minimize Plugin Usage
Each plugin adds weight to your site.
Only install essential plugins.
Delete unused or deactivated plugins.
Choose lightweight alternatives when possible (e.g., use one plugin that can do multiple jobs).
Optimize Your Web Hosting
Your hosting company matters more than you think!
Use reputable providers (e.g., SiteGround, Cloudways, WP Engine). My personal favorite is Skystra because they have excellent customer service, and their sites are fast.
Avoid extremely cheap shared hosting. GoDaddy is appealing because it’s cheap, but they make you pay for simple things like security (which NO other hosting provider does), so avoid them if you can.
Consider upgrading to cloud hosting or managed WordPress hosting for faster performance.
Minimize and Combine Files
Each CSS and JavaScript file = an extra request your site has to load.
Minify CSS, JavaScript, and HTML files (your caching plugin can usually do this automatically).
Combine files when possible to reduce the number of requests.
Use a Content Delivery Network (CDN)
A CDN makes your website load from the closest server to your visitor’s location.
Free options like Cloudflare can dramatically boost your speed.
CDNs cache your static files (images, stylesheets, scripts) around the world.
Disable Unused Features
Many WordPress themes and plugins load extras you don’t need.
Disable emoji scripts.
Disable unnecessary Google Fonts.
Turn off extra WooCommerce scripts if you’re not using WooCommerce.
Regularly Monitor Your Site Speed
Keep track of your improvements and stay ahead:
Use tools like:
Aim for a page load time under 3 seconds.
Homework & Action Items
-
Audit your website images — resize to 2400px max, 72 DPI, and compress.
-
Use JPG for photos, PNG for graphics with transparency, and WebP if available.
-
Install and configure a caching plugin.
-
Enable lazy loading for images.
-
Delete unused plugins and themes.
-
Minify and combine CSS, JS, and HTML files.
-
Set up a free CDN like Cloudflare.
-
Disable unnecessary scripts (like emojis or extra fonts).
-
Run your site through PageSpeed Insights and record your starting speed.
-
After optimizing, run another speed test and compare the improvements.