Adding Images to WordPress the Wrong Way

Be Careful Adding Images to Your Blog That Are Too Big!

mark-twain-loc

Courtesy Library of Congress 200×247 pixels-23KB file size.

I recently had a client contact me about an error message he was getting when trying to upload an image and a PDF to his site. He’s an author about to publish a book on the life and times of Mark Twain and how he has been influenced by Mr. Samuel Clemons. Read along to find out what the problem was and why what he was trying to do could hurt him in more ways than one.

The image he was trying to upload was a picture of his book cover, both front and back. We were not able to fully duplicate his issue and the error message he got that mentioned a problem with memory, which shouldn’t be an issue due to way our servers are set up. After talking this over with a server administrator, who said he saw no issues with our server, here is what I said…

“The problem with the Twain Book Cover image that you were trying to upload is that it is WAY too big! 3408×2556 pixels is 3.4 times the width of your site. That file’s purpose was clearly for printing the book cover, not showing it online.

It’s also 2.15 megabytes, which will take a while to render on uploads and would certainly take forever to download. That may cause a bad user experience and Google penalties. (See Get More Feedback form Google below)

The file is also high-resolution at 300 dpi, which is about 4x the resolution of web browsers. The standard most use is images set to 72 dpi (max web resolution) and 96 dpi, which gives you a bit more resolution if someone prints the page.

We usually strive for images of 10-15KB for “headshots.” (7KB is often possible) Content images can often be 50KB or less and the biggest images we use all have to be less than 100KB. The image you were trying to upload was 22 times our acceptable maximum.

Webpages look best when there are image standards used, such as only using 1 or 2 widths (or 3 at the most). Most ratios are 3:2 or 2:3 for vertical, but squares or circles are pleasing too.”

“Confound the Internet, anyway. It is the very demon for conveying similarities of sound and images that are miracles of divergence from similarity of sense.” Mark Twain

Using the WordPress Image Editor

“Couple more things… One other mistake most people make with WordPress is that they adjust to size and dimensions of their images using WordPress editor. DO NOT DO THAT! Always optimize images on your computer before uploading them. I imagine you were going to do this with the cover image, but that is bad practice. Also, images that are reduced without ‘sharpening’ do not look as crisp as those optimized using tools that are likely already on your computer. An investment in Photoshop Elements might be a good thing.

So I have optimized your cover images, reducing them to usable resolution and file sizes, as well as reasonable dimensions for your consideration and use. Once uploaded they go no appear as grayed out like the monster file and all PDFs.”

We had another client over the Summer who was doing the same thing; adding images to their WordPress site and adjusting the size using WordPress. It’s a common problem that we see frequently and it’s easily fixed. So they had a Summer intern go though every image on their site and blog, optimizing each image and then uploading back to WordPress Media. Their pages began loading significantly faster.

take-the-survey

Get Feedback from Google

google-search-console-example

Image is 300×332 pixels and 17.1 kilobytes.

Google can give you feedback on your site with Search Console and also Insights.

All sites should be running Google Analytics and Search Console. Analytics reports in real time several important Key Performance Indicators about site visits and can be useful in assessing your site’s current situation and monitoring the effects of future activity. (Read more here)

Search Console is one of the few ways to actually communicate with Google and get their feedback. Bing has a similar service that’s worth implementing if you’re a serious website owner. Page load speed is thought to be an important part of their algorithms, in part because users are impatient waiting for pages to load. Search Console will give you information on that and so much more.

Like Google Analytics, Search Console requires that you have a Google account of some sort to set it up for your site. A Gmail account is sufficient.

Google Insights will also give you advice for just about any web page and score the pages on a scale of 1-100 for both mobile and desktop. In the Twain case, the Home page scored an unsatisfactory 53/100 on mobile and 57/100 for desktop.

If you look at your site’s pages using Insights, it shows you what your site looks like on a mobile device. To go further and see what your site looks like on specific phones or tablets, you might like Screenfly, which is also free.

We often see them recommend making technical changes to JavaScript and Cascading Style Sheets (CSS), which may or may not be something a Do-It-Yourselfer can understand, but we almost always get recommendations for decreasing image file size, which can be done by lowering resolution and image sizes.

example-of-google-insights-mobileSo the 2.1 megabyte image our Mark Twain aficionado was a problem that needed to be fixed for improved performance.

The tech upgraded limits beyond what is generally set. Upload size went from 10-20MB. I see no reason why you’d need more than 10MB, unless you were offering a free download of a book or a big video file. In that case, I recommend using Amazon S3 instead. REALLY cheap.

Hosting your site’s videos on YouTube puts them on a fast server, and makes it easier for people to find you. (Highly recommended)

Tech said part of the problem may be related to plugins, which may or may not be true, but the only way to determine is to turn each off individually and test to see if the problem resolves. I don’t really think that is an issue and don’t want to spend any time or money on it.

Another tip is to blow your browser cache every month or 2. I’ve seen all kinds of problems resolve if you do it regularly. In Chrome it’s found under History.

Your site needed to be upgraded to WordPress 3.6 and there were 7 plugins that needed updating. Again a change in plugins might have been an issue, but I think it was more related to file size. I updated WP and plugins.

Of course, Twain’s best quote about the Internet can be found in Letters to Satan…

It is a time-saving, profanity-breeding, useful invention, and in America to be found in all homes except parsonages.

Do you have any additional questions about adding images to WordPress blog sites?

Be Sociable, Share!

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge