I’m a Foundation user and, in the “foundation image stack”, I’m now used to prepare 2 or 3 different sizes for the same image ; mobile+tablet or mobile+tablet+desktop.
I’ve been reading the forum these days and saw that many people recommend to warehouse their images for various reasons.
So I’m wondering : is the best solution is to prepare different sizes for each image and warehouse each of them ?
If someone could make a brief explanation about this, it would be helpful for me, thanks
Edit : I’d like to know too what sizes you use for what device
I create a site to use for my repository and warehouse everything that isn’t nailed down. Images, pdf, fonts, javascript, videos and audios etc.
To manage my warehouse, I use this stack called Repository Stack which can be found at https://instacks.com/repositorystack/ to keep track of all my files in it. This stack tell me the image’s pixel size and allow me to quick peek at the image to make sure it the one I am looking for then I can click an icon that copy it’s link to my clipboard and I paste it in the RW. The Repository Stack is worth every pennies that I paid for.
I have several of same images but in different pixel sizes or chopped differently for different breakpoints. I just add the breakpoint to the filename like image1-desktop.jpg, image1-mobile.jpg or you can create a separate folders /desktop/ /tablet/ /mobile/ and put your images for each breakpoint in the correct folder etc.
There is a good discussion here on image sizes for different devices:
On File Size I would suggest running all images through something like Tinypng.org to be sure they are optimized to be the smallest and best looking image. There are apps out there too, Realmac makes Squash, ImageOptim, JPEG Mini and there are more, but any of these should do the trick for you.
I think @willwood’s ebook is fantastic and definitely recommend it.
As regards file sizes, having gone through some of Realmac’s tutorials, they seem to suggest 1500 pixels wide for banners and then I suppose it depends on how big you want the other images to appear.
A recent thread suggested that JPG format is the best for photos and PNG for graphics (particularly if you want them without backgrounds).
Having achieved the dimensions you want, (having in mind you shouldn’t need any higher than 72dpi) drop the pics into image optim. or squash.
I don’t own squash and feel bad for saying this on Realmac’s forums, but image optim seems to get the smallest files.
The attached image has been taken with a Canon 750d, resized to 1500 pixels width in affinity photo and exported using the Jpeg medium setting.
I then ran it through image optim to get a nice 62kb file size.
Judge for yourself if you think the quality is okay. There are lots of people on this forum who are cleverer than I and I would love to know if I could do better.
ImageOptim does get the image to the smallest size and I been using it until I realized it been stripping more than I wanted. Recently, I had an image that was crisp and in bright daylight. After I ran it through the ImageOptim, the same image look like it was dusk time or the sun is setting.
I stopped using ImageOptim and I am using the Photoshop Save as Web for now.
Resizing your images is probably the most important step in the preparation process. It’s lossless.
If the location an image is being displayed at is only 660px wide, using a 1500px wide image is a lot of page weight that is totally a waste. The first thing the browsers are going to do is resize the image.
There’s really no rule for a maximum width of an image, the 1500px for banners might work for themes that allow for edge to edge display, but many have a maximum width. Loading an image larger than the maximum width is slowing the site down for no reason.
For themes that allow edge to edge then it’s a balancing act, speed vs quality. Banners are usually backgrounds, so quality of images might not be as important as speed of loading. Again it’s a balancing act.
As for the different compression software, most all have settings to change the amount of compression vs quality, so it’s best to play with it.
Thank you all, good informations, again
For images [spoiler] resizing [/spoiler] compressing, it’s been a quite long time I’ve been using optimizilla, but I never tried to check the difference between it and other methods…
Edit : I made a quick try with two images in ImageOptim and Optimizilla : the second one seems to be better in compression for a constant quality…
I thought optimizilla was for compression not resizing?
You can use preview (built in your Mac) to resize.
Most compression software does about the same thing. The trick is to adjust the compression, quality vs. speed.
