The ImageSizer plugin from Lumis is a fantastic plugin and you will get to find that out very shortly. This great plugin will make it easy for you to upload any file, crop it and resize it on the fly in multiple places throughout your whole ExpressionEngine site.
Further reading:
ExressionEngine Search Engine Optimization
Getting Started with Expression Engine
How to secure your ExpressionEngine Website
Tips for optimizing ExpressionEngine website for better performance
What are the Things You Can Do With ExpressionEngine?
We often use ImageSizer in conjunction with the FF Matrix FieldFrame field type to let users add as many images as they want with captions. Then we pull at the first one and give a link to view the rest in a lightbox gallery. Works great!
But some EE users do not realize that that those pictures they take with their tiny cameras are actually really large files. File size notwithstanding, the pixel dimensions are out of control. Now some lightboxes will scale the image to fit in the visible area, but either way it’s still having to load up images that are way too big for the web.
To cope with this problem, developers had to put instructions on the field: “900px wide max.” Yeah that worked. It will mostly meet with blank stares on that one. And then the question of…”so you’re saying I have to resize all my images before I even upload them? I thought you said this was supposed to be easy.” Sometimes we get so wrapped up in the way we use computers we forget that everyone else is still not so sillfull in using them.
Further reading:
ExressionEngine Search Engine Optimization
Getting Started with Expression Engine
How to secure your ExpressionEngine Website
Tips for optimizing ExpressionEngine website for better performance
What are the Things You Can Do With ExpressionEngine?
So ordinarily, you can get away with it but not without limitations. Let’s start with the original code you would use:
{exp:weblog:entries weblog="weblog_name"}
{ff_matrix limit="1"}
{exp:imgsizer:size src="{img}" width="634" height="248"
alt="{caption}"}
<a class="button gallery" rel="gallery" title="{caption}"
href="{img}">View Gallery</a>
{/ff_matrix}
<div class="hidden">
{ff_matrix offset="1"}
<a class="gallery" rel="gallery" href="{img}">{caption}</a>
{/ff_matrix}
</div>
{/exp:weblog:entries}
You can see that inside the ff_matrix loop we’re using ImageSizer for the preview image and then linking to it with a button overlay. Then right below we’re offsetting by that first image and creating links to all the other images. By making sure the rel tag is set to the same we get a lovely numbered gallery with just about any lightbox script out there.
We know that ImageSizer will resize and create new images based on your parameters so how do we create a resized image and link to it inside the lightbox? It’s pretty easy, actually. You can create a loop with ImageSizer tags, too. Then you pass variables to anything inside that loop.
For instance, instead of
<a class="button gallery" rel="gallery" title="{caption}"
href="{img}">View Gallery</a>
We can do this and resize the longest side to 750px. The big difference is that {sized} link instead of linking directly to the source file.
{exp:imgsizer:size src="{img}" auto="750"}
<a class="button gallery" rel="gallery" title="{caption}"
href="{sized}">View Gallery</a>
{/exp:imgsizer:size}
This image in the lightbox should now load quickly and not be too big for the browser. Here’s the whole code with the new pairs.
{exp:weblog:entries weblog="weblog_name"}
{ff_matrix limit="1"}
{exp:imgsizer:size src="{img}" width="634" height="248"}
<img src="{sized}" width="{width}" height="{height}"
alt="{title}"/>
{/exp:imgsizer:size}
{exp:imgsizer:size src="{img}" auto="750"}
<a class="button gallery" rel="gallery" title="{caption}"
href="{sized}">View Gallery</a>
{/exp:imgsizer:size}
{/ff_matrix}
<div class="hidden">
{ff_matrix offset="1"}
{exp:imgsizer:size src="{img}" auto="750"}
<a class="gallery" rel="gallery" href="{sized}"
title="{caption}">{caption}</a>
{/exp:imgsizer:size}
{/ff_matrix}
</div>
{/exp:weblog:entries}
You will notice that if you try using the single ImageSizer tag and the loop version together right after each other things get screwy. Use all loops or all singles if you don’t want to start pulling your hair out. Also, know that you can’t make the image itself a link. Then you’d be trying to specify two different sizes at the same time.
Further reading:
ExressionEngine Search Engine Optimization
Getting Started with Expression Engine
How to secure your ExpressionEngine Website
Tips for optimizing ExpressionEngine website for better performance
What are the Things You Can Do With ExpressionEngine?
There is another simple way to make the image link work. The key is to start the a tag, but close it after the image. See below:
exp:weblog:entries weblog="weblog_name"}
{ff_matrix limit="1"}
{exp:imgsizer:size src="{img}" auto="750"}
<a class="button gallery" rel="gallery" title="{caption}"
href="{sized}">
{/exp:imgsizer:size}
{exp:imgsizer:size src="{img}" width="634" height="248"}
<img src="{sized}" width="{width}" height="{height}"
alt="{title}"/>
{/exp:imgsizer:size}
</a>
{/ff_matrix}
{/exp:weblog:entries}
Why is Image File Size Important
As far as files are concerned, the main property users are often worried about is their size. Whether you want to download, upload or attach the file to an email and send it via internet, you will always choose the smallest possible size that is still at an acceptable quality. Besides transfer, available storage space on your computer is also a good reason to avoid large files. No matter if you are trying to send a picture to a friend, upload music on your mp3player or watch a video from your mobile device, size can cause problems and lead to errors, especially when it is combined with a slow internet connection.
Regardless how performing the device or how fast your internet connection is, there are certain limitations of technology that you cannot ignore. Adjusting the size of your documents, pictures and videos is extremely important if you want to avoid unnecessary issues. Taking into consideration that videos are some of the largest files there are, experts recommend that you use a professional mp4 video converter, in order to shrink them.
You may think that by diminishing them, you will only manage to ruin the quality of the image or sound, but this is not actually true if you choose carefully and use a reputable piece of software. [Not a valid template] You may wonder why file size is so important, but as you can see, there is more than one reason for which it would be better to modify the initial size of your files.
PC users from all over the world encounter daily problems related to internet or web page limitations as far as the dimension of their files are concerned. For instance, if you want to send an email containing a large attachment, the provider will warn you that you have to compress the item.
Normally, an email attachment cannot be larger than 25 MB – and this is a fortunate case and depends on the provider, because some of them only accept files smaller than 20 MB. Even if at first glance size may not seem a problem when it comes to sending a single picture or a document, this immediately changes the moment you try to send multiple files or worse – videos.
Most platforms and devices inform you when you are about to upload or store a large file and you are running out of space, so that you know you have to compress them. Fortunately, since technology has evolved a lot, now there are many alternatives of free mp4 video converter online apps, so that you can choose the one that suits you best. Besides preventing errors from appearing, smaller files will also help reduce uploading and downloading times.
Of course, this also depends on your internet connection, but the size is another relevant variable. While some users benefit from high speed, others cannot even browse the internet during the uploading process, and here is where the size of the file is extremely important. Besides this, the format is also something which can be adjusted by online converters, in order to make the files suitable to play on any device.
Further reading:
ExressionEngine Search Engine Optimization
Getting Started with Expression Engine
How to secure your ExpressionEngine Website
Tips for optimizing ExpressionEngine website for better performance
What are the Things You Can Do With ExpressionEngine?
Images Imapct Site Speed and Rankings on Search Engines
Generally speaking, image size affect site speed which has great impact on SEO and ranking. For user-experience, the rate at which your site loads is essential, which makes it no surprise that Google takes this into consideration when determining rankings. If your page doesn’t load quickly, search engines aren’t able to crawl as many pages, which can have an adverse impact on the indexation of your site.
Today, users expect instantaneous results when they consume content on the internet. From a user-experience perspective, if your site is operating slowly, there’s a good chance that users won’t stay long, and will visit another site instead.
Images Are Generally Important for SEO
These are seven ways to boost your rankings with images:
- Simplify images
- Avoid mixing photographic images with fonts and graphic elements
- Save images in the correct formats
- Avoid the use of too many colors
- Compress images
- Make images support the content
- Give images meaningful context
What size should my image be?
There are two measurements that tell you about an image’s size. One is the pixel dimension (px), the other the image resolution, which is defined as ‘dots per inch’ (dpi). Here it is useful to know that 72dpi is the default resolution for digital use while for print you need 300dpi.
Ideally your original image will have a large pixel size and at least 72dpi, if not bigger.
To find out the size of your image, just right-click it and go to ‘properties’, then go to ‘details’.
What if my image is too small?
If the image you want to use is small and less than 72dpi – if you use it at its current size, or even make it smaller, that is fine. But if you want to display it at a larger size, don’t use it.
If you take an image that is too small and enlarge it, the image quality will be affected (pixelation) and it will start to look fuzzy. The more you enlarge the image the fuzzier it will get. And, unless you are happy to use a low-quality image, there is no quick fix to get around it.
Can my image be too big?
In an ideal world, if you want to use an image, start off with as big an image as possible. This applies for use online as well as for print. If you have a high-quality image you can always reduce the file size and dimensions – but you can never enlarge an image without losing quality.
Here are some key points to remember:
- Image dimensions. If you want to use a smaller image online – one with small dimensions – this is fine if you keep the image the same size, or make it smaller. But if you want to display it at a larger size, don’t use it.
- Backups. If you are reducing an image dimensions or resolution, so it will load quicker on websites or for social media sharing, always keep a master copy backed up so you can use it some other time in the future.
- Download speed. So I said that big is beautiful, however… when posting images on your website, you should check that your image has been saved for web use, as this will optimise the files size – which in turn affects the image load time. This does matter, in particularly if your site gets viewed on a mobile device and pages load too slowly. (But always work from a copied file, not your backed up master file).
- Save for web. As mentioned above, if you want to make sure your image is web optimised, use a photo editing application like Photoshop. And instead of simply clicking ‘save image’ it is best to select ‘save image for web’.
- Scalability. No matter what size you use an image, something worth keeping in mind that any image may appear at many different sizes online. Will you image still look good when it is reduced for viewing on a mobile device, or when it appears on a social media share where it gets displayed as a thumbnail (very small) image? Clear, bold and simple images do better, and so are more scalable.
