One moment, we're cooking some code examples
How to optimize images for each device?
Learn how to optimize images on your website! Explore basic optimization techniques and discover extra helpful ways using the built-in TypeStack tools.
img tagUse the default image tag <img src="/path/to/your/image"> to add an image in HTML.
Always make sure to set image dimensions using the width and height attributes. You should also provide a description of the image using the alt attribute.
Never use a relative path <img src="../../path/to/your/image"> to your image source.
In the example below we have set fixed dimensions (920 x 575 pixels) for the image, but the actual size of the image remains pretty large (1920 x 1200 pixels).
This way, the image may appear smaller, but the browser will still download the original file (181KB). This can cause delays, especially on mobile devices.
| Checklist image requirements | ||
|---|---|---|
| Optimized | Large file size (181KB). | |
| Modern format | Don't use jpg or png. Use webp instead. | |
| Responsive | Lacks responsiveness to varying screen sizes. | |
Resizing images in only supported in PHP versions 8.0 or higher
Enhance image performance by minimizing the file size. You can optimize images manually through resizing and lossless compression, or just use the built-in TypeStack functionality.
Optimize any image using the /image command and specify the width or height attribute like /w:600.
Prepend this command /image/w:600 to the path of the image and the system will resize and optimize the image automatically.
TypeStack automatically resizes and optimizes jpg or png images, serving them from the internal cache as webp images.
This results in an impressive 80% reduction in file size in this example!
| Checklist image requirements | ||
|---|---|---|
| Optimized | Resized with lossless compression. Small file size (37KB). | |
| Modern format | Served as a webp image. | |
| Responsive | Lacks responsiveness to varying screen sizes. | |
To prepare images for multiple devices, you want to make sure that an image can be scaled properly.
By using width="100%" and height="100%" the image will scale itself to fit any container.
In this example we used /image/w:320 to automatically resize and optimize the image for smaller devices.
This image can be resized, but its quality suffers on larger screens as it consistently adapts to the parent container.
| Checklist image requirements | ||
|---|---|---|
| Optimized | Resized with lossless compression. Small file size (7KB). | |
| Modern format | Served as a webp image. | |
| Responsive | The image is scalable, but lacks quality on larger screens. | |
Wrapping the image within its own dedicated container provides enhanced control over its behavior. We gain control about the scalability of the image and can even use the wrapper for some enhanced styling.
With this one we used a trick. as you can see we made use of a background-image, and because we used it we have more control over the image. the advantage of this is that you can set a fixed size but it is still scalable.
With this setup you actually don't see the image, you see the background image.
| Checklist image requirements | ||
|---|---|---|
| Optimized | Resized with lossless compression. Small file size (7KB). | |
| Modern format | Served as a webp image. | |
| Responsive | The image is scalable, but limited to the actual size. | |
Now you know how to optimize your images, let's go a step further. Learn how to make your images fully responsive for any screen or device. Or learn more about how to style your images using the image wrappers.