02 Feb Three photo management tips for your WordPress site update
My previous posts for this series on Why Updating Your WordPress Site to Mobile Responsive Will Drive You Insane have covered how NOT to find good themes for consultants, planning and how to tell if your site sucks on mobile. Here are three tips on photo management as part of your move to a responsive design.
Allocate enough time.
If you’re updating your WordPress site yourself, you’ll probably discover that photo procurement, sizing, cropping, compression and optimization are likely the biggest headache of all the work you’ll do.
Websites are a lot more visual and word-light than they were five years ago when I built my original site. Plan on putting some effort into creating or finding new visual assets to include in your responsive site.
Get a pro to set up your sliders.
I hired a local WordPress developer for this and it saved me lots of errors and time. Because my old site slider images had captions that were part of the image, I needed help to take the original PhotoShop files and save out just the background images without the text.
One of my old slider images with mobile-unfriendly point size
(Bonus tip: because high-resolution photo file sizes can be too big to email via zip file, I gave the developer access to them via Google Drive. Use this or Dropbox as an easy way to transfer big files.)
The developer also saved the slider images with greater compression to get them under 100KB (the recommended max file size for images in websites). She then assigned the images to a Home page and set it as the front page.
Once they were loaded, the sliders were easy to work with in Revolution Slider. You can set transition times and styles, quickly change fonts and colors and edit text. I initially liked the Ken Burns scrolling effect that adds a bit of motion, but we ruled it out because the images seemed to jump on some browsers.
Another decision on sliders that I didn’t have an informed opinion about was whether to make them a boxed versus full-page display.
Example of boxed slider
Example of full-page slider
I learned it depends on whether your images have enough width to allow for any needed cropping and still look right. Full-width looks more modern, but can also seem a bit edgier, and may be too much of a departure for those used to a quieter look and feel. We chose full-width for my site.
Consider batch-compressing photos
Best practices for photos are to crop, size and compress BEFORE you upload to your site’s media library. I invested about 12 hours in this good hygiene. It was tedious and a huge pain, but I wanted a payoff in site speed.
If you just can’t stomach it or are migrating over so many uncompressed photos that this is unrealistic, there are tools that let you batch compress photos. Neil Patel provides a great list of image optimization tools in this post. My web development consultant recommended two WordPress plugins, Smush.it and Imsanity. She offered some great tips on these tools:
- Both allow you to set limits, so the plugin will compress images upon upload and never allow them on the site in the first place if they’re not.
- While Smush.it and Imsanity can address the problem, any time you resize or compress images within WordPress—whether in an editor or on the page—you risk getting dotty or blurry images. It’s a best practice to resize them locally to the dimensions that your theme uses.
- To get an idea of the image dimensions that are coded into your theme, open a
Attachment display settings with photo size options
post or page, click the Add Media button, and then in the Insert Media dialog look at the image sizes listed in the Size drop-down under Attachment Display Settings. Aim for the largest size, and compressing is more accurate than enlarging.
Next up in this series on updating your WordPress site to mobile-responsive: What I did to update my web content for better SEO.
Marketing picture fuzzy? Give us a holler.
Sorry, the comment form is closed at this time.