KDJ KDJ - 1 year ago 137
CSS Question

jQuery function that will change image link

I've got the following code for my images using srcset. I'd prefer to get away from srcset altogether. I want this to process all images with a particular class.

<img src="images/Connect-Groups-600.jpg"
images/Connect-Groups-600.jpg 600w,
images/Connect-Groups-1000.jpg 1000w,
images/Connect-Groups-1920.jpg 1920w,
images/Connect-Groups-2880.jpg 2880w
" alt=""/>

Does anyone know of a solution using jquery that will take the tag and change the location based on screen size. I need this to work on mobile devices too.


  • If screen is bigger than 1920w, it uses

  • If screen is bigger than 1000w and
    1920w or less, it will pull images/1920/Connect-Groups.jpg

  • If screen is between 601 and 1000 it will pull

  • if screen is 600w or less, it pulls images/600/Connect-Groups.jpg

If the size detection fails, I want it to always pull the image in the tag.

I need this to work no matter what the image is...I have no clue what to even search for to find a solution to do this.


At the end of this, I want to be able to put in on the page... the code will then pull the URL from the img tag, and append the correct size folder.

It will end up looking like on the end user side.

Answer Source

Please note, this method is not sustainable, I would not recommend using it for anything else, but it will help you solve this specific issue:

Given that your folder structure remains something like:


We can re-create a source based on this information:

function resize() {

  // First, we'll grab all the images on the page that can be changed:
  var img = document.querySelectorAll('img.resizable');

    for(var i = 0; i < img.length; i++) {
        // Grab the image extension
        var src = img[i].src.split('/')

        if (window.innerWidth > 1920) {
            img[i].src = "/images/2880/" + src[src.length - 1]; // Add the file name and extension 
        else if (window.innerWidth > 1000 && window.innerWidth <= 1920) {
            img[i].src = "/images/1920/" + src[src.length - 1]; // Add the file name and extension 
        else if (window.innerWidth > 601 && window.innerWidth <= 1000) {
            img[i].src = "/images/1000/" + src[src.length - 1]; // Add the file name and extension 
        else if (window.innerWidth <= 600) {
            img[i].src = "/images/600/" + src[src.length - 1]; // Add the file name and extension 


resize(); // execute when document is loaded to insert manual images for the first time without resizing

And ofcourse, load the basic 600 width file as default.

Example in jQuery:

function resize() {

    var img = $('img.resizable');
    var width = $(window).innerWidth();

    img.each(function(index, element) {

        var name = element.src.split('/') // Split is a native javascript function, which 'splits' the string into an array with the components

        if(width <= 600) {
            $(element).attr('src', 'images/600/' + name[name.length - 1]) // This name[name.length -1] trick is being used to select the 'last value in the string' based on the length of the string.
        else if(width <= 1000) {
            $(element).attr('src', 'images/1000/' + name[name.length - 1])
        else if(width <= 1920) {
            $(element).attr('src', 'images/1920/' + name[name.length - 1])          
        else {
            $(element).attr('src', 'images/2880/' + name[name.length - 1])          



Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download