Sizing images for Wordpress site
July 11, 2014 11:45 AM Subscribe
I'm using Wordpress to design my site (photography portfolio). Image quality is very important to me, but I'm also concerned about page-loading times. Galleries will be on one page, and you'll scroll down to view images. I prefer this layout to flash galleries. Some questions about this....
- If the theme I'm using automatically sizes images 922 px on the long side, is there any reason for me to size them (in PS and Lightroom) at 922 px before uploading them? What if all of my images are 1000 px on the long side? Will the photos look worse-off if they have to be downsized?
- Is 289 kb per image too large of a file? Is there a standard for photo portfolios? I've viewed some other photographer's portfolios who have the same layout and even though their images look super sharp, they are only 160 kb. I don't know how I can get my images to be that small without losing sharpness.
* Also, if there are websites and/or books that address this specifically, I'd love to know about them.
- If the theme I'm using automatically sizes images 922 px on the long side, is there any reason for me to size them (in PS and Lightroom) at 922 px before uploading them? What if all of my images are 1000 px on the long side? Will the photos look worse-off if they have to be downsized?
- Is 289 kb per image too large of a file? Is there a standard for photo portfolios? I've viewed some other photographer's portfolios who have the same layout and even though their images look super sharp, they are only 160 kb. I don't know how I can get my images to be that small without losing sharpness.
* Also, if there are websites and/or books that address this specifically, I'd love to know about them.
I would upload them at high resolution (like, higher than 1000px if you have it) and let WP resize them as needed, since you don't know now what size you'll want to use in the future (having run into this myself). You might change themes, you might want to support retina displays, etc.
posted by adamrice at 12:57 PM on July 11, 2014 [2 favorites]
posted by adamrice at 12:57 PM on July 11, 2014 [2 favorites]
Just finished working on a bunch of image-processing myself and used https://imageoptim.com/, a free little Mac program that losslessly compresses your images be removing things that have nothing to do with how the image displays. Sometimes it knocks a third of the size off! (For example, it might remove icon previews, embedded color profiles, and metadata.)
Also consider using Lazy Load or one of the similar plugins. These change your images so they only load once the user scrolls down to where they are on the page. So you can have lots of images on the page but they don't all load at once. (You've seen this before, no doubt.) Try this or other plugins with similar names: https://wordpress.org/plugins/lazy-load/
One other thing: using a content distribution network (CDN) can often speed up image loading times. Try CloudFlare. It has a free level that works well and is easy to install with a WordPress plugin.
posted by Mo Nickels at 3:38 PM on July 11, 2014
Also consider using Lazy Load or one of the similar plugins. These change your images so they only load once the user scrolls down to where they are on the page. So you can have lots of images on the page but they don't all load at once. (You've seen this before, no doubt.) Try this or other plugins with similar names: https://wordpress.org/plugins/lazy-load/
One other thing: using a content distribution network (CDN) can often speed up image loading times. Try CloudFlare. It has a free level that works well and is easy to install with a WordPress plugin.
posted by Mo Nickels at 3:38 PM on July 11, 2014
Regarding sharpness: make sure that you are working in a non-lossy format like PSD when you are sizing, coloring, cropping, etc., your images. Often non-sharp images are the result of someone modifying and saving a JPG multiple times.
Also, I recommend using a subtle "Smart Sharpen" in Photoshop. Just a little bit. It really helps when you're exporting to JPGs at a medium to high compression (that is, 20-60 in the little slider when you export for web use in Photoshop).
posted by Mo Nickels at 3:41 PM on July 11, 2014
Also, I recommend using a subtle "Smart Sharpen" in Photoshop. Just a little bit. It really helps when you're exporting to JPGs at a medium to high compression (that is, 20-60 in the little slider when you export for web use in Photoshop).
posted by Mo Nickels at 3:41 PM on July 11, 2014
You should keep high resolution versions of the images on your own drive, but for best results you should upload the images at the resolution that will actually be used on the site rather than letting the browser scale them. See Resizing images in a browser: Proceed with caution
posted by ludwig_van at 5:31 PM on July 11, 2014
posted by ludwig_van at 5:31 PM on July 11, 2014
Except that Wordpress general performs its resizing internally to a few target sizes. It's not browser scaling.
posted by adamrice at 6:50 PM on July 11, 2014 [2 favorites]
posted by adamrice at 6:50 PM on July 11, 2014 [2 favorites]
What's the disk space quota on your hosting account? If space is at a premium, I'd resize to 922px before uploading. If you have lots of space then I would just let WP handle sizing.
For a nice large image, personally, I'd try to stay under 250 KB (mind your capitals...)
posted by humboldt32 at 12:11 PM on July 12, 2014
For a nice large image, personally, I'd try to stay under 250 KB (mind your capitals...)
posted by humboldt32 at 12:11 PM on July 12, 2014
« Older Planning a peaceful trip to Switzerland and beyond... | My son is panicking about learning to swim. Help? Newer »
This thread is closed to new comments.
As to file size, that's a matter of the contents of the image and the amount of compression you're using (assuming you're posting jpgs). You can play around with different levels of compression until you find the sweet spot between file size and image quality. I tend to err on the side larger files and figure that most people who would want to see my images have broadband... but am not experienced enough to be entirely confident in that decision.
posted by rhooke at 12:17 PM on July 11, 2014