2 Ways To Optimize Images For Web And Faster Page Load Speeds

Поділитися
Вставка
  • Опубліковано 1 лис 2024

КОМЕНТАРІ • 89

  • @wplearninglab
    @wplearninglab  5 років тому +2

    If you enjoyed this video don't forget to the like it and subscribe! Then check out this playlist about speeding up WordPress: ua-cam.com/video/cBDY-CXWmI0/v-deo.html

  • @MarcusMorrow-pj3hc
    @MarcusMorrow-pj3hc 11 місяців тому

    Well done! This is exactly what I was looking for. I knew that just because you resize an image doesin't mean the page will load fast. Didin't know what it was called though. Thanks

  • @yercheng
    @yercheng 4 роки тому +1

    Just building my first website. Helpful - thank you.

  • @hannahrama5462
    @hannahrama5462 3 роки тому +1

    This is exactly what I was looking for! Thanks!

  • @Michaelrsem0010
    @Michaelrsem0010 Рік тому

    Great video thank you very much!

  • @conwaytravel3224
    @conwaytravel3224 4 роки тому +1

    Love your videos!!
    John here in Ireland

  • @romanticlifestyle2203
    @romanticlifestyle2203 5 років тому +4

    You can optimize images manually using short pixel site compress tool. This is very cool. No need to buy. 😉

    • @wplearninglab
      @wplearninglab  5 років тому

      Hey Anisur, you're right. But ShortPixel also has a free version of their WordPress plugin. Which will do the compressing automatically for you :)

    • @romanticlifestyle2203
      @romanticlifestyle2203 5 років тому +1

      i know. but very limited for free version

    • @wplearninglab
      @wplearninglab  5 років тому +3

      It is if you upload a lot of images, but the compressions features are not limited. Through the link you get 150 free image compressions per month which is enough for most site owners. If you need more then the only option is to do it manually or pay. It's the age old question, what would you rather spend? Your time or your money, either way you have to spend something.

    • @robson5017
      @robson5017 5 років тому +1

      @@wplearninglab Where's your ShortPixel link?

    • @wplearninglab
      @wplearninglab  5 років тому

      Here it is: Shortpixel +50% compressions per month for free version link: wplearninglab.com/go/shortpixelyt2

  • @gerardpatrick8960
    @gerardpatrick8960 5 років тому +2

    I think this is very timely Bjorn., especially given your video on sources of free images. The sources (e.g. unsplash), generally have rather heavy images so this tutorial is great because of that. I'd just say that in Photoshop I have found the images I have downloaded from the likes of Unsplash etc., seem to have a resolution of 72 already, but their physical dimensions large (e.g. 6000 x 4000). So as it not possible to reduce the resolution as you have shown, from 300 to 72, I just took what you said in the V/O and reduced the width to 1200. All of that said, I am 100% new to Photoshop so it is quite possible I have no idea what I am talking about!!

    • @gerardpatrick8960
      @gerardpatrick8960 5 років тому +1

      BTW - for those trying to figure out where the 'Save to web' option is, you need to go File > Export > Save to Web (Legacy)

    • @wplearninglab
      @wplearninglab  5 років тому +1

      Hi Kolya, you did the right thing. When the image is already 72 ppi then just change the pixel width to be more reasonable for your website needs. Very few websites need images that a 6000 pixels wide, so reducing the size to 1200 is the right thing to do.
      Just doing that will reduce the file size substantially.

  • @M3KM3
    @M3KM3 4 роки тому +2

    Great video
    What size photos would you do for a photography site?

    • @wplearninglab
      @wplearninglab  4 роки тому

      Hi Mike,
      If you want people to be able to download and use the images, then as big as possible. You could have a smaller, optimized version of the photos and then offer download links for the full rez or RAW files.

    • @M3KM3
      @M3KM3 4 роки тому

      @@wplearninglab I'm trying to keep the pics looking sharp but at the same time keeping the site loading fast.
      What is usually an ideal size to use 1920 - 1280 - 800 etc...
      What would you use is this instance?

  • @samjackson4164
    @samjackson4164 4 роки тому

    Thanks for this informational video. kindly make an advanced video on this topic as well as on SEO offPage.

  • @shaikhsaloarhussain4133
    @shaikhsaloarhussain4133 4 роки тому +1

    love from india ❤️..nice content

  • @JimKernix
    @JimKernix 5 років тому +2

    For anyone who doesn't have Photoshop, there is a site called SitePoint which has an article called 5 free web-based photoshop alternatives. I have Photoshop so I haven't checked them out. I also usually do medium but I'm always trying to get it under 50 KBs.

    • @JimKernix
      @JimKernix 5 років тому +1

      Forgot to mention that the article is ad and popup heavy so grab the links and get out of there.

    • @wplearninglab
      @wplearninglab  5 років тому

      Hi Jim, great tips! A free Photoshop alternative I've used in the past is called GIMP (www.gimp.org/) and it works really well.
      Gotta love those ad/popup heavy sites...

  • @rancehealthcareservicesltd
    @rancehealthcareservicesltd 5 років тому +2

    Superb tutorial.

    • @wplearninglab
      @wplearninglab  5 років тому

      Thanks Edwin and thanks for watching!

  • @chinedummaduabuchi3641
    @chinedummaduabuchi3641 5 років тому +4

    I like this man, We get started right now Lol

    • @wplearninglab
      @wplearninglab  5 років тому

      The early bird gets the worm Chinedum, good work!

  • @Polyllaleika
    @Polyllaleika 4 роки тому +1

    Shortpixel, wow! Thanks

    • @wplearninglab
      @wplearninglab  4 роки тому +1

      You’re welcome Sandra, thanks for watching! Let me know if you have any questions :)

  • @nmpai
    @nmpai 3 роки тому

    thank you

  • @colcal5275
    @colcal5275 4 місяці тому

    Thanks

  • @3rdtwirl494
    @3rdtwirl494 2 роки тому

    hi what spec of laptop do you use please

  • @andreawillmore
    @andreawillmore 4 роки тому

    I need to upload those same images into other places, like Adobe Portfolio and Behance. Will I be able to export those compressed versions made by short pixel to my hard drive to use elsewhere? If not, then I guess photoshop is the way for me to do it so I can use those images everywhere.

  • @kennethpineda6143
    @kennethpineda6143 4 роки тому

    Thank you very much!!

  • @djdynamiksoundz9166
    @djdynamiksoundz9166 5 років тому +1

    Thank you. Just subscribed to Short Pixel

    • @wplearninglab
      @wplearninglab  5 років тому +1

      I think you'll be very happy with the results. They're a great service.

    • @djdynamiksoundz9166
      @djdynamiksoundz9166 5 років тому +1

      I have SMUSH that I’ve used but I’m hoping SP would be better at compressing

    • @wplearninglab
      @wplearninglab  5 років тому +1

      SP does have better compression abilities, especially if you use their new Adaptive Images plugin.

  • @damjanilic5596
    @damjanilic5596 5 років тому +2

    Great content

    • @wplearninglab
      @wplearninglab  5 років тому +1

      Thanks Damjan and thanks for watching!

  • @underthekentuckysun3045
    @underthekentuckysun3045 5 років тому +1

    Super helpful!

  • @emmawienke6886
    @emmawienke6886 5 років тому +1

    Great video, thank you! Can I double check, are you advising to use both Photoshop AND a WP plugin for every photo on your website? Or to use a plugin to minimize the majority of images and for the larger images, where you need to keep more detail, edit in Photoshop as well?

    • @wplearninglab
      @wplearninglab  5 років тому +1

      Hi Emma,
      I use Photoshop to resize the images on my sites. I rarely need images that are larger than 2000px wide and many images can be even smaller. Once resized, I "save for web" and then upload the image to my site and let the optimization plugin handle the rest.
      If the original image is an appropriate width I won't resize or "save for web" in Photoshop; I upload as is.
      I have heard that saving for web in Photoshop and then letting a plugin optimize the image leads to better compression than just using one of those two methods. But I haven't tested it.
      I hope that helps :) Let me know if you have any further questions. Thanks for watching!

    • @emmawienke6886
      @emmawienke6886 5 років тому +1

      Hi Bjorn,
      Thank you so much for this further clarification! Super helpful!
      Best wishes,
      Emma x

    • @wplearninglab
      @wplearninglab  5 років тому +1

      No problem Emma, good luck!

  • @topp342
    @topp342 5 років тому +1

    Hi Bjorn - great video as ever. Without sounding like a cheapskate, what would you consider a good alternative to photoshop for the initial resize of the image. I'm on the edge of do I or don't I take the hit and buy PS, but if I'm only really using it for image optimization, is there a cheaper alternative? Any thought greatly appreciated.

    • @wplearninglab
      @wplearninglab  5 років тому +2

      Hi Alistair, sorry for the delay. The PS alternative I like best is called GIMP. It's free and works on Windows, Mac and Linux. I'm recording a video on it shortly. I used GIMP all the time before I signed up for PS many years ago.
      I hope that helps :) Let me know if you have any further questions. Thanks for watching!

    • @topp342
      @topp342 5 років тому

      WordPress Tutorials - WPLearningLab Thanks Bjorn. I’ll take a look.

  • @EricaDyson
    @EricaDyson 5 років тому +1

    Great but couldn't find your tutorial on the settings for Short Pixel. Could you post it here by any chance? Thanks a lot.

    • @wplearninglab
      @wplearninglab  5 років тому +1

      Sorry Erica, I dropped the ball on that one. Here's the link to the Shortpixel settings and walkthrough tutorial: ua-cam.com/video/tVsdSEZ3__A/v-deo.html
      Thanks for watching!

  • @yeahs_de3655
    @yeahs_de3655 4 роки тому +1

    Hey use Seopix

  • @mrafiqkhan6342
    @mrafiqkhan6342 3 роки тому

    how to optimize bulk images in photoshop any other software.

  • @devilreaper8543
    @devilreaper8543 5 років тому +1

    png are save for transparency but which is better for website png or jpeg ...??

    • @wplearninglab
      @wplearninglab  5 років тому

      Both are good, but if you want the image to be as light weight as possible go with JPG.
      I use PNG whenever I need transparency and for featured images and for UA-cam thumbnails. All other images are JPGs.
      I hope that helps and thanks for watching!

  • @olduser4014
    @olduser4014 3 роки тому

    love you...

  • @punit5601
    @punit5601 5 років тому +1

    On siteground, is the website hosting pack shared hosting? Don't they have vps hosting?

    • @wplearninglab
      @wplearninglab  5 років тому

      Hi Punit, they have both shared hosting and dedicated servers. Their shared hosting is well-managed, meaning they don't put too many sites on each server.
      I have a VPS tutorial publishing on Wednesday. The price for the VPS I'm going to share starts as low as $1 per month.

    • @punit5601
      @punit5601 5 років тому +1

      @@wplearninglab i would be waiting

  • @sg3-h7u
    @sg3-h7u 4 роки тому

    What's the difference between using short pixel vs. simply exporting your image from LR with file size limited to 100 or 200 kb?

  • @lisaweckman
    @lisaweckman 4 роки тому +2

    So should we run smush & short pixel (both on wpsite) or just one plugin?

    • @wplearninglab
      @wplearninglab  4 роки тому +3

      Hi Lisa, pick one or the other. They do the same thing, just in different ways. ShortPixel's free version will provide better compression that Smush's free version.
      I hope that helps :) Let me know if you have any further questions. Thanks for watching!

  • @punit5601
    @punit5601 5 років тому +1

    I know amp pages are considered duplicate so is there a code or plugin that would prevent this or will we have to vo to every amp page and add a canonical tag? Please please give a solution because i dont want to go through headache of adding canonical every time

    • @wplearninglab
      @wplearninglab  5 років тому +1

      Hi Punit,
      I'm afraid the headache is required. In this article on the Google Webmasters blog they say if your AMP pages are not canonicalized then those pages won't be considered for AMP-specific search features: webmasters.googleblog.com/2017/11/engaging-users-through-high-quality-amp.html
      I'll see if I can find a way to make it easier and if I can I'll make a tutorial for it.

  • @Voltzaps
    @Voltzaps 4 роки тому +1

    Thank you!!!

    • @wplearninglab
      @wplearninglab  4 роки тому

      You're welcome, thanks for watching! Let me know if you have any questions :)

  • @kayaramirez2263
    @kayaramirez2263 4 роки тому +1

    for some reason it always says gif in the bottom left when i save for web. and changing the export quality doesn't lower the size at all.

    • @wplearninglab
      @wplearninglab  4 роки тому

      Hi Kaya,
      On the right side of the Save For Web dialog box, are you able to change the image type in the dropdown?

    • @kayaramirez2263
      @kayaramirez2263 4 роки тому

      @@wplearninglab on the top right? Yeah if I choose png or jpeg it doesn’t matter still says gif. It exports as Jpeg but the weight doesn’t change

    • @wplearninglab
      @wplearninglab  4 роки тому

      That’s strange. That’s now how it should be happening.
      If you close and restart Photoshop does that fix it? Maybe a computer reboot? Do you have latest version of Photoshop installed?

    • @kayaramirez2263
      @kayaramirez2263 4 роки тому +1

      @@wplearninglab so i had to click into 2-up and hit the jpeg option on the bottom and then back into optimized and it works! not really sure why that is but ill take it. thanks for responding so fast i appreciate it

    • @wplearninglab
      @wplearninglab  4 роки тому

      I’m happy you got it figured out Kaya :)

  • @Grvag
    @Grvag 5 років тому +1

    superb

  • @AndyDOHD1
    @AndyDOHD1 4 роки тому +1

    I've already uploaded images without compressing them, is it possible to compress those already uploaded?

    • @wplearninglab
      @wplearninglab  4 роки тому +3

      Hi Andy, yes it is possible. If you have Shortpixel (even the free version), you can compress images after they've been uploaded.
      With Shortpixel Image Optimizer installed, go to the Media Library, change the view to a list instead of grid and you'll see image compression options to the far right of each image.
      That way you can compress them individually. Or inside the Shortpixel Image Optimizer settings you'll see a bulk compression option that will compress all images on your site.
      This will not work with Shortpixel's other plugin: Adaptive Images.
      Last note, the free version of Shortpixel allows you to compress 100 images per month. If you sign up through my affiliate link, the free account will give 150 image compressions per month.
      I hope that helps, let me know if you have any further questions. Thanks for watching!

    • @AndyDOHD1
      @AndyDOHD1 4 роки тому

      @@wplearninglab I was reading about Optimole and Shortpixel and wasn't too sure which to use at the moment. Had a bandwidth issue with a new client site today and it's probably the images I have installed. And the group are getting a lot of publicity locally and so lots of interest in the site. I'm going to go with Shortpixel with this site, the free version for now at least.

  • @worldofnissanka9222
    @worldofnissanka9222 4 роки тому

    it's not 150 per month...before is shows 150 but after subscribing it shows 100 images per month only

  • @alejandroperez5368
    @alejandroperez5368 3 роки тому

    Save for web is now legacy, no longer recommended. Actually, the Save for web dialog takes a looooong time to respond, whereas with Export As, it's quick.

  • @codehack573
    @codehack573 5 років тому

    i need help you

  • @codehack573
    @codehack573 5 років тому +1

    hy sir

  • @guynouri
    @guynouri Рік тому

    Thanks