Episode 52 – Image Optimization for Site Speed

Transcription was done by Rev.com

Welcome to episode 52. This is a special episode because this is an episode where a lot of people have been asking about image optimization and that kind of thing. I'm not going to talk about the SEO side of things, but just the compression and site speed part of images because as photographers, we're going to have a lot of images on our website, and images slow down websites. I mean, think about it. You're exporting files that were hopefully raw files originally, and if you're on a camera like the Nikon D850, your files are like 45 megabytes, so you're exporting large files to JPEGs. A JPEG out of a Nikon D850 might be like 10 megabytes, maybe even a little bit more, depending. If you just upload that, your site's going to be very slow to load. I want to touch on a few things, and we'll go through these one by one. Hopefully, it'll help you with your site speed.

Now, before we dive into the actual advice that I have for you, I want to talk about the reasoning behind this. We have an article that's now a little bit dated, but it's still very relevant. Basically, it's just an infographic. In this infographic, it shows that 79% of customers who report about website performance are less likely to buy from the site again.

Now, keep in mind, this isn't photography-specific. This is any website, an eCommerce website, but this is very relevant to you as well. 64% of mobile phone users expect pages to load within four seconds. 47% of people expect websites to load on desktop within two seconds. Now, keep in mind, again, that two seconds versus four seconds. Two seconds on desktop, four seconds on mobile. It's because people expect things to load slower on mobile, especially if they're on WiFi. They're going to expect it to load a little bit slower, but not too much slower, even though it might actually load a lot slower. You really want to fine-tune it so that your mobile speed is up, especially as more than 50% of your traffic is going to start coming from mobile as the time goes by.

If your photography business is hypothetical, if your photography business made $100,000 a day, which, obviously, that won't happen, but if it did, then a one-second improvement in site speed brings about $7,000 in revenue daily. Think about that. One-second delay in page-load time means 11% loss in page views. One-second delay means 7% reduction in conversions.

The slower your site is, the higher the bounce rate or the rate people visit and leave without performing any actions, so site speed matters. Site speed matters. I'm going to link to that infographic in the show notes so you can see it. I highly recommend checking it out. Again, it's not photographer-specific, but a lot of it, or most of it relates, and you should really take these things into consideration.

How do you address some of these? Well, the first thing is you want to make sure you fine-tune how your images are uploaded or displayed on the front end. A lot of people ask us at Imagely, "What image size should I upload at?" Here's our recommendation, and we have an article on this as well, and I'll link to this in the show notes, but shared hosting should be uploaded at a max, a max of 1,000 pixels at the longest edge. Now, that is because you're on a shared host. Shared host are slower by nature. You're sharing the server with hundreds of customers and thousands of websites, so if your site's loading slow, others on the server will load slow. If others are loading slow, yours will loading slow, and so on.

1,000 pixels at the longest length max if you're on something like Bluehost or GoDaddy's shared hosting platform. If you're on a cloud hosting platform, I'd go about 1,400 pixels at the longest length. If you're on a virtual private server, or VPS for short, then 1,600 pixels, the longest length, and if you're on a dedicated host, 2,200 pixels at the longest length.

Now, I recommend, for those on good hosts, now, those are, keep in mind, those are general upload sizes that we're recommending, but I personally recommend that for those on a good host, not shared servers, basically, anything but shared servers, to upload or display at 2,048 pixels, which is the ideal size for a tablet. That way, when the image is large and viewed on a tablet, it can fill the screen beautifully and look nice and sharp, but you need to make sure that whatever you're using to display your images, gallery plugin, your theme, whatever it is that's controlling this, that it's displaying smaller image sizes as needed. NextGEN Pro will do this if you have resize and upload and backup originals turned on. This is what it does. It will shrink down the images and do the retina display based on the device.

Now, here's what I do for portfolios and other galleries on by own website, on scottwyden.com. Upload a full size image. Now, like I mentioned way in the beginning of this episode, the Nikon D850 will produce a large JPEG. I will still upload that large JPEG because what NextGEN Gallery is set to do on my site is to resize every image to 2,058 pixels. Then NextGEN Pro will display the image based on the type of screen, like if it's retina, and content area of your theme depending on the gallery type if you have set. If you're using a Mosaic Gallery, then it's going to display thumbnails. If you're using a slideshow gallery, it's going to display it based on the content area, but it's going to dynamically resize the images for display purposes to be smaller and faster, but really, when you click on the image to view it large, it's going to pull up the large 2,048 pixel in the Pro Lightbox.

Next, NextGEN Pro will sell prints and digital downloads based on the original backup. I mentioned that I have backup original turned on. NextGEN Gallery will create the backup, and NextGEN Pro will use that backup for the eCommerce part of the website. Now, this is the best of both worlds: quality for eCommerce and quality for speed of viewing. Now, if you want to view the image size recommendations, I will link to that again in the show notes so you got another thing that you can look at.

