Why Your Website Images are Making Your Load Time Drag on Like a COVID-19 Quarantine

Hey you creative, yes you with the beautiful elopement pictures of the couple in Hawaii and also you… yeah influencer with your cute kid eating yogurt with his #ad 100% silicone bib.

I see your beautiful pictures. (Also, I’m calling BS on that toddler with a bib, those never actually work around here 😂)

You’ve just finished a shoot, the photographer sends you the final images and you plop them onto your website. Done! Back to work.

Or you pull all the pictures off your phone that you just took around your house with your self-timer (ps- no shame in working that self-timer) and so you upload a few to your website to sub out the ones you took last time. You promise yourself next time you’ll hire a pro 👍

Except you’re slowing down your website friend.
Like slower than the two+ months you just spent in quarantine.

via GIFER

(Side note: You’re also HUGELY missing out on SEO benefits by not naming and optimizing your images.)

Around here we help you build a super fast and beautifully responsive website so there’s none of this sloooooooow stuff for us. But we totally get it, you’re probably not a client of ours (yet) so we’d love to help you get things in order when it comes to the images for your website so that whether you’re uploading them alone in your pjs at home after your kids to go bed, or  we’re doing it for you while you play in the sand, your website will load faster and the Google gods will be chasing down your website, practically throwing clients your way 😉.

Make your website project go much faster by choosing images and optimizing them beforehand, thinking about your potential titles, and favorite keywords.

Know what info is needed for each image on your website

Alt tag or alt text

This should be adequately descriptive but does NOT contain any spammy attempts at jamming in a ton of keywords. If you had to close your eyes, have someone read the alt text to you, and you could imagine a semi-accurate version of the image, you're on the right track

Title

This is your file name PLEASE no DFTY6756.jpeg files here. Rename these! Rename your files before you upload or as you upload but DO NOT leave them as this. Titles can be seen by Google and evne your users if they hover an image. In some website platforms you can go back and search for that “Hawaii wedding” if you need as well.

Description or caption

These are nice to have but not necessary. If you need to tell more about an image (like one of my sweet clients who links out always to her photographers and gives credit) you can list them below the image in a caption.

Good image types and sizes

PNG

When do you use a png file on your website? Likely you’re only going to need a png file if it has a clear transparent background (like your logo should have). There are a few other instances where maybe for your opt-in or something else that needs to look like it’s floating, but for the most part these tend to be larger files and slow down your site so save them for the few areas that need it.

JPEG

The most ideal format for images on the web. They can be shrunk smaller while still keeping their clarity.

Where and how to shrink your website images (aka how to compress them)

Image compression means reducing the image size without sacrificing the quality for the sake of the size.

Tiny Jpeg/Png type sites

If you just have a couple of images these are a great start. Once you upload an image you can see the amount of space it saves you. If you’re in a time crunch and just have a few photos to deal with, this is my first go to.

Give this one a try https://tinyjpg.com/

Photoshop

The export features in Photoshop are very powerful, you can set a lot of parameters for that specific image you’re working with.

Lightroom

This is my favorite if I have more than about 3-5 images to do at a time. I do this if I’m uploading a lot of images for one blog post, or for one client portfolio showcase. If my clients have galleries from homes they’ve designed or sessions they’ve photographed we always run them through lightroom with settings for the web. This is also an easy way to add keywords to their images or meta descriptions that you'd want Pinterest and other social platforms to pickup on.

Do’s and Don’ts of Images for Websites

DO

  • name your images
  • know what pages they’ll go on
  • keep them cohesive
  • use both vertical and horizontal
  • pay a pro if you can
  • resize them before you load them
  • ask your web designer for their best practices when it comes to the images you’ll use on your website
  • select your images carefully and compare quality if you compress them down, often you won’t even notice a difference

DON’T

  • use all images from a phone...even with a great iPhone
  • name them as you upload them (you’ll forget and skip it)
  • upload them and try to “smush” them, don’t rely on plugins to solely do this job for you
  • have too many images to start with muddying up the backend and media areas

So now you’re free to go back to capturing your beautiful self-timer shots of you and your kids in matching outfits drinking smoothies (or if you live at our house) you’re free to go back to taking 3 more rounds of that picture on the swing trying to “raise the camera for a better angle”. “I can’t raise it anymore Google, that’s just what we’ve got, thanks.”

Let me know if you have any questions about images on your website, website design in general, or toddler horror stories, I can talk about all of the above, and always happy to help!

Here it is friend

You've been looking for the "right way" to design a website.

Lacking some confidence in your design skills? Wanting to start designing websites for clients but not sure where to start?
What if you knew every step (in the right order) to go from idea to development... and clients actually love their final website?

Download the Free Guide