Setting Fancybox image sizes

Question

I have a Fancybox gallery which makes a link from one image load a gallery with 4 more images in it using the following html:

<div id="gallery">
    <a class="fancybox1" href="exampleimages/a1b.jpg"><img src="exampleimages/a1s.jpg" alt=""/></a>

    <div class="hidden">
    <a class="fancybox1" href="exampleimages/a2b.jpg"><img src="exampleimages/a2s.jpg" alt=""/></a>
    <a class="fancybox1" href="exampleimages/a3b.jpg"><img src="exampleimages/a3s.jpg" alt=""/></a>
    <a class="fancybox1" href="exampleimages/a4b.jpg"><img src="exampleimages/a4s.jpg" alt=""/></a>
    </div>
</div>

The href images are the big images displayed, the src images are the thumbnails. I know how to set the thumbnail image sizes in the javascript used to call the fancybox:

$(document).ready(function() {
$(".fancybox1")
    .attr('rel', 'gallery')
    .fancybox({
        prevEffect  : 'none',
        nextEffect  : 'none',
        helpers : {
            title   : {
                type: 'outside'
                       },
            thumbs  : {
                width   : 75,
                height  : 75
                        }
                    },

        padding : 0
    });//endfancy1

However I dont know how to change the size of the displayed images. Is it better to do it

1/ in the javascript as per the thumbnails.

2/ in CSS (if so how do i link to this specific image?)

3/ just set the actual image file to the correct size before it even gets to the webpage, so that the webpage can just display it unmodified.

Of these methods above, which is best practice in general, not just with Fancybox? Ive never really understood image sizes in webpages - but I'd presume that if the CSS or javascript were to resize the image, the whole (sometimes quite large) file size would have to be loaded and then resized whereas if the image was smaller to begin with it would be a smaller, quicker download. Correct??

Answer 1

Number 3 is the way to go, assuming you're not doing some crazy serverside preprocessing to get it there. If you know your images will be 75x75, save them as 75x75 images.

I'd personally prefer CSS if the above doesn't apply: You don't have to wait for the the DOM objects to be ready before the size is set, and client-side debugging will be a little easier.

.gallery .fancybox1 img
{
    width: 75px;
    height: 75px;
}

All of your assumptions about image sizes are absolutely correct. You'd also be dealing with image scaling inconsistencies across browsers. The ideal solution is to only ever display the exact same size of the original image. Of course, that's not always possible/realistic (fluid layout designs, etc).

At this point, though. Make it work, get everything out the door, optimize later. Unless you're working on healthcare.gov, then that's not the right approach at all ;)