How To Upload Large Images To WordPress


Upload large images WordPress
As internet speeds are growing faster and bandwidth limits are being lifted, photographers and other creative professionals finally have the opportunity to make their images appear in all their high-res glory online.

In the past, large images loaded much more slowly and it simply wasn’t practical to fill your website with lots of high resolution images. Instead, images would have to be compressed to reduce their file size (also reducing quality) and displayed in galleries as tiny thumbnails.

Page load time is still important but as technology has improved, it no longer takes 5 minutes to download a single high-res image. Displaying pictures at a large size embedded into blog posts or as a full-screen gallery is a great way for photographers to show off their work to maximum effect.

However, there are still a few points to bear in mind when you’re uploading large images to your site in terms of providing a good experience and quick-loading site for the visitors while still maintaining image quality.

Image Optimization

Before you upload your images to WordPress, you should optimize them for viewing on the web. Photoshop and Lightroom both have a “save for web” option which allows you to select different quality levels and see how it affects both the clarity of the image and the download time.

If you use a different image editing program that does not have a compression tool, you can use an online tool like Image Optimizer to compress your files before putting them on your website.

There will always be a trade off between quality and file size when you are preparing images for the web, so it’s a case of deciding on the ideal balance. Your photos will always look better at a higher quality but if they take forever to download, a visitor may get bored of waiting and click off your site.

Remember that as a photographer, you’ll be more aware of loss of quality than most other people. It’s probably the case that most people won’t even notice the difference between a medium quality and high quality image, unless the dimensions of the image are huge.

JPG is generally the best file format to save photographs for the web. Once you’ve saved your optimized image in a graphics program, you may be able to compress it further with a tool like Smush.it, which reduces file size without affecting quality.

Creating Thumbnails

If you want your page to load fast and give your users the option of loading large images individually, uploading thumbnails is the best way to achieve this. The thumbnail provides a small (both in file and physical size) preview of the image which can then be clicked on to view the larger photo.

WordPress automatically generates thumbnails when you upload an image via the media uploader. The dimensions of these thumbnails can be changed in your WordPress settings (via Settings > Media) and you can choose if they should be resized proportionally or cropped to fit the dimensions.

When you insert a thumbnail into a blog post or page, you can link it to the original image by choosing “Media file” from the attachment menu.

WordPress also includes functionality to build a gallery directly from a post or page. You just need to select the images you want to include and click “Create a new gallery”. While this is fine for basic thumbnail galleries in your blog posts, you’ll probably want more control over the look and operation for your main site gallery. You can achieve this using a WordPress portfolio theme, GPP Slideshow or one of the many WordPress gallery plugins available.

Embedding Images In Blog Posts

It’s important to make sure that your images are displayed at actual size on your blog and aren’t being squashed to fit, as this can affect page load time and image clarity. The easiest way to accomplish this is by changing the max width dimensions of large size images to be the width of your blog column. This way if you upload a picture that is too big to fit, WordPress will automatically create a resized version that is exactly the right size.

You can edit these dimensions on your media settings page within the WordPress dashboard. Make sure you choose “large”, rather than “full size” when you’re inserting images into your posts.

It’s worth noting that WordPress saves images at 60% quality when it resizes them. If this quality is not sufficient for you, use the GPP Improve Image Quality plugin to save WordPress resized images automatically at 100% quality.

Watermarking And File Protection

Be aware that if you upload files at their original size through WordPress, they will be available to download for anyone who visits your site, even if you only embed a smaller version into your gallery or blog. Unless you want to give away your digital negatives for free, it’s best to resize your images before you upload them.

In some cases you might want to make the original file available, but only for users with authority (for example, if you are selling stock images directly from your site or have online proofing functionality). In this case, a plugin like the Sell Media plugin is ideal. As well as protecting the original file, this plugin automatically generates different sizes from the original file and allows them to be bought at a price you set.

Sell Media also has a watermark extension which allows you to protect your large images by watermarking them with your logo or an image of your choice.

Increasing The File Upload Limit

Your web server will most likely have a maximum file upload limit which is designed to stop users from uploading huge files that will slow down their website. This is practical for most users but there may be some occasions when the upload limit is not sufficient for your largest and best quality images.

If you go into your WordPress media uploader, you’ll see your maximum upload file size, which may be as low as 2MB. This is simply not big enough for very large images, so you’ll need to edit it if you want to upload your high-res photographs via WordPress.

This limit is a server setting, not set by WordPress, so you can’t change it from your dashboard. Instead you’ll have edit the php.ini file, which can be found in your website’s root directory using an FTP client.

Say, for example, you want to increase the file upload limit to 64MB. Open up the file in a text editor, find the following lines and change the values as necessary:

upload_max_filesize = 64M
post_max_size = 64M
max_execution_time = 300

Save the file, re-upload it to your wp-admin directory and hopefully, this should have worked to increase the file upload limit.

An alternative way of changing the file size limit is by editing your .htaccess file. You’ll find this file in your root web directory. If you can’t see it, make sure your FTP client is set to display hidden and system files. Edit the file and add the following code:

php_value upload_max_filesize 64M
php_value post_max_size 64M
php_value max_execution_time 300
php_value max_input_time 300

Re-upload the file and you should be good to go.

If you’re on a shared hosting package, it’s possible that neither of these methods will work. If this is the case, you’ll need to contact your web host and ask them to increase the file upload limit manually.

Enjoy Your Large Images, But Keep An Eye On Load Time

Hopefully the tips we’ve provided enough should help you out if you’ve been having problems uploading large photographs within WordPress. High quality images can make a great impact, particularly when they are displayed full-screen or as large background images.

Just remember that not everyone is on high speed connections and it’s always a sensible idea to provide a lower-bandwidth option for people who may like to view your images without waiting all day for your site to load.

This entry was posted in Blog, Tutorials. Bookmark the permalink.

Posted by , at Graph Paper Press

Tom Ewer is a contributing writer from the UK. He writes about how WordPress can help freelancers and business achieve their goals through content strategy, SEO and best practices.

  • Blog

Create a WordPress theme in 60 seconds

No coding required!

Create a theme

  • http://vugujranwala.com/Download/pastPapers/index.php?v=1&csid=CS201 wasifaliwasi

    Thank you for this post, It was a great read which was extremely helpful.

  • lnikj

    Be warned that smushit and image optimizer will strip your metadata from your file. Your copyright information will be gone, along with ICC profile, which means that your image will not display properly on a wide gamut display.

    Even resizing an image in WordPress will do this, unless you switch WordPress from using GD to ImageMagick.

  • http://www.birdsongdtt.com/ Jamie Riddell

    Thanks for sharing, this is very helpful :-)