Website Crimes With WordPress Images (or, five most common WordPress image mistakes)

Having worked on a variety of websites for a wide variety of clients and businesses, I often run into the same problems again and again, when business owners are trying to build sites themselves, usually, rather than paying a professional. When someone commits these acts against the internet and website building and they claim to be a professional, fire them at once!

  1. Images straight off the camera to the image upload.
    Recently a very popular coffee company in my town had set up some very lovely products that were photographed in a most lovely manner, but the images that you would click to enlarge the thumbnail product image were around 13 megabytes on the server, 60 mb if you opened them in Photoshop! Now I understand that internet speeds have increased, but the poor ol’ computer monitor is incapable of displaying any image at that print-worthy brilliance in resolution, and it was being resized anyway. Excessively large images (bigger than 300-500k) will slow down your website page load, and that will make search engines not very happy with your website.

    Solution: Resize your images BEFORE you upload them to WordPress. Make them the size you wish to display at 72 dpi in a jpg format (for continuous tone) or a png (for illustrations or logos or images with solid color blocks). “Save for web” and downgrade the quality til the file size is low enough.

  2. Resizing Images in WordPress
    Just because you can, doesn’t mean you should! There are a couple of ways to resize images. Another client who shall remain anonymous had also uploaded some extremely large (15 or more megabytes) images that were appearing much smaller. There is an ‘edit’ button on images in the media library, and depending on what you do there, WordPress will create a new image based on your resize and cropping, appending it with a mess of numbers and letters after the end of the file name, but leave the original one alone. So this client used the image editor to make some files smaller.. though this doesn’t change the resolution, and the files were STILL 3 megabytes. An image on the web ideally is less than 300 kilobytes, so that is ten times the size it should be.

    Your WordPress image library is probably already a mess of the multitude of file version WordPress creates just by uploading one image… don’t make it worse.

    The other way I hate to even mention, is to select the image in the visual page editor (cringing as I type this) and drag the corners to resize the image. THIS DOES NOT RESIZE THE IMAGE! It only resizes the DISPLAY of the image.. in other words, you’re squishing it!

    Solution: same as above. Only upload images the size you want it to appear.

  3. Re-uploading the Same Image
    This one is more of a tip.. WordPress hates to get rid of anything – it really could appear on “Hoarders: Buried Alive” – and if you upload a file with the same image name, it won’t replace it. No no, it appends it with a ‘-1’ before the file extension.

    Solution: If I upload my media to the page and the size options are not working for me, I go back to Photoshop, work my magic, save the new version with the same file name… then when I go to my media library, I delete the image that is already there. This way, the new image WILL replace the old one, and I don’t have to update any image links I might have already created.

    Note: The image thumbnail in the media library sometimes will not update when you do this. Annoying, but only you see it, so the world is spared this annoyance, it is for you and you alone.

  4. Woo Commerce Image Chaos
    All the beautiful examples of online stores that you are attempting to emulate don’t bother telling you this one big secret: all their product images are the same dimensions. Perhaps even the exact same size. Why does it matter? Woo puts your product description right under the image, and if one product picture is 300 pixels high, and the next one is 200 pixels high, the text is not going to line up visually on a horizontal axis. Now granted, if you’re good at coding, you can move titles and descriptions around, but that is a whole ‘nother blog post for another day.
    I’ve gone around and around in circles with the thumbnail settings that never seem to agree which takes precedence between WordPress itself and Woo Commerce settings. I usually end up setting my own style or modifying a Woo template to make sure the images appear exactly the way I want them on the product pages. If anyone would like to chime in there, I’d be happy to post your solutions!
  5. Default File Names as Titles
    My cell phone is not good at naming files. Neither is my GoPro. My pocket digital camera will give me IMG_3608.JPG. My phone will give me 20150904_175827.jpg. Some phones add a “.jpeg” extension (gasp!) which gets converted to .jpg if you save for web in Photoshop (so you end up with “filename.jpg.jpg”. Now say you upload a file with the name G0018725.JPG that my GoPro so names it. WordPress automatically adds a title tag of G0018725. Isn’t that wonderful! Why is this important? Because no one is going to search for G0018725. They might search for Grand Canyon Hotels, but if you don’t put something descriptive like that in the alt and title tag, the image won’t help you out at all with search engine optimization.

    Solution: Add a title tag and an Alt tag when you add your media file. That information will stay with your image in the database, so whenever you call it, it’ll be there for you – you only have to type it out once.

Hope you found this article helpful, or if not at least entertaining. If you leave a comment it might be awhile before I get around to approving it… too busy resizing everyone’s images! But of course I have time for yours, if you need help click that Contact page button.

By | 2016-04-27T06:45:45+00:00 April 27th, 2016|wordpress|

Leave A Comment