The next is talking about compression. Now, oh, boy. I've done a lot on compression, a whole lot of compression as you'll find out. I use, I'm a big fan of JPEGmini Pro, big fan of it. I use that in my light room work flow. If I'm working in Photoshop, I still use JPEGmini Pro's Photoshop extension. By doing so, I get the best, absolute best compression without the risk of visible quality loss or color-shifting because if you use a tool like, I don't know, some of the other compression applications out there for Mac and Windows, you do have a risk of reducing the visible aesthetics of the image and actually shifting the color so that skin tones are really orangey or yellow or red and not just whatever the natural color is. JPEGmini Pro is fantastic. It's the best at getting the best compression with the best aesthetics.

Now, I talk about this in an article called A Case Against WordPress Plugins for Image Compression. I'm not 100% against plugins as you'll see in a minute, but this is a good article to read because it'll talk you into why I recommend JPEGmini. Now, however, the compression of JPEGmini may not be best for websites. Sometimes, you do have to give up some quality loss to gain some speed. JPEGmini, you are going to have higher image files than you would if you were to use a WordPress plugin, for example, to compress your images, but that's why I've done a big comparison of the best compression plugins for photographers to use.

Now, I use and recommend, and we at Imagely also recommend using, Imagify for image compression on the website. You can do this in conjunction with JPEGmini. I use Imagify on my own website. It's what I recommend. Like I said, it's what Imagely recommends. It's designed in a similar way to JPEGmini where it won't overcompress your images. It has limits, but it will still reduce some visible quality.

Many times, I find that its middle level of compression still won't touch files already touched by JPEGmini. That's one of the things I love about it. Other plugins will overcompress if something's been compressed. In fact, a lot of the other plugins will actually compress what they've already compressed themselves, meaning they're going to double-compress the images. Imagify won't do that. You compress it once. It won't overdo it. Imagify works on [inaudible 00:10:06] library and also in NextGEN Gallery, which is beautiful because then you can compress every image on your website no matter where it is.

If you'd like to see the full comparison, I will also link to that in the show notes. It is a very unbiased approach to the comparison. It's kind of how we came to the conclusion of why we like Imagify the best. It's because it does give the best, in our opinion, sort of level, if you put it on a scale between aesthetic loss and file size, it's kind of an even balance of loss between the two instead of it leaning towards one side.

Now, finally, the last thing I want to talk about here are a few things you can do to further speed up your site with a lot of images. The first is something called lazy loading. Now, couple years ago, I was against lazy loading because it was kind of a, sort of, what are, an optical illusion. It was sort of, it just didn't show you the image until you scrolled, but now, lazy loading is legit. It is actually not loading the images until you actually scroll to a certain point, and then it loads the images. Doing that actually does speed up your site and, because that way, the only parts loading are what's visible. The only images loading are what is visible on the screen at that point in time.

Lazy loading is really fantastic. If you don't have anything that has lazy loading, you can install a WP Rocket cache, which they have a free lazy load plugin in the WordPress directory, or if you're using WP Rocket cache, their paid plugin, which is very affordable, also made by the people who make the Imagify compression plugin, they have the lazy loading in there with, actually, advanced features including video lazy loading and some cool stuff like that.

The next piece is infinite scroll, and that is where you're loading images, and as you get to the bottom, it just continues to load more. It's kind of the Instagram effect where you just scroll and scroll and scroll, and it just keeps going, and it'll go until the gallery is done.

The last is pagination where you have next or previous or one, two, three, whatever it is, kind of like your blog post archives where it's paginated. The beautiful thing about NextGEN Gallery and NextGEN Pro is it actually offers all three of those: lazy loading, infinite scroll, and pagination. Depending on which gallery type you pick, you'll have an option of either pagination, infinite scroll, or lazy loading, or a combination of them. For example, the Pro Mosaic Gallery, the most popular gallery just by typing NextGEN Pro, actually has lazy loading with infinite scroll, so it helps speed up your site that way by cutting out the loading of images, and then when you get to the point, you'll scroll further with more images loading more and more and so on. It's kind of the best of multiple worlds by having it.

That is what I really want to talk to you about today is image optimization. There is so much into it. Of course, I could go into the SEO side of things, but I'm not going to. If you want to know about the SEO side of things of image optimization, go to imagely.com/seo, and you can opt-in to a freebie that talks all about image SEO, but otherwise, I will link to everything I just mentioned in the show notes. Let me just make sure I note down I just mentioned the image SEO. It's kind of funny I didn't think about this in my original notes.

Anyways, so I will link to everything I talked about. If you have any questions, comment on the video on YouTube, comment on the show notes at imagely.com/podcast/52. Until next time.