Frequently Asked Questions
Frequently Asked Questions
Responsive images – what they are and why you should care
When uploading images to a website, there are a few things you need to keep in mind. To help you, here is a small checklist to get you started.
Disclaimer: it is not an exhaustive list but it covers the basics that will benefit you, your users and your website.
- Choose the right format:
A general rule is to use JPEG for photos, PNG for transparent backgrounds or graphics, or WebP for smaller, fast-loading files. - Compress the file size:
Keep images under 300KB to prevent slowing down your site. There are free tools online that can help you compress images. - Resize to match dimensions:
Ensure the image fits its display size—don’t upload unnecessarily large images. - Check aspect ratio:
Match the layout’s shape, for example, square for profile pictures (1:1), rectangular for banners (16:9). - Name files descriptively:
Use clear names like red-flowers.jpg instead of IMG1234.jpg for better organization and SEO. - Add alt text:
Write descriptive alt text (e.g., “A cat sleeping on a couch”) to improve accessibility and search engine ranking. Alt text (short for “alternative text”) is a written description of an image, it helps explain what the image is about when the image can’t be seen.
Aspect ratio is the relationship between the width and height of an image or screen. It is expressed as two numbers separated by a colon (e.g., 16:9 or 4:3). It tells you the shape of the image—whether it’s wide, tall, or square. For example, 16:9 is a wide rectangle like most TV displays and 1:1 would be a perfect square.
When talking about images, aspect ratio is important because it ensures the image fits within the its allocated space and looks good on the device where it’s displayed. If the aspect ratio doesn’t suit where the image will be used, the image could look stretched, cropped in the wrong place, or have empty spaces around it. Matching the right aspect ratio keeps the image looking natural and fitting perfectly.
The Responsive Image Crop (RIC) is a handy plugin that the clever people here at Telescopic created to help our clients with image cropping. But what is image cropping I hear you ask?
Image cropping is cutting out unwanted parts of a picture to focus on what’s important or to make the image fit to specific sizes. Like taking a self-portrait and editing it for a social media profile for example. You might need to remove some of the background to focus the image on you but also make it smaller to fit within the given space.
We need the same functionality for images on the website because you might use an image that looks brilliant on the wide screen of a laptop or desktop computer, but when you look on a mobile suddenly all the amazing bits of the image falls off the screen and you are left with the non-eventful background. This is where the RIC plugin comes in.
It allows you to manually position how your image should be cropped according to its aspect ratio (see the question above for more information on aspect ratio!).
Let’s take a real-life example. Imagine you upload an image with an aspect ratio of 16:9, the dimensions could be something like 1920px x 1080px. This will look great when your content needs a landscape image but what happens when you view that image on a mobile for example? You could of course keep the landscape image if you wish but it could end up looking small on the screen so portrait (or square) dimensions would probably be better. But hang on, that doesn’t look right either…
Wouldn’t it be good if you could manually position the mobile image to make sure the image content is shown, not the empty background? That where the RIC plugin steps in.
With the RIC plugin, Telescopic will configure what image aspect ratios you will be using on your site, typically portrait, landscape, square, and what sizes they will need to be to suit the screen size, for example small for mobile, medium for tablet, large for desktop. This means that whatever display is needed, your image will look its very best as well as helping with the site’s performance.
So taking the example above, we would just need to make sure this image is cropped the way we want it for landscape (or original if you have uploaded it with the correct aspect ratio) and portrait. The other dimensions are optional – you don’t need to edit the crop for every instance of the image, just the ones you need. Open the media library and select the image you want to edit and click “Crop image”.
Select the tab you want to edit, e.g. I want to edit portrait for mobile so I would go to one of the portrait tabs and drag the cropped lines to the area of the image I want displayed. Save this by clicking “Crop and save the image”. By ticking the “Crop all sizes” box, this would update the other sizes (medium, large, etc) for the portrait image automatically, saving you the job of going into each tab and repeating the process.
And that’s it! Now your images look great on any device.
"It's probably the cache" – what is website caching and how to clear it
Updated your website but can’t see the changes? It’s probably caching. It could be something else of course but 99% of the time it’s caching.
When you first visit a site, certain data or files from the website are temporarily stored on your device or the server (we’ll talk about the difference in a minute) to make the website load faster the next time you visit it.
Practical example: an image.
First time visit: browser checks with your phone: does the image already exist? No? It downloads image onto your phone.
Second time visit: browser checks with your phone: does the image already exist? Yes? No need to download, here it is. Much faster.
As these files and data are now cached (temporarily stored) from your previous visit, it means your browser doesn’t need to download them again, making the page load faster.
Simple, right? But wait, remember we talked about browser AND server caching? Browser caching means files are saved on your local device (your laptop or mobile phone). Server caching stores data on the website’s server to deliver faster responses to users. And then there’s also a CDN which might store the data on another server that’s closer to you.
All complicated and clever technical things, but basically: if your changes aren’t showing it’s probably not broken.
Oof, where do we start? It reduces load times, saves internet bandwidth, reduces our carbon footprint and decreases the workload on website servers, to name a few.
In short, it helps improve the overall user experience. Happy users = more positive experiences and more time browsing. Win win.
Commonly cached items include images, stylesheets (a file that controls the visual appearance of a website), JavaScript files and sometimes even entire web pages or parts of them.
TTL stands for Time To Live. It is how we determine how long cached content should be kept before being refreshed and updated. The defined time could be a few minutes, hours, days, or even weeks or years!
If your website contains up to date news content like the BBC or CNN then you would want your TTL to be a couple of minutes maximum. For sites with content that occasionally changes, such as blogs or product pages, the recommended time is between 1-24 hours. If your content rarely changes, the TTL can be much longer – even up to 1 year!
We have been talking about how great caching is for the website user but what about those who use the CMS too? A faster website may be great but what happens when content is updated? How can you see the changes if caching is used on your site?
That’s were the website owner or administrator steps in. Proper caching tools will have ways of ensuring the latest version of content is displayed, such as clearing cache automatically when specific posts or pages are updated or providing a “Clear/Purge cache” button to override any TTL settings.
Clearing the cache forces the website to load updated files and ensure you are seeing the most up to date content.
How you do this depends on your browser (Chrome, Safari, Firefox, etc.) and operating system (Windows or Mac). But generally, you are looking for options like “Delete Browsing Data” or “Clear Cache” in your browser settings. Select the option to clear cached files.
A hard refresh bypasses the cache and forces the browser to download fresh files so you may need to perform this task when trying to view new or updated content on your site.
How you do this depends on your browser (Chrome, Safari, Firefox, etc.) and operating system (Windows or Mac).
Clicking the “Refresh” symbol in your browser will not be enough so you will need to follow the hard refresh commands. Typically this is hold down Ctrl and press F5 for Windows and hold down Cmd and Shift then press R for Mac. However, this can differ between browsers so we recommend asking your preferred search engine “how can I hard refresh [insert browser] on [operating system]”.
For browser caching, most browsers allow you to view, manage, and clear cached files through their settings. So yes, this is all you (or whoever is using your site). Only the user can control this.
When it comes to server caching, caching settings are controlled by the website owner or administrator. They can control what gets cached, how long items are cached for, where the cached information is stored (usually on a server or Content Delivery Network (CDN) such as Cloudflare) and what happens when updates are made to a website.