Optimize Images For Maximum Website Speed | Resize + Lossless Compression [Ninja WordPress Tutorial]
Another #WordPressTutorial by Greensboro SEO Pro!
(https://GreensboroSEOPro.com)
In this video, we talk about one of the most important ways to optimize your site for speed.
Our example uses a #WordPress site but the same principles apply to any content management system or custom website build.
Here we talk about:
✔ Client Anecdote About 3000px Width Image (0:31)
✔ Starting with a Canva Presentation Template (1:22)
✔ Discussing & Demonstrating Resizing via Pixlr (2:08)
✔ Using TinyPNG to Losslessly Compress PNGs (5:16)
✔ Compression for PNG vs JPG Image Files (6:06)
✔ Reducing JPG Image Quality When Saving (7:04)
✔ Using TinyPNG to Losslessly Compress JPGs (8:30)
✔ Pingdom Tools & PageSpeed Insights Run 1 (9:16)
✔ Pingdom Tools & PageSpeed Insights Run 2 (11:32)
✔ GTMetrix Built In Lossless Compression (12:52)
✔ GTMetrix Waterfall Chart Looking at WPE CDN (14:17)
Compare:
Original Image Size - 1920 x 1080 px - 1.34 MB
Resized Image - 1080 x 608 px - 663 KB
Compressed Image - 1080x 608 px - 154 KB
That's almost a 90% reduction in file size.
Compare that to the size of the webpage today:
https://tools.pingdom.com/#5a66df894f...
715.7 KB by Pingdom Tools
https://www.webpagetest.org/result/19...
697 KB by WebpageTest.org
The main takeaway...
OPTIMIZE YOUR IMAGES FOR SPEED PRE UPLOAD
It could reduce your total webpage size by 75% or more... even on a one-image post.
The importance of image optimization cannot be understated. Sure, WordPress plugins like #WPSmushIt can optimize images on upload or even retroactively optimize images in your media gallery. However, optimizing pre-upload is the only sure-fire way to get the job done.
There are a few details not listed in the video we won't get into too much about here...
But real quick:
1. There are many layers to maximizing #WordPressSpeed. It's best to reduce potentially conflicting factors between your server, WP install, cache, and CDN.
2. Image metadata removal is a crucial part of image optimization. However some image metadata can have SEO benefits. Optimize by hand if you want those.
"By hand" is a bit of an overstatement.
Optimizing images pre upload is easy.
There are really only two things you need to do:
1. Size the image close to web display size via Photoshop, Pixlr, or image editor of choice.
2. Compress image via TinyPNG.com or another lossless compression method.
Additionally, you can use lossy compression (reduce the quality) for images you plan to add a gradient or other overlay option on top of. Don't use maximum quality images if you don't have to!
Obviously, there's more to be said about about both image optimization and website speed. Stay tuned here and on https://GreensboroSEOPro.com for more!
Like and subscribe for more of our #InternetMarketingTraining videos.
👍📢🔔
Comment below with questions. We might answer in a video!
🗣❓✍
And please, feel free to troll our videos if you are so inclined.
😁😅😂
===================================================
📚🛠⭐RESOURCES⭐🛠📚
TinyPNG:
https://tinypng.com
Image Optimization Series
• Image Optimization
Image Optimization Video 1 - Speed
• Optimize Images For Maximum Website Speed ...
Image Optimization Video 2 - SEO
• How to Optimize Images for SEO in 2019 & B...
Image Optimization Video 3 - GeoTags
• GeoTagging Images for Local SEO - Maximize...
Image Optimization Video 4 - WordPress (This Video)
• How to Add Alt Text & Title Tags to Images...
Why Your PageSpeed Plugins Suck:
• Why Your Speed Performance Plugins Suck (f...
Learn Website Performance
• Website Speed
===================================================
🛒💥💰NEED MORE CUSTOMERS?💰💥🛒
SEO is probably the most high-impact marketing strategy available to you.
Do your customers use Google?
Do you think they will continue to do so over the next 5-10 years?
If yes, SEO is probably your most sustainable marketing strategy as well.
Still don't get it?
Let us clarify with our free SEO video audit:
https://greensboroseopro.com/free-seo...
===================================================
🤓📈🐱👤FOLLOW GREENSBORO SEO PRO🐱👤📈🤓
Learn More: https://GreensboroSEOPro.com
What We Do: https://greensboroseopro.com/what-we-do
About Us: https://greensboroseopro.com/about
Our Team: https://greensboroseopro.com/our-team
Manifesto: https://greensboroseopro.com/manifesto
Check Us Out on All of Your Favorite Platforms.
GMB: https://goo.gl/maps/PAfqHntuAEQ2
Facebook: / greensboroseopro
Twitter: / gsoseopro
YouTube: / @greensboroseoprobyzachbradshaw
Linked In: / greensboro-seo-pro
Medium: / greensboroseopro
And stayed tuned for more...
#WebDevelopmentTalks
#WordPressSpeedTutorials
#WordPressOptimizationTips
#InternetMarketingDiscussions
#DigitalMarketingStrategy